Home > FC2ブログ > basic_white > basic_whiteテンプレート グリッド記事を3列・4列表示にする方法

basic_whiteテンプレート グリッド記事を3列・4列表示にする方法

 basic_whiteテンプレートのグリッド表示を2列から3列または4列にする方法です。狭まった各記事の横幅に合わせてスタイルを調整して表示します。

 デフォルトでは冒頭文が非表示ですが、2行だけ表示するといった事も可能です。

変更手順…最初に行うこと

1:HTML

 場所はCtrl+Fキーで『img_none』を検索。

<!--body_img_none--><div class="entry_none"><%topentry_discription><%topentry_desc></div><!--/body_img_none-->

 「<!--body_img_none-->」の直後に「<div class="entry_none">」を。「<!--/body_img_none-->」の直前に「</div>」を入れます。

テンプレートの利用時期によっては「discription」が「description」になっている場合がありますが、追加するコードは変わりません。

2:スタイルシート

 スタイルシートに以下のコードを追加してください。

※他のカスタマイズで「1ヶ月広告を適正に表示」の3行が既に追加されている場合は「1ヶ月広告を適正に表示」の3行は不要です。

3:スタイルシート

 変更場所はCtrl+Fキーで『* entry_date』を検索。該当部分を次のように変更してください。

/* entry_date */
#main_contents .entry_date {
  float: left;
  width: auto;
  margin: 0 0 10px 10px;
  text-align: left;
}
#main_contents .grid_content .entry_date,
#main_contents .grid_content .entry_state {
  font-size: 75%;
}

#main_contents .entry_date li {
  display: inline;
  margin-right: 0.5em;
}
#main_contents .entry_date li:last-child { margin-right: 0;}

/* entry_state */
#main_contents .entry_state {
  float: right;
  overflow: hidden;
  width: auto;
  margin: 0 10px 10px 0;
  text-align: right;
}

4:スタイルシート

 変更場所はCtrl+Fキーで『* grid_content』を検索。該当部分を次のように変更してください。

/* grid_content
--------------------------- */
#main_contents .grid_content {
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  margin-bottom: 13px;
  width: 33%;
  height: 335px; /* グリッド表示の時の記事の高さ */
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}
#main_contents .grid_content:nth-child(3n+1) {width: 34%;}

#main_contents .grid_content .fc2blomaga_buy_area {
  display:none;
}
#main_contents .grid_content .entry_body {
  overflow: hidden;
  height: auto;
}

5:スタイルシート

 変更場所はCtrl+Fキーで『grid_content .entry_body .entry_image』を検索。該当部分を次のように変更してください。

#main_contents .grid_content .entry_body .entry_image img {
  max-width: 98%; /* グリッド表示の時のサムネイルの幅の上限 */
  max-height: 180px;
}

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
  margin: 15px 0 0; /* ↑の.entry_image imgのmax-widthを... */
  height: 3em;
  line-height: 1.5;
  overflow: hidden;
  font-size: 83%;
  display: none;

}
#main_contents #e, body #main_contents .p_area {
  float: none;
  width: 100%;
  min-height: 110px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border-left: none;
  border-right: none;
}

「#e」の部分は他のカスタマイズで既に変更されている場合があります。テンプレートの利用時期によっては「~entry_description,」の行がない場合もありますが、変更部分に変わりはありません。

6:スタイルシート

 変更場所はCtrl+Fキーで『grid_content:first-child』を検索。該当部分を次のように変更してください。

#main_contents #e .entry_image img, #main_contents .p_area .entry_image img {
  max-width: 200px; /* グリッド表示の時の最初の記事のサムネイルの幅の上限 */
  max-height: 220px;
}

#main_contents #e .entry_description,
#main_contents #e .entry_discription {
  margin-left: 238px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
  min-height: 228px;
}

「#e」の部分は他のカスタマイズで既に変更されている場合があります。テンプレートの利用時期によっては「~entry_description,」の行がない場合もあります。

7:スタイルシート

 変更場所はCtrl+Fキーで『h2.entry_header,』を検索。該当部分を次のように変更してください。

#main_contents h2.entry_header,
body #main #main_contents .p_area .entry_header,
#main_contents h2.sub_header {
  margin: 0 0 15px;
  padding: 5px 0 5px 35px;
  background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 20px 5px; /* 記事タイトル前のアイコン */
}

 変更場所はCtrl+Fキーで『記事日付』を検索。該当部分を次のように変更してください。

#main #main_contents .p_area .entry_date /* 記事日付 */ ,
#main #main_contents .p_area .entry_state /* CM数,TB数,カテゴリ等 */ { font-size: 85%; /* 14px */ }


 以上で3列表示は完成です。

3列を4列表示にする

※小さいノートパソコンだと各記事がかなり狭くなります。

スタイルシート

 変更場所はCtrl+Fキーで『* grid_content』を検索。変更手順【4:スタイルシート】で変更したwidth部分を25%に書き換え、「#main_contents .grid_content:nth-child(3n+1) {width: 34%;}」の行を削除します。

/* grid_content
--------------------------- */
#main_contents .grid_content {
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  margin-bottom: 13px;
  width: 25%;
  height: 335px; /* グリッド表示の時の記事の高さ */
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}


#main_contents .grid_content .fc2blomaga_buy_area {
  display:none;
}
#main_contents .grid_content .entry_body {
  overflow: hidden;
  height: auto;
}

 以上で完成です。

 4列表示はかなり幅が狭まるので記事タイトルの文字サイズを「71%」くらいまで小さくした方が見やすいかもしれません。変更場所は追加した「複数列表示用スタイル」の77%の部分です。

main #main_contents .grid_content .entry_header a{
  font-size: 71%; /* 記事タイトルサイズ */

最小の全体幅を指定する

 3列以上表示するとウインドウを狭めた時に記事が圧迫されてしまうので最小の全体幅を「150px」程度増やしておいてもいいでしょう。

 変更場所はCtrl+Fキーで『min-width:』を検索。それぞれを書き換えます。

#container { min-width: 950px; }
#headermenu , #wrap ,
#footer_plg , #footer_inner {
  min-width: 950px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 952? "950px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
}

#header h1,
#header p {
  min-width: 935px;
  max-width: 1185px;
  width:expression(document.body.clientWidth < 952? "950px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
  margin: 0 auto;
}

サイドバーの横幅を狭くする

 少しでもグリッド部分の面積を広げたい時はサイドバーの横幅を狭くしましょう。

 変更場所はCtrl+Fキーで『#main {』を検索。該当する数値部分をすべて同じ数だけ減らします。以下は30px減らしています。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -310px;
  text-align: left;
}

#main_contents {
  margin: -36px 310px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}

#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 290px; /* サイドメニューの幅 */
  padding-top: 35px;
}

高さ調整…記事タイトルが短い場合

 記事タイトルが短い場合は高さを少し削った方が見栄えがいいかもしれません。

 変更場所はCtrl+Fキーで『* grid_content』を検索。335pxの数値を適当に減らします。

/* grid_content
--------------------------- */
#main_contents .grid_content {
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  margin-bottom: 13px;
  width: 33%;
  height: 310px; /* グリッド表示の時の記事の高さ */
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}

冒頭文を画像の下に2行表示する

1:スタイルシート

 変更場所はCtrl+Fキーで『* grid_content』を検索。高さを350pxに変更。

/* grid_content
--------------------------- */
#main_contents .grid_content {
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  margin-bottom: 13px;
  width: 33%;
  height: 350px; /* グリッド表示の時の記事の高さ */
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}

2:スタイルシート

 変更場所はCtrl+Fキーで『grid_content .entry_body .entry_image』を検索。max-heightを160pxに変更、noneをblockに変更。

main_contents .grid_content .entry_body .entry_image img {
  max-width: 98%; /* グリッド表示の時のサムネイルの幅の上限 */
  max-height: 160px;
}

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
  margin: 15px 0 0; /* ↑の.entry_image imgのmax-widthを... */
  height: 3em;
  line-height: 1.5;
  overflow: hidden;
  font-size: 83%;
  display: block;
}

テンプレートの利用時期によっては「~entry_description,」の行がない場合もあります。

最初の記事のみリスト表示にする

スタイルシート

 変更場所はCtrl+Fキーで『#main_contents .p_area {』を検索。以下の部分を追加。

#main_contents #e, body #main_contents .p_area, #main_contents .grid_content:first-child {
  float: none;
  width: 100%;
  min-height: 110px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border-left: none;
  border-right: none;
}
/* 複数列 最初の記事をリスト表示 */
body #main_contents .entry_body .entry_image {
  float: left;
}
#main_contents .grid_content:first-child .entry_body .entry_image img {
  max-width: 250px; /* サムネイル幅の上限 */
  max-height: 180px; /* 高さの上限 */
}
#main_contents .grid_content:first-child .entry_body .entry_description,
#main_contents .grid_content:first-child .entry_body .entry_discription{
  margin-left: 280px; /* サムネイル幅の上限+30 */
  display: block;
}
#main #main_contents .grid_content:first-child {
  height: auto; min-height: 1px;
}
.entry_body:after {content:'.';visibility:hidden;display:block;clear:both; height:1px;overflow:hidden;}
.grid_content:first-child .entry_description + *,
.grid_content:first-child .entry_discription + * {clear: both;}
/* END */

記事タイトルを1行のみ表示する

 初期状態のように記事タイトルを1行のみ表示する場合は追加した複数列表示用スタイルにある以下の強調部分3行(height~normal;)を削除してください。

#main #main_contents .grid_content .entry_header a {
  font-size: 77%; /* 記事タイトルサイズ */
  color: #003366; /* 文字色 */
  height: auto;
  overflow: visible;
  white-space: normal;

}

 2行のみ表示する場合は上記3行を以下4行に変更してください。

#main #main_contents .grid_content .entry_header a {
  font-size: 77%; /* 記事タイトルサイズ */
  color: #003366; /* 文字色 */
  line-height: 1.4;
  height: 2.8em;
  overflow: hidden;
  white-space: normal;

}

履歴

  • 2014-07-11…14/05/26に更新されたテンプレートに対応
  • 2013-12-26…変更手順を更新
    【2:スタイルシート】
    「#main #main_contents .p_area:nth-child(3n+1){width: auto;}」追加
    「#main #main_contents .p_area .entry_body {margin: 0 20px;}」追加
    「#main_contents .p_area .entry_date {margin: 0 0 20px 10px;}」追加
    「#main_contents .p_area .entry_state {margin: 0 20px 10px 0;}」追加
    【5:スタイルシート】
    「body 」「margin-bottom: 0;」の項目追加
    【7:スタイルシート】を新たに追加
関連記事
スポンサー リンク
コメント
#104 : No title
may様、こんばんわ。

複数列表示の質問をした者です。
こちらの記事通りに変更したおかげで、簡単に3列表示ができました。
どうもありがとうございます。

ところで、デフォルトでは、グリッド表示の場合でも最初の記事だけはリスト表示のように横長表示されていたと思いますが、これを3列表示の場合にも残すことは可能でしょうか?
インパクトが強いので、最初の記事だけは横長表示にしたいと思ってます。

あと、サムネイル下にカテゴリやユーザータグのリストを表示させることはできますでしょうか?

お忙しいところ恐れりますが、こちらのカスタマイズ方法を教えていただければ幸いです。
どうぞ宜しくお願いいたします。

では。
#112 : 最初の記事だけリスト表示
コンバンハ。
このページに最初の記事のみリスト表示にする方法を掲載致しました。
カテゴリやタグは設置済みかと思われますが、body_img_noneの後にでも適当なコードを追加してくださいませ。
<div class="entry_category">
<!--parent_category-->
<a href="<%topentry_parent_category_link>"><%topentry_parent_category></a> :
<!--/parent_category-->
<a href="<%topentry_category_link>"><%topentry_category></a>
</div>
<!--topentry_tag--><div class="entry_tag"><!--tag_list-->
<a href="./?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a>
<!--/tag_list--></div><!--/topentry_tag-->
細かなデザインまではサポートできないのでCSS解説サイトなどをご参考ください。

<%topentry_image>をリンクで挟むと個別ページに移動できます。
<a href="<%topentry_link>"><%topentry_image></a>

「外部のリンク先へ飛ばす場合のグリッド上のサムネイル」はどういう状態なのかを想定できませんでした。

大変恐縮ではございますが、あちらは関連記事の表示位置に関する記事のコメントフォームになりますので、コメントの際は該当する記事の場所にお願い致します。
#122 : サムネイルにリンク
ここに質問していいのか悩んだのですが、グリッド表示で表示されるサムネイル画像にリンクを貼ることは可能でしょうか?

可能であればやり方を紹介していただけると助かります。

よろしくお願いします。
#123 : Re: サムネイルにリンク
コンバンハ。
この一つ上のコメント#112にも掲載してありますが、<%topentry_image>をリンクで挟むと個別ページに移動できます。
<a href="<%topentry_link>"><%topentry_image></a>

サムネイルリンク化に関する記事をURLリンク先に別途作成いたしましたのでそちらもご参考くださいませ。
#124 : No title
早速のご返答ありがとうございます^^

参考にして実施させていただきます。
#154 : No title
mayさん、こんばんわ。
カスタマイズ記事、いつも参考にさせていただいてます。

こちらの記事を参考にグリッドレイアウトを3・4列表示させてチョット問題が生じたので質問させてください。

この記事通りにカスタマイズして、無事に3列4列表示をすることができたんですが、XPなどの古いOSで表示を確認すると、個別記事内に設置したブログパーツ(RSSやバナーなど)がスペースをはみ出してしまって困ってます。

一応、こちらの記事を参考に、最小の全体幅を950に増やしてみたり、サイドバーの横幅を250に減らしたりしてみたのですが、やはりはみ出したままです。

個別記事内のブログパーツをキッチリとスペース内に収めるにはどうすればよいか、教えていただけないでしょうか?
よろしくお願いいたします。
#161 : ブログパーツのはみ出し
コンバンハ。
ブログパーツをどのように設置しているかがわからないため、申し訳ございませんが、古いブラウザでもはみ出ないように設置してくださいとしか答えられません。
単純に横幅が足りていない場合は並んでいる各ブログパーツを改行して(縦に並べて)表示させるか、表示しきれないパーツの設置位置を変更するなどの対応になります。

次のような具体的な状態が判明すればわかるかもしれませんが、ブログパーツ部分の構造(HTML,cssコード)にもよるので実際に見てみないことにはアドバイスできそうにありません。
・個別記事内とはトップページではなく個別記事ページ(blog-entry-no.html)で発生する現象なのか
・グリッドレイアウトを3・4列表示させない場合はみ出ないのか
・個別記事内のどこに設置しているのか(HTML上の設置場所)
・どのようにはみ出ているか(ラインの下にはみ出る=高さが足りない、右にはみ出る=横幅が足りないなど)
#193 : タイトル数の設定
3列表示に設定した際に、トップページで記事タイトルの表示される文字数を設定できれば嬉しいのですが可能でしょうか?


記事タイトル
今日の晩御飯は美味しいオムライスにしました。

メインページで表示される記事タイトル
今日の晩御飯は美味しい・・・

よろしくお願いします。
#198 : Re: タイトル数の設定
コンバンハ。
グリッドのみ文字数を削るとなるとリスト表示用との兼ね合いで少し手間がかかるので、後で検討してみます。
代替となるかはわかりませんが、このページに初期状態のように記事タイトルを1~2行表示する方法を追加いたしました。
#200 : No title
早速の対応ありがとうございました。
#343 : グリッド表示の際に記事同士の隙間を空ける方法
はじめまして。わかりやすく記載がされておりカンタンに4列表示にすることができました。

そこで1つ質問でございますが、4列表示をしたさいに記事同士の隙間を少し開けることはできますでしょうか?

といいますのも今は4列横に数珠つなぎでつながっているような状態になっており
それらをすべて独立したような形で表示したいのです。

もし方法がお分かりになりましたら教えていただけますと幸いでございます。

よろしくお願いいたします。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered