Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】記事ページのタイトルと日付の間や行…

【Seesaaブログ新デザインシステム】記事ページのタイトルと日付の間や行間を設定する

Seesaaブログ新デザインシステムの記事ページのタイトルと日付の間や行間を設定する
■記事ページのタイトルと日付の間の余白を調整
■記事ページの行間を設定
■「article__heading」「article__title」「article__content」を編集  

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」は、デフォルトの状態だと、記事ページのタイトルと日付の間が少し狭いような気がします。



「気がします」と書いているように完全に感覚で発言しているんですけど、ま、そう思ってしまったのですから仕方がないですね。気にならない方は、スルーしてかまわない内容です。
ついでにと言っては何ですが、記事ページの行間も調整しておこうと思います。





記事ページの記事タイトルと日付の間の余白を調整する


個別記事ページを見てみると、タイトルと日付の間が狭い気がしますので、広くしたいと思います。
あと、記事タイトルの下に入っている点線(下線)の色が薄いのでよくわかりません。
もったいないので、ちゃんと色を付けてあげたいと思います。


記事タイトルと日付の間



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「article__heading」というclassを探します。
CSSの該当部分に下記「編集後」のコードをコピペまたは直接変更して、「保存」します。


<元コード>
.article__heading {
margin-bottom: 30px;
}

.article__title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px dotted #ccc;
}

.article__title a {
color: #333;
}


<編集後>
/*** 個別記事のタイトル・日付部分 ***/
.article__heading {
margin-bottom: 20px; /* 記事本文との間 */
}

.article__title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px dotted #4E667D;
padding-bottom: 5px; /* タイトルと下線の間 */
margin-bottom: 5px; /* 下線と日付の間 */
}

.article__title a {
color: #333;
text-decoration: none;
}


●コメントアウトで見出し「/*** 個別記事のタイトル・日付部分 ***/」等を付けています。
●「.article__heading」では記事タイトルと本文との間の余白を設定しています。
●個別記事のタイトル部分「.article__title」の余白を追加しました。(コメントアウトでどの部分の余白なのか説明しています)
●タイトル下に入る点線の色を青色に変更しています。(外枠の点線と同じ色にしました)


●「.article__title」は記事タイトル部分のclassですが、個別記事ページだけではなく他の場所でも使われるclassです。私はタイトル部分にリンク設定されている場合は下線を表示させたくないので、念のためにここで下線をはずしておきます。(text-decoration: none;)



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


個別記事のタイトル部分のスタイルシート

実際の日付部分



記事ページの行間を変更する


次に、個別記事ページの行間を変更します。
Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」は、行間の設定をしなければ(つまりデフォルトの場合)、「body」に入っている「line-height:1.8em」が有効です。
文章の行間があまり大きいとイヤなので、ちょっと狭くします。



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「article__content」というclassを探します。
CSSの該当部分に下記「編集後」のコードをコピペまたは直接変更して、「保存」します。


<元コード>
.article__content {
margin-bottom: 30px;
}


<編集後>
/*** 個別記事の本文 ***/
.article__content {
margin-bottom: 10px;
padding: 0px 5px;
line-height: 1.5em;
/* 個別記事の行間 */
}


●コメントアウトで見出しを付けています。
●記事本文の内側に余白を設定しました。(上下0、左右5px)
●行間を「1.5em」に変更しました。


●「margin-bottom」で記事本文の下の余白を設定していますが、これは記事の最終段落と「posted by」との間の余白のことです。
元々30pxで設定されていましたが、「posted by」設定変更の時に「上余白50px」と記述するつもりなので、ここでは余白をとりあえず10pxにしています。

実はこの余白部分は数値が50pxまでは無効になります。たぶん「posted by」の余白設定のせいだと思うんですが(上下のマージンが競合する場合、大きい方のマージンが有効になるから)、見た目は別に何の問題もないので、このままいきます。



コード編集後のCSS(article__content)


コード編集後のスタイルシート




次の記事の紹介

次の記事では、Seesaaブログの「posted by」「Twitterマーク」の余白を調整する方法を説明します。


【Seesaaブログ新デザインシステム】記事ページの「posted by」「Twitterマーク」の余白を調整
以前の記事で、ブログの個別記事ページの記事部分を点線で囲むように設定しました。紹介した記事のように設定すると記事ページを点線で囲むことができますが、現時点の記事ページは、記事コンテンツの下部に余白が入ったままなので‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。