ご訪問ありがとうございます。ナナです。
今年のお正月は、ブログのデザインを整えたいと思い、いろいろとCSSをいじっていました。
とはいえCSSの知識はほぼないので、ところどころ謎の問題が起こるたびに夫に見てもらいました。
私が行ったカスタマイズの内容一覧と、参考にしたカスタマイズ記事をご紹介できればと思います。
テンプレートはBrooklyn
デザインテーマで選択したのは、『はてなブログテーマストア』でインストールした、Brooklynという人気テンプレートです。
人気なテンプレートの方が、カスタマイズの情報がたくさん載っていそうだったので、こちらにしてみました。
まずレスポンシブデザインの設定をする
ところでテーマストアを見ている時に、ちょこちょこ『レスポンシブデザイン』という単語が目に入りました。
レスポンシブとは…？
調べたところ、PCとスマホでわざわざCSSを書き分けなくても、PC版だけ設定しておけば、スマホなどの画面が小さいデバイスにも自動で対応してくれるデザインだそうです。
なるほど！すごい！
Brooklynもレスポンシブデザイン対応なので、その設定をしておきました。
デザイン→スマホ→詳細設定→レスポンシブデザインにチェック
CSSをいじる時に気をつけたいこと
1.非公開ブログでCSSをいじる
CSSをいじる際は試行錯誤を繰り返すことになるので、完成するまでは、ブログを見に来てくださる方の目につかないところで行った方がベターです。
私ははてなブログで、テスト用のサブブログを作り、そちらで行いました。
非公開設定にすれば、誰にも見られません。
満足のいくデザインが完成したら、反映させたいブログに、CSSをコピー&ペーストするだけです。
サブブログは、以下から作れます。
ブログの管理画面→ダッシュボード→＋新しいブログを作成
2.CSSはバックアップをとる
CSSは必ずバックアップを取っておくのをオススメします。
例えば、デザインテンプレートを変更した場合、調整したCSSは全部消えてしまうので要注意です。
私はとりあえずGoogleドライブのスプレッドシートにコピペして保存しておきました。
3.CSSには自分のための説明を入れる
CSSを調整する時は、以下のように、行う変更ごとに、自分のための説明書きを入れてからコードをコピペするのがオススメです。
/*●●のカスタマイズ*/
初心者なのでこれがないと、後で見返した時に何がなんだかわからなくなりそうでした。
/*と*/で挟むと、コードに影響を与えない文字列になるようです。
（ ↑このブログのCSS一部）
行ったカスタマイズ一覧
1.ブログタイトルを画像に設定
こちらの記事を参考に、ブログタイトルを画像にしました。
上の記事では、画像設定の際に起こった、スマホだと画像がやたら大きくなり見切れてしまう問題の解決方法を教えてくださっています。
2.グローバルナビ（グローバルメニュー）のカスタマイズ
憧れのグローバルナビを入れました！
グローバルナビとは、ヘッダーで、カテゴリなどのリンクメニューが表示されるやつです。
Brooklynを作った方が、記事内に方法を書いてくださっているので、その通りに設定します。
【問題発生！】タイトルとグローバルナビの間に変な余白ができてしまう
ヘッダーのタイトル部分の下に、やや不自然な余白ができてしまいました。
この場合は、下の記事の、『フッターとボトムエリアの隙間を消す』という見出し欄にて、解決法を紹介してくださってました。
無事、直すことができました。
【問題発生！】スマホ版のブログタイトルとグローバルナビが重なってしまう
さらに問題が発生しました！
スマホ版で、ブログタイトル画像とグローバルナビが重なってしまいました。
調べましたがわからず…。
夫に相談して修正してもらいました。
Before
After
直りました！ タイトルとグローバルナビが重ならず、スッキリしています。
↓夫が修正のために加えてくれたCSSはこちら。
/* タイトルイメージ調整 */
@media (max-width: 680px) {
#blog-title {
margin-top:36px;
}
3.グローバルナビにwebフォントアイコンを表示させる
次は、グローバルナビに、アイコンマークを付け加えました。アイコンかわいいです。
orefolder-sample.hatenablog.com
カスタマイズの際に参考にした記事です。
はてなブログで使えるアイコンフォントの一覧と、記載方法を載せてくださっています。
【問題発生！】アイコンと文字が近すぎる
Before
アイコンが入ったのは嬉しいですが、やや文字とアイコンが近すぎるようです。
こちらも、直してほしいなーチラッ👀として、夫に見てもらいました。
After
直りました！やったー
↓追加してくれたCSSです。
/* グローバルナビの文字とアイコンを離す調整 */
.global-menu-list li a i {
margin-right:5px;
}
4.記事の見出しのカスタマイズ
こちらでは、ブログトップの記事一覧で表示される見出しのカスタマイズについて、コピペ可能なCSSを紹介してくださっています。
可愛い見出しがたくさんあって悩んでしまいました。
5.サイドバーのデザインのカスタマイズ
サイドバーのデザインのカスタマイズは、こちらの記事を参考に設定しました。
素敵なことに、サイドバーに、それぞれ異なるwebフォントアイコンをつける方法も紹介してくださっています。
【問題発生！】サイドバーの文字色が違う色になる
サイドバーのデザインを変えたところ、問題発生です！
文字色の違うものが混ざってしまいました。
どうやらリンク付きの場合の文字色が、デフォルトで黒になっていたそうです。なるほど…。
直りました！
↓修正のために、加えてくれたCSSです。
/* サイドバータイトルリンク付きデザイン */
.hatena-module-title a {
color:#FFFFFF;
}
6.投稿年月日のカスタマイズ
こちらの記事では、細かな箇所のカスタマイズ方法をたくさん紹介してくださっています。
私は、この記事を参考に、グローバルナビのカラーや投稿年月日のカラーを設定しました。
7.記事内の見出しのカスタマイズ
記事内の見出し（大見出し、中見出し、小見出し）のカスタマイズ方法は、こちらを参考にしました。
8.目次のカスタマイズ
目次のデザインは、こちらの記事を参考にしたうえで、少しだけデザインを変えました。
具体的に調整したのは2点です。
・Font Awesomeを使わず、はてなのwebフォントアイコンを使えるようにした
・色や文字配置の調整をした
調整した目次デザインはこちら。
↓使用したCSS
/* 目次のカスタマイズ */
.table-of-contents {
position: relative;
padding: 15px 5px 5px 30px !important;
border-radius: 6px;
font-size: 16px;
line-height: 28px;
border: solid 4px #EF866B;
margin-bottom: 30px;
}
.table-of-contents a{
color: black;
}
.table-of-contents a:hover {
color: gray;
}
.table-of-contents a:active {
color: white;
}
.table-of-contents:before {
position: absolute;
display: block;
text-align: center;
top: 8px;
left: 50%;
margin-left: -1em;
font-size: 18px;
font-weight: 700;
z-index: 2;
}
.table-of-contents:after {
font-family:blogicon;
font-size:1em;
font-weight:normal;
}
.table-of-contents:after {
position: absolute;
content: '039 目次';
background: #EF866B;
color: #fdf2ef;
font-weight:bold;
right: 0%;
left: 0%;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 2px 0 2px 0;
margin: 0 -4px 0 -4px;/* -で指定しているところはborderと同じ数値にする */
text-align:center;
font-size: 20px;
letter-spacing: 1em;
}
ul.table-of-contents li {
list-style-type: none !important;
}
ul.table-of-contents li:before {
font-family:blogicon;
content: "029";
position: relative;
color: #EF866B;
letter-spacing:0.3em;
}
配色パターンの参考
ブログ全体の配色にあたっては、こちらのサイト様を参考にしました。
可愛い配色がたくさんあります！
まとめ
以上が、私が行ったBrooklynカスタマイズになります。
記事で方法をまとめてくださっていた皆様と夫のおかげで、良い感じにカスタマイズができました。
時間はかかりましたが、楽しかったです。
最後まで読んでくださり、ありがとうございました。