DIY BLOG In Nagasaki

女の子でも簡単に出来るDIYを紹介していきます!

このブログのカスタマイズをまとめてみる

スポンサーリンク

f:id:imuh:20171008093115j:plain

皆さまこんにちは!また少しカスタマイズしたので、参考にさせてもらいながら、簡単に実装できたカスタマイズをまとめます!私もCSSをいつか初心者の方に教えてあげられるくらいになりたいので、今度本を購入して勉強してみようと思ってます。

 

 

 

カスタマイズのまとめ

 

ちょくちょくデザインCSSをいじっていたのですが、実装したカスタマイズは、この記事にまとめていこうと思います。なので、また新たにカスタマイズをしたら、この記事に追記していきますね。

コピペで出来るものばかりなので、初心者の方には非常に参考になると思います。

 

文字をボックスで囲う

 

BlogでちょっとしたPOINTなどを書くときに、ずっとボックスで囲めたらいいのになって思っていたのですが、調べたらサルワカさんが分かりやすく紹介してくれていたので参考にさせていただきました。

 

saruwakakun.com

 

CHECK

このように表示することが出来ました。

見やすいし、可愛いですね♥︎

 

あわせて読みたいをCSSでカスタマイズ

 

よくいろんな方のBlogを読んでいると、「あわせて読みたい」や、「関連記事」とボックスで囲われているのを、ご覧になったことはありませんか?

私も何度も目にしてずっと憧れていたんですが、NO TITLEを運営されていシロマさん (id:shiromatakumi)の記事を参考にさせていただき、「あわせて読みたい」をBlogで表示することが出来ました

 

www.notitle-weblog.com

 

 

サルワカさんシロマさん、本当にありがとうございました!

この文字をボックスで囲うカスタマイズあわせて読みたいを囲うことが出来るカスタマイズを表示することが出来たので、Blogがかなり見やすくなりました

 

はてなブログで使えるアイコン一覧

 

shirokai.hatenablog.com

 

Font Awesomeを読み込むことなく、はてなブログですぐに使えるアイコンを紹介してくれている「しろかい!」を運営されているid:shun9167さんの記事を参考にさせていただきました。

 

こちらで紹介している、はてなブログで使うことが出来るアイコン一覧の中に使いたいアイコンがある場合は、読み込まないですぐに使えるのでオススメです。Font Awesomeは読み込んだりしなくてはいけないため、サイトが重くなりがちですので、非常に助かりました。

 

はてなブログ編集用のChrome拡張機能を追加する

 

Chromeの拡張機能は、シロマ さん(id:shiromatakumi)が生み出してくれた、はてなブロガーにとって非常に助かる機能です。私もBlogを書くときは、毎回使用させていただいております。

 

www.notitle-weblog.com

 

Chrome拡張するときは、上記のシロマさんのページが非常に分かりやすいので、すぐに拡張機能を追加することが出来ます

 

文字に背景色をつける

 

そして、ばっちょさん(id:shibaccho)が紹介してくれているCSSを、デザインCSSの欄にに貼り付けます。

 

www.shibaccho.com

 

すると、

このように文字の後ろに背景色をつけることが出来ました。

 

Chrome拡張機能のおかげ(シロマさんばっちょさんのおかげ)で、簡単に文字の背景色を変えることが出来ました。

 

見出し変更

 

saruwakakun.com

以前は

  • 大見出し→上下のボーダーのみのシンプルな見出し
  • 中見出し→左側に縦線のみ
  • 小見出し→Font Awesomeのアイコン

でした。シンプルすぎて、もう少し色をつけたいと思っていたのですが、色を変更していたら、大見出しと中見出しのデザインを変えたくなってきてしまったので、変更することにしました。

 

現在は、

大見出し

中見出し

小見出し

に変更しました。

 

フォントのカスタマイズ 

 

フォントのカスタマイズは、今のフォントが大変好きなため、変更しておりません。フォントを変更するときに参考にしたサイト様はこちらです。

 

www.north-geek.com

northgeekさん(id:northgeek)ありがとうございました。

 

表示がおかしくなってしまった

 

リストカスタマイズ

 

www.north-geek.com

 

リストには上手く適用されるのですが、楽天やアマゾンなどのリンクにもリストが表示されてしまうので、この部分だけ消すには一体どうしたらいいんだろう!何で消えないのかな?と焦りながら、コーヒーを飲んでゴロゴロしています。

 

リストをボックスで囲う

 

コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

上手くリストをボックスで囲えたのですが、今度は目次が崩れてしまいました。

 

このリストのカスタマイズを上手に出来るようになるまで、勉強しなくてはいけません。何日か調べてみたのですが、全然分からないので、少しお昼寝しようと思います。

もしお分かりの方がいらっしゃってお時間があったら、教えていただけたら心から喜びます

 

カスタマイズにオススメの本

 

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

 
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

 
はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

 
はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

 

 

まとめ

 

沢山の方達が、ブログのデザインを簡単に変更できるように紹介してくれているので、初心者の私でも、ここまでカスタマイズすることができました。

感謝しても足りないくらいなのですが、本当にありがとうございました

 

ブログのデザインが変わると、一層やる気が増す気がします。自分のBlogが大好きになりました。

本当にカスタマイズを紹介してくれているサイト様、いつもありがとうございます。そして、これからもお世話になります

 

最後までご覧いただき、ありがとうございました!