Brooklyn-カスタマイズ

はてなブログのテーマ【Brooklyn】のカスタマイズ集

Brooklyn-カスタマイズ

見出しデザインのカスタマイズがうまくいかない時の対処方法(はてなブログ)

【スポンサーリンク】

Brooklyn見出しデザインカスタマイズ
 

本当に便利な世の中です。


ブログを始めるとブログのデザインをいじりたくなるのがブロガーの性のようですが、少なくても見出しデザインの変更は本当に簡単です。


コードを一般公開してくれている先輩ブロガーの方々には頭が上がりません。。


そんなこんなで私も自分好みのデザインを見つけコードを所定のところにコピペしたのですが、どうもうまくいきません。


少し悪戦苦闘した結果、少し工夫が必要であることがわかりました。


同じような状況になってしまった方のために対処法を紹介します。

見出しデザインがコピペでうまくいかない時の状況

今回紹介する対処方法がすべての方に当てはまるかは未検証のため分かりませんが、今回紹介する方法で解消した時のブログの背景を紹介しておきます。

・はてなブログ(Pro)


・独自ドメインは取得せず


・ブログテーマは【Brooklyn】を使用

このような背景で実際にコードをコピペしてみたのですが、うまくいかず。


コピペだけでいけるはずなのに??


と内心思いながら対策方法を探ってみると、なんとか方法を見つけました。


見出しデザインがコピペでうまくいかない時の対策方法

はてなブログのデザインCSSを開く(ダッシュボード→デザイン→スパナマーク→デザインCSS)。


そのデザインCSSの中には次のように記述されているかと思います(Brooklynで何もカスタマイズを行っていないデフォルトの状態)。

BrooklynデフォルトのデザインCSS
 

その続きにデザインを変更したいhタイトル(今回は試しにh3タグのデザインを変更してみます)について下記を追記します。

/*h3デザインをリセット*/
.entry-content h3,
.entry-content h3:before,
.entry-content h3:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}

※h3ではなくh2やh4をリセットしたい際には、上記のh3を適宜h2やh4に書き換えて下さい。


次にサルワカさんの記事などを参考に自分好みのデザインのCSSをコピーさせてもらう。

h1 {
position: relative;
}

h1:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

基本、公開されているCSSをコピペするだけで良いのですが、


h1となっているところを


.entry-content h3


に書き換える必要があります。


そのため、実際にデザインCSSに記載する内容は下記のようになります。

.entry-content h3 {
position: relative;
}

.entry-content h3:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

これで自分好みの見出しデザインに設定できたかと思います。


見出しデザインがコピペでうまくいかなかった理由

コピペだけでデザイン変更できると一般的には言われていますが、なぜうまくいかないことがあるのでしょうか?


ここは推測になりますが、原因は使用したブログのテーマにあると思われます。


と言うのも、実は【Brooklyn】というテーマは大変親切なことに見出しデザインもデフォルトで設定してくれています。


特に今回のようにデザインをカスタマイズせずとも大変カッコいいデザインが設定されています。


それを無理矢理(?)変更をしようとしたため、少しく工夫が必要だったようです。


詳しくみると、上の手順で/*h3デザインをリセット*/のところに「.entry-content h3~」を挿入しましたが、この文で【Brooklyn】のh3タイトルのデザインをリセットしています。


そして改めてデザインを設定してあげるのですが、上記で「.entry-content h3」をリセットしているので、同じく「.entry-content h3」でCSSを記載する必要があります。


見出しデザインがコピペでうまくいかない時の対処方法まとめ

おそらくHTMLやCSSがすごく得意な方からすると常識なのかもしれませんが、私のようにコピペでなんとかその場を凌いできたブロガーからすると少しレベルが高いですよね。。


ですが、やはりブログ自体のデザインはある程度凝りたいのがブロガーあるある。


今回紹介した方法が誰かのためになれば嬉しいです。