悠々自適な日々を目指す

波音に抱かれながら眠りにつくような生活を夢見るブログ

【PC版】ほんの少しブログカスタマイズ・おまけ

性懲りもなく、またちょっといじりました。
ほんの少しカスタマイズシリーズ(?)・最終回です。

本当にちょっとした変更なのですが、何かあった時にまた見返せるようメモしておきたいと思います。

前回までの記事は以下です。

カスタマイズで参考にさせていただいたサイト

今回のカスタマイズにあたり、それぞれ以下のサイトを参考にさせていただきましたm(_ _)m

・本文の見出し・リスト(箇条書き)・あわせて読みたい

www.nxworld.net

・蛍光マーカーのような強調文字

www.sirochro.com

blog.codecamp.jp

・SNSシェアボタンのデザイン

www.ituore.com

大見出し(h3)・中見出し(h4)のデザインを変える

両方とも、「シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50」から、「27. 吹き出し #2」「23. 下ボーダー(2カラー) #1」のコードをそのままコピペさせていただきました。

本当は背景色などを変えようかなと思っていたのですが、ストンと綺麗な形に収まったので、そのままにしました。吹き出しは丸みを帯びたデザインが可愛いですね♪

リスト(箇条書き)のデザインを変える

「画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - 6. 矢印×ディスク(円形)」のコードをコピペさせていただき、リスト内テキストの文字色を濃い灰色(#333)に設定しました。
これでリスト内でリンクを貼っていても、テキストとの見分けがつきやすくなったかなと思います。

「あわせて読みたい」テキスト部分のデザインを変える

見出しのデザインサンプルより、「35. ドッグイヤー #2」のコードをコピペさせていただきました。
カラーについては、以下の記事を参考に「さりげなく目立たせられる」「あまり浮かない」ものを設定した……つもりですw

www.hp-stylelink.com 

蛍光マーカーのような強調文字

基本、CSSの「linear-gradient」で設定するようですが、PC・スマホともにブラウザによっては未対応だったりするとのことなので、代替のタグも入れてみることにしました。

ただ、スマホ版はCSSが反映されません。残念。
Pro版にしたので、スマホ版にもCSSを反映しました。

SNSシェアボタンのデザイン

デザインもですが、読み込みがやけに遅いのが気になっていました。
最初は「あれっ、重複して表示されちゃってるよ!」と5分ほど焦りましたが、デザイン画面で用意されている「ソーシャルパーツ」のチェックを外せばよかったんですね
→(2016/03/26)記事個別ページでのみしかボタン表示されなくなってしまったので、はてブボタンとツイートボタンのみ再表示させました。/p>

オシャレになっただけでなく、ぱっと表示されるようになって嬉しいです(ノ´∀`*)

まとめ

スマホ版が全くカスタマイズできないのが落ち着かないですね……(´・ω・`)
Proユーザーにもしなっていたら、「あ、どうしてもカスタマイズしたかったんね」とこっそり思ってやってください。