はてなブログカスタマイズをやってみた♪
こんにちは!タンです♡
ただいま、職業訓練校ではWEBのお勉強中です。
ちょっとCSSと言うものが分かってきた気がする…ので、はてなBlogのテンプレートをカスタマイズしてみたいと思います。これまでデフォルトのものを使用していたのですが頑張って挑戦してみます!
はてなブログテーマは…
Moonnote(id:waitingmoon)さんが作成の「innosent」にします♡
innocentを選んだ大きな理由は
- シンプルなデザインであること
- レスポンシブデザインなのでモバイルで見た時もデザインが変わらないこと
- Moonnote(id:waitingmoon)さんのカスタマイズ情報が豊富にあること
です。制作者の方がカスタマイズ方法を教えてくださると、安心できます♡
ナビゲーションバーの編集
innocentには、デフォルトでナビゲーションバーが付いています。助かります…
しかし、このステキなナビゲーションバーも黒だと少し重いので、カスタマイズしました。もちろん、Moonnote(id:waitingmoon)さんの記事を参考にして♡
----------------------------------------
タンのテーマカラーはグレーと青緑なので、背景色をグレーに。マウスホバーした時の色を青緑の文字色に変えました。
gist8786c83a8ffd85adbdbb0354103bf8cd
※このソース貼り付け方法は、Milkのメモ帳(id:maxminkun)さんの記事を参考にしました!イケてる感じになったかなぁ。
ブログタイトルを中央に
ブログタイトルを中央に持っていきたかったので、他の方が質問した内容にコメント欄にMoonnote(id:waitingmoon)さんが回答していた内容を参考にカスタマイズしました。
大見出しをカスタマイズ
Yukihy Life(id:ftmaccho)さんの記事を参考にして、大見出しをカスタマイズしました。よくあるや〜つ〜にしてみた。なんとなくイメージ通りになった♡
中見出しをカスタマイズ
NO TITLE(id:shiromatakumi)さんの記事を参考にしました♡
見出しタイプ4を使わせていただいてます。
リストをカスタマイズ
キキこむ(id:kikixxxx)さんの記事を参考にしました♡
◯に>がカワイイ♡
ほかにもカレンダーを設置したり、色々やりました。しかし、色んなサイトを参考にさせていただいたので、記憶がこんがらがってしまって…。
総時間2日くらいかかったのではないでしょうか。ほんと皆様のブログのおかげです。
ありがとうございます。