はてなブログのデザインを変えました。
ブログテーマをInnocent に変えてちょこちょこカスタマイズをしてみたので、どんな風にカスタマイズしたのかをちょっとまとめてみます。できるだけ初心者の方にもわかるように書いて見ます。
Innocentについてはこちらをどうぞ。シンプルで見やすくて素敵なテーマですよ。しかもレスポンシブ。
シンプルなのでカスタマイズもしやすかったです。
今後も少しずつカスタマイズはしていくと思いますが、今日は途中経過を少しご紹介します。
私の書いてる記事は基本的にゆっるいので、ブログのデザインも全体的にゆるくてかわいい感じにしていく予定です。
CSSのカスタマイズ方法
基本的にはCSSを書いてカスタマイズします。
はてなブログでのCSSの追加の仕方ですが、「そんなん知っとるわ！」って方も多いでしょうが一応書いておきますね！
CSSの追加はダッシュボードの「デザイン」から行えます。
デザイン編集画面のカスタマイズのタブを選び、デザインCSSからCSSの貼り付けができます。
サイドバーのタイトルをカスタマイズする
上がまるっこくて、下にボーダーが入ったデザインを作ります。
.hatena-module-titleにCSSを当てていきます。この作業をしているとclassの命名規則を見れるので面白いですね。
コードは以下の通り。「Result」を押すとどう表示されるのか確認できます。
See the Pen hatena blog module title customize01 by arisa itani (@alysantwanet) on CodePen.
上記のコードではbackground-colorで背景色の指定をしていますが、パターン画像を表示させたい場合はbackground-imageではてなフォトライフにアップした画像のURLを指定してあげればOKです。
記事のサムネイルをマウスオーバーした時に動きをつける
デフォルトだとただ写真が並んでいるだけなので、少し動きが欲しいなーと思ってつけてみました。
画像をマウスオーバーした時にサムネイルの写真が拡大＆うすいピンク色がになります。あと、ついでにドロップシャドウもつけています。ピンクが嫌！とかドロップシャドウなんていらん！って人は色変えたり、ドロップシャドウ消したりしてください。
スマホやタブレットだとわからないのですが、PCから見ている人は画像の上にマウスを置いたら画像が拡大するはずです。
CSSコードはこちらです。
hatena blog thmbnail customize01
（codepenで貼り付けたり、gistで貼り付けたりすみません、色々模索中です。 ）
最後に
もっと他にも色々いじってはいるのですが、人に伝わるようにまとめるのが思ったよりずっと大変だったので、今回はここまでにします（汗）
カスタマイズはそんなに難しいことではないので、もし、やったことがない人がいたら是非気軽にチャレンジしてみてください！
次はもっとわかりやすく書けるように勉強します・・・！