【はてなブログ】カテゴリーページの「タイトル」をカスタマイズする方法|CSSコピペOK

こんばんは。

motonoです。

 

今回は、カテゴリーページの、「カテゴリータイトルのカスタマイズ方法」をご紹介します。後半には、サイトのHTMLを見ることが出来る「デベロッパーツール」について、雑ではありますが、解説しています。HTML初心者の方はぜひご覧ください!

 

f:id:motonokus:20190121175552p:plain

 

カテゴリーページのタイトル味気ないですよ!

f:id:motonokus:20190121162654p:plain

カスタマイズ前のカテゴリーページです。サムネが見切れてるのとかは置いといて、タイトルが味気なさすぎます。「ブログ」っていう3文字が並んでいるだけ。

 

今回は、こうします↓f:id:motonokus:20190121162834p:plain

今回はシンプル目にしました。もっと派手にすることも可能です。これだけでも全然違いますよね!


それでは早速方法に参ります。

 

コピペOK!カテゴリータイトルのカスタマイズ方法

 これをデザイン設定>カスタマイズ>デザインCSSにコピペするだけです!

.archive-heading{
position: relative;
line-height: 1.4;
padding:0.25em 1em;
display: inline-block;
}

.archive-heading:before,.archive-heading:after{
content:'';
width: 20px;
height: 30px;
position: absolute;
display: inline-block;
}

.archive-heading:before{
border-left: solid 3px #00AA00;
border-top: solid 3px #00AA00;
top:0;
left: 0;

.archive-heading:after{
border-right: solid 3px #00AA00;
border-bottom: solid 3px #00AA00;
bottom:0;
right: 0;
}

 

 今回は、サルワカさんの記事を参考にカスタマイズしています。他にも素敵なデザインがたくさんありますので、好みのものを選んでみてください。

saruwakakun.com

 

簡単な説明ですが、カテゴリーページのタイトルは、「archive-heading」という属性値になっています。つまり、サルワカさんの記事で言うと、「h1」のところを「archive-heading」に変えると、そのCSSがカテゴリータイトルに適用されます!

 

 

HTML初心者さん必見!「デベロッパーツール」の使い方

なぜ「archive-headingを変えたらできる」っていうのが分かったのかを簡単に説明します。それは「デベロッパーツール」と呼ばれるものです。

GoogleChromeには、今見ているサイトが、どのようなHTML構成で作られているかが分かる機能が付いています。(Firefoxにもついています)

※個人的にはクロームがオススメ

 

 まず、カテゴリータイトルタイトルのところで「右クリック」します。

すると、一番下に「検証」というのがあるのでこれをクリック。

f:id:motonokus:20190121171211p:plain

 


すると、このような画面になります。

f:id:motonokus:20190121171452p:plain

 

ここまでの流れは3工程。右クリック>検証>Elementsです。

Firefoxの場合は右クリック>要素を調査>インスペクターです。

 

 画面右を拡大します。

「Elements」タブに、HTMLが表示されています。青マーカーが引いてありますね。

f:id:motonokus:20190121171752p:plain

ひとつ前の画像で、カテゴリータイトルにオレンジと青のマーカーが付いていましたよね。

f:id:motonokus:20190121175001p:plain

これは、「青マーカーのHTML<h2 class="archive-heading">ブログ</h2>は、サイト上ではここですよー」という印です。

 

<h2 class="archive-heading">ブログ</h2>

アーカイブヘッディングと書いてありますね。「カテゴリーのヘッダーだよ」と言ってるっぽいのでこれが「カテゴリータイトル」だということが分かります。

 

この方法で、「はてなブログのHTML構成」を調べて、カスタマイズすることが出来ます。

 

ここカスタマイズしたいけど要素が分かんないよーという時は、この方法をお試しください。

 

 また、このサイトすごいなーと思ったら是非「デベロッパーツール」を開いてみてください。

さいごに

最後までご覧いただきありがとうございました。今回は初めてカスタマイズ系の記事を書きました。僕のサイトもまだまだですので、これからどんどん「美しく」していきます!

 

ご質問などあれば、お問い合わせフォームやコメントから!

お疲れ様でした。