こんにちは！ ことり（ kotori_books00 ）です。
デザインテーマ「Brooklyn」をカスタマイズしたので忘備録も兼ねてシェアします。
- デザインテーマはレスポンシブデザイン対応をチョイス
- 私が選んだのはシンプルなBrooklyn
- 目次のカスタマイズ
- 色を変更
- 見出しのデザインを選ぶのも楽しい
- 大見出しの角を丸く変更
- 中見出し、小見出しを変更
- サイドバーの変更
- 日付の背景を白に変更
- 日付の前に時計アイコン
- トップページをカード型に変更
- 引用を変更
デザインテーマはレスポンシブデザイン対応をチョイス
デザインテーマは人気順で表示した中からレスポンシブデザイン対応をチョイスしました。
レスポンシブデザイン対応というのは、スマホとパソコンを同じように見せてくれるデザインのこと。
私が選んだのはシンプルなBrooklyn
そのなかから私が選んだのはBrooklynです。
シンプルでスタイリッシュですよね。
こちらのテーマをカスタマイズしていきたいと思います！
目次のカスタマイズ
こちらのサイトを参考にさせていただきました。
色を変更
もともとのデザインはモノトーンのBrooklyn。
こちらに色の変更をくわえて少しずつ私のカラーを出していきます。
これだけでもグッと雰囲気が変わります。
色の参考にさせていただいたのはこちら。
見出しのデザインを選ぶのも楽しい
おしゃれな見出しのデザインを選ぶのも楽しいですよね。
大見出しの角を丸く変更
大見出しの角を丸くしたら少しやわらかい雰囲気になりました。
参考にさせていただいたのはこちらのサイト。
中見出し、小見出しを変更
中見出し、小見出しは何度やってもBrooklynのもともとの仕様をひきずってしまうのかうまく変更できなかったんですよね。
こちらのサイトをコピペさせていただいたら、すんなり変更できました。
サイドバーの変更
シンプルなサイドバーに変更。
Brooklynにあったサイドバーの吹き出しもこちらのサイトを参考に消すことができました。
日付の背景を白に変更
Brooklynでは日付部分の背景が黒になっているため、少し目立つ気がします。
同じことをお考えの方がいらっしゃったので参考にさせていただきました。
日付の前に時計アイコン
少し可愛く日付の前に時計アイコンを入れてみました。
こちらのサイトを参考にさせていただいてます。
たぶん、Brooklynの設定がひきずられているのだと思いますが、アイコンの表示が太かったので、
font-weight: normal; /*文字の太さ*/
をCSSにつけくわえています。
さらにアイコンは「f031」だったのですが、「f043」に変更しました。
アイコンはこちらから選びました。
ちょっと気になるのが時計のアイコンと日付が少し離れてしまったこと。
Brooklynの日付の背景を白にしただけなので、実際には背景（ボックス）があります。
それを削除したいのですが…。
やり方がわかりませんでした。
どなたかおわかりの方がいらっしゃいましたらお教えいただけると嬉しいです１
現在は薄いグレーの背景にしています。
トップページをカード型に変更
こちらのサイトを参考にさせていただきました。
引用を変更
デフォルトのままだと引用っぽく見えなかったのでカスタマイズ。
こちらのサイトを参考にさせていただきました。
→カスタマイズしているうちにトップページの文字サイズが大きくなってしまい、戻せなくなりました。現在は他のデザインテーマに変更しています。
