はてなブログで記事ページのタイトル周り(タイトル文字含む)をカスタマイズする方法

記事ページのカスタマイズです。

今回は記事ページの上部、記事ヘッダー部分のカスタマイズをいつも通り手厚くるしく行っていきたいと思います。

ほとんどの方はタイトルの文字関係のカスタマイズを目的に訪問されたかもしれませんが、それ以外の部分も詳しく解説する予定なので興味のある方は是非。

「タイトルの文字のとこだけでいいからはよ見せんかい」という方はココから大ジャンプしてください。

足腰の弱い方はスクロールしてください。

どうせやるならマニアックに行きましょう。(嫌な予感)

以下注意点です。

念のためにバックアップはとっておいてください。

またこの記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご理解ください。

PLAIN - テーマ ストア

記事ページ上部のカスタマイズ方法

記事ページのタイトル周りは、デザイン設定の記事上部の部分から行います。

デザインのページから、スパナのマーク→記事と進んで記事上の部分にコードを追加する形になります。

f:id:oyomiyo:20180928122837p:plain

ここらへんでめんどくさがらずに画像をのせてあげる所が、、、

親切。

*めんどくさがらない自慢が後々めんどくさくなります。

で、赤枠の部分に以下のコードをコピペしてください。

CSS

<style type="text/css">

.entry-header {
    border-bottom: 1px solid #ddd; /*記事ヘッダー下線*/
    padding: 15px; /*記事ヘッダー内余白*/
    background-color: #fff; /*記事ヘッダー背景色*/
}

.entry-header .date {
    margin-bottom: .5em; /*日付下余白*/
    font-size: .9rem; /*日付文字サイズ*/
}

.entry-header .date a {
    color: #999; /*日付文字色*/
    text-decoration: none; /*日付文字装飾*/
}

.entry-header .entry-title {
    margin: 0 0 .3em; /*記事タイトル余白*/
    font-size: 1.5rem; /*記事タイトル文字サイズ*/
}

.entry-header a.entry-title-link.bookmark {
    line-height: inherit; /*記事タイトル行間*/
    color: #333; /*記事タイトル文字色*/
}

.entry-header .categories {
    margin: .5em 0; /*カテゴリー余白*/
    font-size: .9rem; /*カテゴリー文字サイズ*/
}

.entry-header .categories a {
    margin-right: .5em; /*カテゴリー同士の間隔*/
}

.entry-header .social-buttons .social-button-item {
    margin-right: .2em; /*ソーシャルボタン同士の間隔*/
}

</style>

カテゴリーとかソーシャルボタンとか全部設定した場合を想定しているのでちょっと長いコードになってますが、とりあえず全部追加してもらえればと思います。

 

ででで、今回も私のオリジナルテーマ「PLAIN」を使ってカスタマイズの説明を(親切に)続けていく予定なのですが、黒と白で初期設定をしているテーマなもんで見にくいんです。

なんたってプレーンなテーマですからね汗。

なんで一応背景色を設定しておきました。

f:id:oyomiyo:20180928123958p:plain

記事の区切りがハッキリして見やすくなりましたね。

ここら辺の気遣いが、、、、

親切。

なんですよねぇ~~~。

 

オセッ、オセええええッッ!!

 

はい。フラストレーションが溜まってきたところで、記事タイトルを含むヘッダーのカスタマイズに入ろうと思います。

記事ヘッダー部分の下線をカスタマイズする

はじめっからマニアックなの失礼します。

タイトル文字のカスタマイズとかもこの後すぐ説明するのでしばしお待ちを。

で、カスタマイズするのは以下の部分です。

border-bottom: 1px solid #ddd; /*記事ヘッダー下線*/

※長いコードを何回も載せるのが嫌いなので、必要な部分だけピックアップします。冒頭のコードのうちの所定の部分だということを理解してください。

このコードのうち1pxの部分が枠線の太さ、solidが一本線の指定、#dddが線の色ということになります。

取りあえず太さを5px、色を水色(#365899)で指定してみましょう。その場合こんな感じで書き換えることになります。

border-bottom: 5px solid #365899; /*記事ヘッダー下線*/

これを追加するとこうなります。

f:id:oyomiyo:20180928130307p:plain

線が太く青色になっているのが分かると思います。

まあここら辺はいじらない人も多いかもしれませんが、あのうすくて細い一本線がいかにも「はてなブログ」って感じがして嫌な人もおられるかもしれません。

一本線を見るだけでアレルギー反応が出る人は医者の診察を受けるか、以下の方法で対応してください。

border-bottom: none; /*記事ヘッダー下線*/

このように書き換えることで線を消すことができます。

逆にクスリの副作用で線をみると興奮して鼻息が荒くなる人は以下のようにしてみると、全方向を一本線で囲むことができます。

border: 5px solid #365899; /*記事ヘッダー下線*/

f:id:oyomiyo:20180928131437p:plain

人はこれを線ではなく枠と呼ぶ。

ばか。自分ばか。

記事ヘッダー部分の余白をカスタマイズする

記事ヘッダー部分の余白とは、

f:id:oyomiyo:20180928133020p:plain

ここです。この余白設定がキモチワルイサイトって結構あります。

ワタクシが必要以上に見た目にこだわる人間だというのは認めますが、なんかムズムズしますよね、、、、。

記事ヘッダー部分の余白もちゃんと設定してあげましょう。

書き換えるのはこの部分

padding: 15px; /*記事ヘッダー内余白*/

デフォルトでは15pxにしてます。

500pxぐらいでやりたい気持ちをぐっとこらえて、30pxでやってみましょう。

padding: 30px; /*記事ヘッダー内余白*/

f:id:oyomiyo:20180928133407p:plain

若干パーツが中央に寄った感ありますね。

必要に応じてどうぞ。

記事ヘッダーの背景色を設定する

ヘッダー部分の背景だけ別の色で設定するのはおしゃれでいいと思います。

簡単に変更できるので試してみて下さい。

以下の部分を変更します。

background-color: #fff; /*記事ヘッダー背景色*/

#fffの部分がカラーコード(ここでは白)ということになります。試しに薄いグレー(#f5f5f5)でやってみましょう。

background-color: #f5f5f5; /*記事ヘッダー背景色*/

f:id:oyomiyo:20180928134421p:plain

記事ページ上の、ヘッダーとあるさま、かかる趣を見るにいとをかし。

ツギ。

記事ヘッダー部分の日付をカスタマイズする

冒頭のコードのうち以下の部分が当てはまります。

CSS

.entry-header .date {
    margin-bottom: .5em; /*日付下余白*/
    font-size: .9rem; /*日付文字サイズ*/
}

.entry-header .date a {
    color: #999; /*日付文字色*/
    text-decoration: none; /*日付文字装飾*/
}

日付の部分はまとめて一気に説明します。

日付下の余白

デフォルトでは日付下の余白は0.5em、つまりフォントサイズの50%分の余白が入ることになります。文字が16pxで指定してあった場合、下に8pxの余白ができることになります。em指定は便利なので覚えておきましょう。

もちろんpx指定でも問題ありません。

ここでは、30emぐらいで指定したい気持ちをぐっとこらえて、1.5emで試してみましょう。

margin-bottom: 1.5em; /*日付下余白*/

f:id:oyomiyo:20180928143339p:plain

ちょっとだけ伸びてますね。

日付文字関連

文字サイズ、文字色、文字装飾が含まれます。

文字サイズはデフォルトで0.9remになってます。つまり基準となるフォントサイズの90%の大きさで表示されていることになります。

rememのトモダチ。

font-size: .9rem; /*日付文字サイズ*/

認知症なので何度も言いますがpx指定でも問題ありません。

 

文字色は少し薄い黒(#999)を指定しています。

color: #999; /*日付文字色*/

ここら辺も変更が必要な人は少ないと思いますがお好みで。

 

残すは文字装飾です。

text-decoration: none; /*日付文字装飾*/

デフォルトでは無し(none)にしています。書き換えるとすれば下線(underline)くらいでしょうか?

text-decoration: underline; /*日付文字装飾*/

取りあえず皆さんの期待に答えつつ自分なりにカスタマイズしてみたのでお手本として載せておきます。

CSS

.entry-header .date {
    margin-bottom: 0em; /*日付下余白*/
    font-size: 9rem; /*日付文字サイズ*/
}

.entry-header .date a {
    color: #f00; /*日付文字色*/
    text-decoration: underline; /*日付文字装飾*/
}

日付なんてのは比較的重要度が低い部分ですからこんなところでふざけているわけにはいかないのです。

まあ今のところ過激なカスタマイズ欲を上手くコントロールできているようなので安心していただきたいものです、、、

 

 、、、、、

 

、、、、、、。

 

 

 

 

f:id:oyomiyo:20180928151521p:plain

やっちまった。

 

医師の診察が必要なのは私の方かもしれない。

記事ヘッダーのタイトル文字をカスタマイズする

皆さんお待ちかね記事タイトル文字のカスタマイズにやっとの思いで来ることができました。

ここまでやってこれたことをまずはおふくろさんに感謝したいと思います。

(ページジャンプで来られた方へ。色々ありました)

 

それはいいとして、使うコードは以下の部分です。

CSS

.entry-header .entry-title {
    margin: 0 0 .3em; /*記事タイトル下余白*/
    font-size: 1.5rem; /*記事タイトル文字サイズ*/
}

.entry-header a.entry-title-link.bookmark {
    line-height: inherit; /*記事タイトル行間*/
    color: #333; /*記事タイトル文字色*/
}

取りあえず画像で説明しようかしら。

f:id:oyomiyo:20180928154904p:plain

行間つまり、

line-height: inherit; /*記事タイトル行間*/

が上の方の余白。

margin: 0 0 .3em; /*記事タイトル下余白*/

が下の方の余白ということになります。

ここら辺も画像で丁寧に教えてくれるところが、

親切。

そして慎み。

 

では順番に説明します。

タイトル下余白

ぱっと見ちょっとややこしいコードです。

margin: 0 0 .3em; /*記事タイトル下余白*/

とはいっても最後の.3emの部分しかいじらないので簡単です。

emの説明はしたので分かるかと思います。もちろんpxでも指定できます。

例として0.5emの余白を入れたい場合は、

margin: 0 0 .5em; /*記事タイトル下余白*/

こうすればオッケーです。

※.5em=0.5emのことです。カッコつけてます。

タイトル文字サイズ

この辺りは変更が必要になることが多いかもしれません。

使うコードです。

font-size: 1.5rem; /*記事タイトル文字サイズ*/

ここら辺は好みの問題でしょう。

ちなみに私はタイトルなどの指定をremで行っています。

emを使っても問題ないのですが、rem指定の方が後々めんどくさいことになりにくいということだけ覚えておいてください。

※詳しい説明を始めるとお風呂に入れないので割愛します。(不親切)

重度の認知症なので何回も言いますがpx指定でもオッケーです。

タイトル行間

行間は初期値(inherit)に設定しています。今のままでいいのであれば、そのままにするか削除してください。タイトルの場合は、1.4~1.7ぐらいでいいかもしれません。

line-height: 1.5; /*記事タイトル行間*/

タイトル文字色

これを使います。

color: #333; /*記事タイトル文字色*/

カラーコードを好きなように入れ替えて使ってさい。

文字色に関しては説明しなくても分かると思うので(さっきも出てきたし)ハショリマス。

 

記事タイトルの文字については以上です。

最後にカスタマイズの例としてワタクシがお手本を見せようと思います。(今回はマジメ)

CSS

.entry-header .entry-title {
    margin: 0 0 1.0em; /*記事タイトル下余白*/
    font-size: 2.0rem; /*記事タイトル文字サイズ*/
}

.entry-header a.entry-title-link.bookmark {
    line-height: 1.6; /*記事タイトル行間*/
    color: #454545; /*記事タイトル文字色*/
}

f:id:oyomiyo:20180928171112p:plain

過激なカスタマイズ例が求められているのか。それとも実用的なものが求められているのか、

私にはさっぱりわかりません。

記事ヘッダーのカテゴリーをカスタマイズする

終盤に入りました。あとちょっとです。

CSS

.entry-header .categories {
    margin: .5em 0; /*カテゴリー余白*/
    font-size: .9rem; /*カテゴリー文字サイズ*/
}

.entry-header .categories a {
    margin-right: .5em; /*カテゴリー同士の間隔*/
}

はいココ!

サクサク行くよ。

カテゴリー上下の余白

ここのことです。

f:id:oyomiyo:20180928173124p:plain

タグ上の余白に関しては、タイトル下の余白とかち合ってしまうので難しいところです。

※マージンの相殺と言います。気になる方は検索。

コードは以下です。

margin: .5em 0; /*カテゴリー余白*/

.5emの部分を.8emに書き換えたとすると、上下に0.8emずつ余白が入ることになります。

marginの指定方法は色々あるので調べてみて下さい。

カテゴリー文字サイズ

font-size: .9rem; /*カテゴリー文字サイズ*/

remでもemでもpxでもなんでもどうぞ。

カテゴリー間隔

カテゴリー同士の間隔を指定します。

margin-right: .5em; /*カテゴリー同士の間隔*/

remでもemでもpxでもなんでもどうぞ。

 

カテゴリー部分に関してはこんな感じでしょうか。

ここらへんで超参考になるカスタマイズ例を見ておきましょう。

CSS

.entry-header .categories {
    margin: 1.0em 0; /*カテゴリー余白*/
    font-size: 1.0rem; /*カテゴリー文字サイズ*/
}

.entry-header .categories a {
    margin-right: .5em; /*カテゴリー同士の間隔*/
    font-weight: bold;
    color: #000;
    background-color: #eaeaea;
    text-decoration: none;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

見たことないコード出てきてるし説明せいや!

アッ、、はい。取りあえず画像画像(;'∀')!

f:id:oyomiyo:20180928190924p:plain

ボタンのようにするカスタマイズは別記事で紹介予定です。(しばしお待ちを)

この記事だけでは時間がね、、、ないもんでね、、、。

記事ヘッダーのソーシャルボタンをカスタマイズする

ソーシャルボタン自体のカスタマイズは難しいので、余白の設定だけ行います。

※ソーシャルボタンにはiframeというものが使われていて、基本的にカスタマイズ出来ないようになっています。

margin-right: .2em; /*ソーシャルボタン同士の間隔*/

恐らくいじる必要は全くないでしょう。

 

なぜこれを紹介したのか動機を疑うレベル。

最後に

お騒がせしました。

お決まりのブックマークボタンは自粛します。

ではまた。