Home > FC2ブログ > basic_white > basic_whiteテンプレート グリッド表示の最初の記事を狭めて並べる

basic_whiteテンプレート グリッド表示の最初の記事を狭めて並べる

 basic_whiteテンプレートのグリッド表示の最初の記事を他の記事と同じ大きさにして並べる方法です。

 1ヶ月更新しないと表示されるFC2側の広告は通常のリスト表示(適正な表示)になるよう調整済みです。

1:スタイルシート

 場所はCtrl+Fキーで『.grid_content:first-child』を検索。

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

 上記を以下に変更…「.grid_content:first-child」を「#e」に変更。

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

 同じようにして他二ヶ所も変更します。

#main_contents .grid_content:first-child .entry_image img, #main_contents .p_area .entry_image img {

↓変更

#main_contents #e .entry_image img, #main_contents .p_area .entry_image img {

#main_contents .grid_content:first-child .entry_description,
#main_contents .grid_content:first-child .entry_discription {

↓変更

#main_contents #e .entry_description,
#main_contents #e .entry_discription {

テンプレートの利用時期によっては1行目の部分(~entry_description,)がない場合があります。その場合は変更後の1行目も不要です。

 2013年10月8日以前にテンプレートをダウンロードした方(またはブログを開設)は以下のコードを削除してください。スタイルシートにこのコードがなければOKです。『.antry_body』で検索。

#main_contents .grid_content:first-child .entry_body, #main_contents .p_area .antry_body {
  height: auto;
}

2:スタイルシート

 以下のコードをスタイルシートに追加します。

/* 1ヶ月広告を適正に表示 */
#main #main_contents #e,#main #main_contents #e .entry_body,
#main #main_contents .p_area .entry_body { height: auto; }
#main #main_contents .p_area + .grid_content {height: auto;}

 以上で完成です。

補足:グリッド表示の記事タイトルを全文表示を利用している場合のみ

 グリッド表示の記事タイトルを全文表示のコードを追加された方は以下の変更を加えてください。
 次のコードがある場合は「 + .grid_content」を削除します。

#main_contents .grid_content + .grid_content .entry_header a {

↓削除

#main_contents .grid_content .entry_header a {

#main_contents .grid_content + .grid_content .entry_body {

↓削除

#main_contents .grid_content .entry_body {

 以下のコードは削除します。このページの【2:スタイルシート】で追加した「1ヶ月広告を適正に表示」が同じ役目を果たします。

#main #main_contents .p_area .entry_body,
#main #main_contents .p_area + .grid_content {height: auto;}

記事表示件数の設定

 1ページに偶数件の記事が表示されるように数値を適当に調整してください。
 環境設定→ブログの設定→記事の設定

関連記事
スポンサー リンク
コメント
#93 : グリッド表示で横に2列以上表示する方法
初めまして。

検索で飛んできた者です。
大変参考になる記事、どうもありがとうございます。

早速ですが、グリッド表示について質問させてください。

現状、グリッド表示を選択した場合、最初の記事を除き、各記事が横2列で表示されると思いますが、これを横3列ないし4列にして表示させることは可能でしょうか?

当方、ブログの記事数が多くなってきたこともあり、できれば1ページに20~30記事程度表示させたいと考えているんですが、横2列表示だと少なくとも縦に10列必要となり、縦長になってしまいます。

そこで、横2列で表示されるグリッドレイアウトを3列ないし4列にして表示できればと考えています。

お忙しいところ恐れ入りますが、対処法等を教えていただければと思います。

それでは。
#94 : Re: グリッド表示で横に2列以上表示する方法
コンバンハ。
列を増やすと一つ一つの横幅が狭まるので
(1)一行表示の記事タイトルをどうするか
(2)横に並んで表示される画像と冒頭テキストの位置関係をどうするか
などの点によって対処も変わってきますが、とりあえず3列にするだけであればスタイルシートにある「width: 50%;」の部分を「width: 33%;」に変更すれば3列になります。
4列の場合は25%です。

URL先にサンプルとして3列表示のページを作成してみました。
7段の21件、タイトルすべて表示+画像+改行+冒頭テキスト2行表示です。
2013/08/23は画像なしの場合。
#96 : サンプルのような作り方
#93の質問をした者です。

早速の回答、どうもありがとうございました。
ご指示通りwidthの値をいじると簡単に3列・4列にできました。

ただ、できればmayさんの作られたサンプルのようになイイ感じにしたいです。

そこで、記事タイトルの全文表示及びフォントサイズ、日付とコメントの同列表示、サムネイルのセンタリング方法などを教えていただければ幸いです。

また、サムネイル下の記事本文を非表示にしたい場合はどうすればよいでしょうか?

お忙しいところ恐れ入りますが、どうぞ宜しくお願いいたします。
#100 : Re: サンプルのような作り方
コンバンハ。
お待たせしました。
グリッド記事を3列または4列表示にする方法を記事に致しましたのでURL先をご参考ください。
不具合などございましたらURL先のコメントにてお知らせくださいませ。
#102 : No title
may様、こんばんわ。
#93・#96です。

待ってました(笑)。
今からゆっくり記事の方を拝見して、カスタマイズしていきたいと思います。

年末でお忙しいところ、どうもありがとうございました。

では。
#103 : 不備
コンバンハ。
申し訳ございません。
大事なコードが1行抜けていました。
これがないと3列表示の際に個別記事が狭くなってしまいます。
4列表示の場合は必要ありません。

【2:スタイルシート】の複数列表示用スタイルの中に以下を追加してください。
#main #main_contents .p_area:nth-child(3n+1){width: auto;}

記事の方は修正済みですので再度コピー&上書き貼り付けでもOKです。
お手数おかけします。
その他、微調整した部分についてはページ最下部の履歴に掲載しております。
更新時刻以前に記事を参考にした場合は必要であればご確認くださいませ。

コメントの投稿

  

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

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

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

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

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

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