Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】記事ページの「関連記事」(3)サム…

【Seesaaブログ新デザインシステム】記事ページの「関連記事」(3)サムネイルを左端から表示して画像サイズを変更

Seesaaブログ新デザインシステムの記事ページの「関連記事」を編集
■Seesaaブログの記事ページの下に表示される「関連記事」を編集
■サムネイル画像を左端から表示させる
■関連記事の上余白、関連記事タイトル、サムネイル画像下の文字サイズ、サムネイル画像サイズを変更  

記事ページ下に表示される関連記事を編集します。
関連記事に関するカスタマイズとしては3つ目になるので、この記事のタイトルには「(3)」と番号を振っていますが、この記事と次の記事「(4)」は同じことをやります。





(3)も(4)も、関連記事のサムネイル画像の表示に関する記事です。
この記事(3)ではサムネイル画像を左端から表示させます。
次の記事(4)では、タイトル部分よりも内側からサムネイル画像を表示させます。


どちらのやり方をしても大丈夫です。問題なく表示できます。
ただし、私自身は(4)の「内側から表示」を採用していますので、以降の記事で関連記事に関するものが出てきた場合、(3)の「左端から表示」については蔑ろにする可能性がありますw



まずは、2つのパターンにどのような違いがあるのかを確認してください。
どちらのパターンでカスタマイズするのか、好きな方でどうぞ。


サムネイルを左端から表示させる(記事3)
サムネイルを左端から表示させた場合の関連記事部分


サムネイルをタイトルよりも内側から表示させる(記事4)
サムネイルをタイトルよりも内側から表示させた場合の関連記事部分




では、関連記事のサムネイル画像を左端から表示する方法を説明します。
まずは、関連記事部分の上に余白を付けて、タイトル表記を左寄せにします。
続いてサムネイル画像下の文字サイズを少し小さくして、サムネイル画像の上下間隔を少し広くします。
その後、サムネイル画像のサイズを調整して、メインコンテンツの幅いっぱいに画像が表示されるようにしたいと思います。





関連記事の上余白を設定して、タイトル部分を編集する


まずは、関連記事の位置と関連記事タイトル部分を調整します。
余白を作り、タイトルを左寄せ表示にします。


このブログでは基本的に、メインコンテンツのパーツ同士の余白は100pxに設定しようと思っています。
なので、関連記事の上に100pxの余白を作って、「前ページ・次ページ案内リンク」との間隔を設定します。(もちろん、好きなように数値を変更してください)



ちなみに、「パーツの上に余白100pxを付ける」というやり方でパーツ同士の間隔を調整するつもりなので、関連記事の下(関連記事全体の下)には余白を設定しません。関連記事と、その下にあるパーツ「コメント欄」との距離(余白)は、「コメント欄」の上に余白100pxを付けることで調整します。


ということで、今回は、下の画像の赤い矢印部分を調整します。
関連記事(画像内の赤い枠線で囲んでいる部分が、関連記事のタイトルです)の上に、100pxの余白(赤い矢印部分)を作ります。


関連記事部分の編集する箇所



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「module--category-recent-entry」というclassを探します。



下記に「元コード」と「編集後」のコードを掲載しておきます。
CSSの該当部分に「編集後」のコードをコピペ又は該当箇所を直接変更して「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


<元コード>
.module--category-recent-entry {
margin-bottom: 60px;
}

.module--category-recent-entry .module__heading {
margin-bottom: 10px;
}


<編集後>
/*** 個別記事の下(関連記事)
*****************************************************/

.module--category-recent-entry { /* 外枠 */
margin-top: 100px;
margin-bottom: 0px;
}

.module--category-recent-entry .module__heading { /* タイトル */
text-align: left;
padding: 3px 15px;

}


●コメントアウトで見出しを付けています。

●上記で説明したように、class「.module--category-recent-entry」で、関連記事の上にある「前ページ・次ページ案内リンク」との間隔を設定します。上余白100pxを設定しました。(margin-top: 100px;)

●関連記事の下にある「コメント欄」に上余白100xを設定するつもりなので、関連記事の下に余白は必要ありません。「margin-bottom」は0pxにしています。
ちなみに、コメント欄での編集記事はこちらです。→<■記事ページのコメント欄に上余白を設定し、「コメントを書く」ボタンを作る



●「.module--category-recent-entry .module__heading」
「.module--category-recent-entry .module__heading」という記述には2つのclassが同時設定されています。このうち「module__heading」は、サイドバータイトルで設定していました。

<サイドバータイトルで設定している「module__heading」>
/*** サイドバータイトル ***/
.module__heading {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:center;
margin-bottom: 15px;
padding:3px 0px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}


この「module__heading」の設定が生きていますので、「module__heading」の設定から変更する部分だけを記述しました。
つまり、サイドバーのタイトル表示と基本は同じなんだけど、この関連記事のタイトルは文字は左寄せ(text-align: left;)にして、内側に余白を追加した(padding: 3px 15px;)、という記述です。



コード編集後のCSS


編集後の関連記事部分のスタイルシート



関連記事のサムネイル画像下の文字サイズを編集する


次に、サムネイル画像下の文字サイズを少し小さくします。
必要ない方はこの作業をする必要はありません。


関連記事のサムネイル部分の文字サイズ



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「.module--category-recent-entry .recent-entry__item p」というclassを探して編集します。


<元コード>
.module--category-recent-entry .recent-entry__item p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}


<編集後>
.module--category-recent-entry .recent-entry__item p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size:85%;
}


●「font-size:85%;」を追加して、文字サイズを通常よりも少し小さめにしています。



コード編集後のCSS


編集後の関連記事文字部分のスタイルシート



関連記事のサムネイル画像の上下間隔を編集する


関連する記事が2行、3行となった場合(関連記事の表示件数を増やした場合)、サムネイル画像の上下の間隔が少し狭いような気がしますので、ちょっと広めに設定します。


関連記事のサムネイル部分の行間



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「.module--category-recent-entry .recent-entry__item」というclassを探して編集します。


<元コード>
.module--category-recent-entry .recent-entry__item {
display: inline-block;
margin-right: 10px;
margin-bottom: 15px;
width: 140px;
height: 140px;
}


<編集後>
.module--category-recent-entry .recent-entry__item {
display: inline-block;
margin-right: 10px;
margin-bottom: 20px;
width: 140px;
height: 140px;
}


●「margin-bottom: 15px;」を「20px」に変更しただけです。



コード編集後のCSS


関連記事のサムネイル部分の行間を編集したスタイルシート



関連記事のサムネイル画像サイズを変更する


最後に、サムネイル画像のサイズを変更します。
今は1行に4つのサムネイル画像が入っていて右側に余白ができています。(5つ目のサムネイルは1行目に入れずに2行目に表示されています)


関連記事の画像サイズ



画像のサイズを変更して調整すれば、1行に5つのサムネイル画像を入れることができ、右側の余白も気にならなくなります。


編集後の関連記事の画像サイズ



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面の「module--category-recent-entry」というclass関連の記述の中に、「140px」と書かれた島が3つあります。


関連記事のサムネイル部分のスタイルシート編集画面


140px」がサムネイル画像のサイズですので、この数値を適当に変更してください
126px」ぐらいで丁度いいのではないでしょうかね。「127px」でもいいかもしれません。
どっちでもいいですね(笑)
「140px」という数値すべて(6個すべて)を、お好きなサイズに変更してください。


逆に、1行に4つの画像を入れたい場合は、画像サイズを「140」よりも大きい数値に変更します。(私はやってないのでどれぐらいのサイズがいいのかわかりません)



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


編集後の関連記事部分の画像




次の記事の紹介

この記事では関連記事のサムネイル画像を左端から表示させる方法を説明しました。
最初に書いたように、私自身はこのやり方でブログをカスタマイズしていません。サムネイル画像の左側に余白を入れました。


次の記事では、「関連記事」のサムネイル画像をタイトルより内側から表示する方法を説明します。
どちらのやり方でも問題はありませんので、お好きな方でカスタマイズしてみてください。


【Seesaaブログ新デザインシステム】記事ページの「関連記事」(4)サムネイルをタイトルよりも内側から表示して画像サイズを変更
記事ページ下に表示される関連記事を編集します。前回の記事では関連記事のサムネイル画像を左端から表示させましたが、今回の記事(4)ではタイトル部分よりも内側からサムネイル画像を表示させます。‥‥






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

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