皆さまこんにちは！また少しカスタマイズしたので、参考にさせてもらいながら、簡単に実装できたカスタマイズをまとめます！私もCSSをいつか初心者の方に教えてあげられるくらいになりたいので、今度本を購入して勉強してみようと思ってます。
カスタマイズのまとめ
ちょくちょくデザインＣＳＳをいじっていたのですが、実装したカスタマイズは、この記事にまとめていこうと思います。なので、また新たにカスタマイズをしたら、この記事に追記していきますね。
コピペで出来るものばかりなので、初心者の方には非常に参考になると思います。
文字をボックスで囲う
BlogでちょっとしたPOINTなどを書くときに、ずっとボックスで囲めたらいいのになって思っていたのですが、調べたらサルワカさんが分かりやすく紹介してくれていたので参考にさせていただきました。
このように表示することが出来ました。
見やすいし、可愛いですね♥︎
あわせて読みたいをＣＳＳでカスタマイズ
よくいろんな方のBlogを読んでいると、「あわせて読みたい」や、「関連記事」とボックスで囲われているのを、ご覧になったことはありませんか？
私も何度も目にしてずっと憧れていたんですが、NO TITLEを運営されていシロマさん (id:shiromatakumi)の記事を参考にさせていただき、「あわせて読みたい」をBlogで表示することが出来ました。
サルワカさん、シロマさん、本当にありがとうございました！
この文字をボックスで囲うカスタマイズ、あわせて読みたいを囲うことが出来るカスタマイズを表示することが出来たので、Blogがかなり見やすくなりました。
はてなブログで使えるアイコン一覧
Font Awesomeを読み込むことなく、はてなブログですぐに使えるアイコンを紹介してくれている「しろかい！」を運営されているid:shun9167さんの記事を参考にさせていただきました。
こちらで紹介している、はてなブログで使うことが出来るアイコン一覧の中に使いたいアイコンがある場合は、読み込まないですぐに使えるのでオススメです。Font Awesomeは読み込んだりしなくてはいけないため、サイトが重くなりがちですので、非常に助かりました。
はてなブログ編集用のChrome拡張機能を追加する
Chromeの拡張機能は、シロマ さん(id:shiromatakumi)が生み出してくれた、はてなブロガーにとって非常に助かる機能です。私もBlogを書くときは、毎回使用させていただいております。
Chrome拡張するときは、上記のシロマさんのページが非常に分かりやすいので、すぐに拡張機能を追加することが出来ます。
文字に背景色をつける
そして、ばっちょさん(id:shibaccho)が紹介してくれているCSSを、デザインCSSの欄にに貼り付けます。
すると、
このように文字の後ろに背景色をつけることが出来ました。
Chrome拡張機能のおかげ（シロマさんとばっちょさんのおかげ）で、簡単に文字の背景色を変えることが出来ました。
見出し変更
以前は
- 大見出し→上下のボーダーのみのシンプルな見出し
- 中見出し→左側に縦線のみ
- 小見出し→Font Awesomeのアイコン
でした。シンプルすぎて、もう少し色をつけたいと思っていたのですが、色を変更していたら、大見出しと中見出しのデザインを変えたくなってきてしまったので、変更することにしました。
現在は、
大見出し
中見出し
小見出し
に変更しました。
フォントのカスタマイズ
フォントのカスタマイズは、今のフォントが大変好きなため、変更しておりません。フォントを変更するときに参考にしたサイト様はこちらです。
northgeekさん(id:northgeek)ありがとうございました。
表示がおかしくなってしまった
リストカスタマイズ
リストには上手く適用されるのですが、楽天やアマゾンなどのリンクにもリストが表示されてしまうので、この部分だけ消すには一体どうしたらいいんだろう！何で消えないのかな？と焦りながら、コーヒーを飲んでゴロゴロしています。
リストをボックスで囲う
コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに
上手くリストをボックスで囲えたのですが、今度は目次が崩れてしまいました。
このリストのカスタマイズを上手に出来るようになるまで、勉強しなくてはいけません。何日か調べてみたのですが、全然分からないので、少しお昼寝しようと思います。
もしお分かりの方がいらっしゃってお時間があったら、教えていただけたら心から喜びます。
いくつかはてなブログのテーマを変更した
▼ ZENO-TEALに変更
▼ Under Shirtに変更
カスタマイズにオススメの本
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログを見る
はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ
- 作者: 相澤裕介
- 出版社/メーカー: カットシステム
- 発売日: 2016/10/01
- メディア: 単行本
- この商品を含むブログを見る
まとめ
沢山の方達が、ブログのデザインを簡単に変更できるように紹介してくれているので、初心者の私でも、ここまでカスタマイズすることができました。
感謝しても足りないくらいなのですが、本当にありがとうございました。
ブログのデザインが変わると、一層やる気が増す気がします。自分のBlogが大好きになりました。
本当にカスタマイズを紹介してくれているサイト様、いつもありがとうございます。そして、これからもお世話になります。
最後までご覧いただき、ありがとうございました！