プロフィール更新しました

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

皆さまこんにちは!また少しカスタマイズしたので、参考にさせてもらいながら、簡単に実装できたカスタマイズをまとめます!私も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で箇条書きをおしゃれに

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

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

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

 

いくつかはてなブログのテーマを変更した

 

▼ ZENO-TEALに変更

www.diy-mp.com

 

▼ Under Shirtに変更

www.diy-mp.com

 

現在はWordPressのSANGO+PORIPUというテーマを使わせていただいています。

 

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

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が大好きになりました。

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

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

6 Comments

charmy2016

こんにちは^^
とても素敵なデザインですね。
見出しの♡が可愛いです♪
カスタマイズをすると、ますます自分のブログが好きになりますよね!

返信する
uchu5213

。゚(PД`q。)゚。みっぷぅさーん!
凄すぎてマネできない!うわぁーん!
僕も色々いじったけど無理だった~!
ママー!(←おい!それは反則じゃろ!)
みっぷぅさんが、僕の隣でいじってー!
↑いやこれ以上暴走したら皆さんからボコボコにされる!
( `д´⊂彡☆))Д´)パーン痛い!すいません!
。゚(PД`q。)゚。だって…みっぷぅさんの、
ウォーリーが、可愛すぎて結婚したいのに…
(♯`Д´)=○)゚з゚)・∵.痛い!

返信する
imuh

チャーミーさん
わーっありがとうございます!カスタマイズ始めると止まらなくなってしまうので、良くないですが笑(´・∀・`)WordpressのSANGOというテーマが気になりすぎて、もう一つブログ作りたくなってきちゃっています笑

返信する
imuh

バリピル宇宙さん
私が近かったら行って出来るとこまでやってあげられるのに(´;ω;`)無力でごめんなさい。
デザインCSSに貼り付けすれば、反映されると思いますよ♥︎
結婚したいとまで言ってくださったのバリピル宇宙さんだけです笑
嬉しいなぁ(´;ω;`)

返信する
torimuso

初コメントです。
みっぷうさんのブログカスタマイズ記事が、とても参考になるんで、みっぷうさんに全乗っかりでカスタマイズしようと思いましたw

返信する
imuh

トリプロデューサーさん
トリプロデューサーさぁーーん!コメントまで嬉しすぎるし、言及もめちゃめちゃ嬉しかったです(´;ω;`)一緒にカスタマイズ頑張りましょうね♥︎私はほとんど人の力を借りていますが笑(´;ω;`)でも参考になったならば本当に幸せでございます^^♥︎

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です