【Seesaaブログ新デザインシステム】トップページの記事タイトルを調整する|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。右カラム」では、トップページの記事タイトルには下線が入るようになっています。薄くてわかりにくいかもしれませんが、灰色の点線が付けられています。デフォルトの場合ちょっと見えにくい画像なんですが、記事タイトルの下に薄い点線が入っていますよね?あ、記事タイトルの下の黒い下線ではありませんからね。黒い線の下に、点線が右端まで入っています。この画像を見て私が言いたいことはおわかりだと思いますが、このようにタイトル下の黒い下線と重なってしまって、せっかくの点線が役に立っていないわけです。そもそも、私が以前の記事<■リンクの設定を変更する(文字色の変更など)>で「リンク部分には下線を付ける」と設定したので、このように記事タイトルの下に黒い下線が付いてしまっているわけです。いうことで以下、タイトル部分の下線(リンク設定に付けていた下線)を削除し、目立たない点線(右端まで続いている点線)を強調したいと思います。ついでに、記事タイトル部分をもっと余裕があるように余白を設定します。編集後のイメージはこんな感じです。編集後のイメージトップページの記事タイトル部分の設定(「entry__title」を編集)これから説明するカスタマイズは、あくまでもトップページの記事に対するカスタマイズであり、記事ページには無関係です。今回記事タイトルを調整したからといって記事ページのタイトルも同時に調整されるわけではありません。記事ページのタイトルに関する調整は別の記事<■【Seesaaブログ新デザインシステム】記事ページのタイトルと日付の間や行間を設定する>で説明します。CSS(スタイルシート)を編集します。管理画面の「スタイルシート編集」画面で「entry__title」というclassを探します。テンプレートがデフォルトのままだと510行目ぐらいにあります。CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。***/」を付けました。●タイトルの下に付けられていた線の色を、薄くてよくわからない灰色から青色(#4E667D)に変更しました。●タイトル部分に余白「padding-bottom」「margin-bottom」を設定して、少し余裕を持たせました。1.8em;」についてデフォルトの設定のままだと行間(line-height)は「1.8」です。1.5em;」に変更しました。この設定がトップページの記事タイトルでも有効になっています。1.8em;」を設定しています。記事を点線で囲まなかった方(以前の記事の設定をしなかった方)はこの記述をする必要はありません。1.8em;」に設定すると書いていますが、記事タイトルが2行や3行になった場合、行間が1.8emだとかなり広くなってしまいます。1.5em;」に変更したので追記しておきます。」で改めて1.8に設定したわけです。1.8em;」の記述そのものを削除してもかまいませんし、「1.8」の部分だけを「1.5」に変更してもかまいません。どちらでも大丈夫だと思います。(私自身は数値を1.5に変更しただけです)記事タイトルが長くならなければ何も問題はありません。お好きなようにどうぞ。none;」について記事タイトルはリンク設定されています。トップページの記事タイトルなので、タイトルをクリックすると記事ページに飛ぶようにリンクが設定されているわけです。none;」と設定しています。下線が欲しい人はこの記述を外してください。記事タイトルに下線が出ていたのは、以前書いた記事<■リンクの設定を変更する(文字色の変更など)>でリンク設定に下線を入れるように変更したからです。デフォルトのテンプレートでは下線は入りません。コード編集後のCSS(entry__title)と実際のページコードの編集後は、こんな感じになります。タイトル部分に余白ができたので、ちょっと余裕な感じですね。次の記事では、Seesaaブログの日付・タグの文字色を変更する方法を説明します。右カラム」では、トップページの記事タイトルの下に日付が表示されていますが、もはや薄すぎて何と書いてあるのかわかりません。[必須入力]※画像の中の文字を半角で入力してください。