ブログカスタマイズの雑談BLOG

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」では、トップページの記事タイトルには下線が入るようになっています。
薄くてわかりにくいかもしれませんが、灰色の点線が付けられています。


デフォルトの場合



ちょっと見えにくい画像なんですが、記事タイトルの下に薄い点線が入っていますよね？
あ、記事タイトルの下の黒い下線ではありませんからね。
黒い線の下に、点線が右端まで入っています。
まあ、この画像を見て私が言いたいことはおわかりだと思いますが、このようにタイトル下の黒い下線と重なってしまって、せっかくの点線が役に立っていないわけです。



そもそも、私が以前の記事＜■リンクの設定を変更する（文字色の変更など）＞で「リンク部分には下線を付ける」と設定したので、このように記事タイトルの下に黒い下線が付いてしまっているわけです。
ちょっと邪魔ですね。



ということで以下、タイトル部分の下線（リンク設定に付けていた下線）を削除し、目立たない点線（右端まで続いている点線）を強調したいと思います。
ついでに、記事タイトル部分をもっと余裕があるように余白を設定します。
編集後のイメージはこんな感じです。


編集後のイメージ

トップページの記事タイトル部分の設定（「entry__title」を編集）

これから説明するカスタマイズは、あくまでもトップページの記事に対するカスタマイズであり、記事ページには無関係です。


つまり、今回記事タイトルを調整したからといって記事ページのタイトルも同時に調整されるわけではありません。
記事ページのタイトルに関する調整は別の記事＜■【Seesaaブログ新デザインシステム】記事ページのタイトルと日付の間や行間を設定する＞で説明します。



では、CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「entry__title」というclassを探します。
テンプレートがデフォルトのままだと510行目ぐらいにあります。



CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞



＜編集後＞


●コメントアウトで見出し「/*** トップページの個別記事タイトル ***/」を付けました。
●タイトルの下に付けられていた線の色を、薄くてよくわからない灰色から青色（#4E667D）に変更しました。
●タイトル部分に余白「padding-bottom」「margin-bottom」を設定して、少し余裕を持たせました。


●「line-height: 1.8em;」について
デフォルトの設定のままだと行間（line-height）は「1.8」です。（「body」で設定済み）
でも、以前の記事＜■トップページの記事を線で囲んで境目をわかりやすくする＞の中でトップページ「.entry 」を編集した時に、私は「line-height: 1.5em;」に変更しました。この設定がトップページの記事タイトルでも有効になっています。
記事タイトルに余裕を持たせたいため、改めて「.entry__title」の中で「line-height: 1.8em;」を設定しています。記事を点線で囲まなかった方（以前の記事の設定をしなかった方）はこの記述をする必要はありません。





●「text-decoration: none;」について
記事タイトルはリンク設定されています。
トップページの記事タイトルなので、タイトルをクリックすると記事ページに飛ぶようにリンクが設定されているわけです。
私は下線を入れたくなかったので「.entry__title a」内で「text-decoration: none;」と設定しています。下線が欲しい人はこの記述を外してください。
記事タイトルに下線が出ていたのは、以前書いた記事＜■リンクの設定を変更する（文字色の変更など）＞でリンク設定に下線を入れるように変更したからです。デフォルトのテンプレートでは下線は入りません。

コード編集後のCSS（entry__title）と実際のページ

コードの編集後は、こんな感じになります。
タイトル部分に余白ができたので、ちょっと余裕な感じですね。




次の記事の紹介

次の記事では、Seesaaブログの日付・タグの文字色を変更する方法を説明します。