Home > FC2ブログ > basic_white > basic_whiteテンプレート リスト表示のレイアウト調整・変更

basic_whiteテンプレート リスト表示のレイアウト調整・変更

 リスト表示した際の広すぎる余白を調整して高さを整える方法です。

 デフォルトでは「position:absolute」で画像を絶対配置にして、高さを指定しているため、どうしても下に余計なスペースが生じます。

 この画像をフロートで配置して右側の冒頭文と続きを読むリンクを画像の右側に持っていきます。[14/05/26対応]

スタイルシートのコード

 以下のコードをスタイルシートに追加するとフロート配置になります。横幅と高さの数値を変更するとコード内に反映されます。値には半角数字を入力します。どちらも最大の大きさを指定するものなのでそれ以下のサイズの場合はその大きさで表示されます。

画像最大横幅: 画像最大高さ:
冒頭文の行数:

■サンプル

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん

続きを読む

 サンプルのオレンジ色(画像表示)部分は縦横比を無視した最大のサイズを表しています。横長の画像であれば、高さはサンプルよりも小さくなるため、厳密な意味での実寸ではありません。このブログのレイアウト上、400px以上の幅のサンプル表示は無効になります。


デフォルトのコード

 以下は元のスタイルシートにある初期設定値です。この辺りが関係するコードです。生成されたコードを使用しない場合は以下を適当に変更してください。

#main_contents .entry_body .entry_image {
  position: absolute;
  left: 20px;
}

#main_contents .entry_body .entry_image img {
  max-width: 200px; /* リスト表示の時のサムネイルの幅の上限 */
  max-height: 250px;
  border: 4px solid #FFFFFF;
  -webkit-box-shadow: 0px 1px 1px 0px #999999;
  -moz-box-shadow: 0px 1px 1px 0px #999999;
  box-shadow: 0px 1px 1px 0px #999999;
}

#main_contents .entry_body .entry_discription,#main_contents .entry_body .entry_description {
  margin-left: 238px; /* サムネイル幅を変更した場合はこちらも調整して下さい */
  min-height: 228px;
}

#main_contents .entry_body .entry_more {
  position: absolute;
  right: 20px;
  bottom: 10px;
  padding: 15px 0;
  text-align: right;
}

関連記事
スポンサー リンク
コメント
#34 : No title
管理人様

はじめまして。Google経由でお邪魔しました。私はFC2ブログのbasic_whiteを利用してブログをしているのですが、グリッド表示のことでどうしてもわからないので検索をしていました。

basic_whiteの記事一覧画面の時、リスト表示では、記事タイトルが省略されずに全文表示されますが、グリッド表示では、トップ記事以外の記事タイトルが途中で省略されてしまいます。これに困っています。

というのも、デザイン的にはグリッド表示が気に入っているので、グリッド表示を使いたいわけですが、記事タイトルが省略されると見にくいと読者さんに指摘を受けたからです。

デザインのグリッド表示はそのままに、記事タイトルの文字の大きさを小さくして、かつ自然に改行し、デザイン的にあまり崩れないような方法はないでしょうか。お手数をおかけしますが、もしよろしければご教示いただければ助かります。Google検索ではどうも限界で、あとはお詳しい方にお願いするしかないと思っております。

理想的な状態:
・デザインはbasic_whiteを使用
・グリッド表示の時、記事タイトルが省略されないようにしたい
・トップ記事以外の記事タイトルの文字を小さくして自然に改行したい
・これらの修正をしてもデザインが大きく崩れないようにしたい


以上となります。お手すきの時で構いませんので、ご教示を頂戴できましたら幸いです。


太郎
#41 : グリッド表示の記事タイトルを省略しない
コンニチハ。
URL先にグリッド表示の記事タイトルを全文表示する方法を投稿したのでそちらをご参考ください。
不具合などがございましたらあちらの記事にてご連絡くださいませ。
#105 : No title
いつもこのサイトを利用させてもらっています。
本当に助かっています。


一つ質問なんですが、トップページのコンパクトにまとめられている記事の
改行 や 文字色の変換が 反映されていなくて困っています。

それと続きを読む の 字の大きさや色を変える方法を教えてください。

お願いします><!
#106 : 冒頭文の改行、続きを読む
コンニチハ。
このテンプレートで使用されている記事冒頭文の変数はタグを無視するので色の変更や改行は表示されません。
これは仕様なのであきらめるしかありません。
どうしても表示したい場合はHTMLの以下の部分にある「<%topentry_discription><%topentry_desc>」を「<%topentry_body>」に変更すれば表示されないこともありませんが、高さが固定になるので記事が中途半端な形で切れてしまうことになると思います。
<!--body_img-->
<div class="entry_image"><%topentry_image></div>
<div class="entry_discription"><%topentry_body></div>
<!--/body_img-->
<!--body_img_none--><%topentry_body><!--/body_img_none-->

続きを読むの文字サイズや色に関しては、URL先の基本的なデザインのカスタマイズ・変更ページに掲載しておりますのでそちらをご参考くださいませ。
http://fc2blogtemplate.com/blog-entry-2.html
108%と333333の値で変更できます。
#main_contents .entry_body .entry_more /* 「続きを読む」の文字 */ { font-size: 108%; /* 17px */ }
#main_contents .entry_body .entry_more a /* 「続きを読む」のリンク */
{ color: #333333; }
#107 : No title
ごていねいにありがとうございました!!
#155 : No title
mayさんこんばんわ。
いつもカスタマイズ記事を参考にさせてもらってます。

リスト表示について分からないことがあったので、質問させてください。

こちらの記事を参考に、フロート配置にしてみたんですが、追記部分に遷移させたくない記事についても、「続きを読む」ボタンが強制的に表示されてしまって困ってます。

FC2ブログで記事を書く場合、本文部分と追記部分に分かれており、追記部分に記事を書いた場合にのみ「続きを読む」ボタンが表示されるのが普通だと思います。
が、こちらのフロート配置のソースをを埋め込むと、追記部分に記事を書いてない、つまり、本文部分のみの記事についても「続きを読む」ボタンが表示されてしまいます。

ボタンが表示されるだけならいいですが、「続きを読む」ボタンを押してページを遷移させないと、本文部分の画像横に表示させた外部リンク等をクリックすることもできません。

このような状態にならないよう、追記部分に記事がない場合には「続きを読む」ボタンを表示させないようにすることはできないでしょうか?

以上、お手すきのときで構いませんので、対処法を教えていただければ幸いです。
よろしくお願いいたします。

#162 : 続きを読むの表示
コンバンハ。
>こちらのフロート配置のソースをを埋め込むと
このテンプレートは最初からそういう仕様ですので、このカスタマイズをしなくても続きを読むは表示されてしまうのではないかと思われます。

このテンプレートには記事冒頭文を200文字だけ表示する変数が使われているので、例えば追記部分がない場合でも本文部分が300文字の場合は残り100文字が表示されなくなります。また、本文部分に書かれた装飾(文字サイズや文字色変更)やリンクなどのタグは無効になります。
そのため、追記部分がない場合でも本文部分を完全な形で表示できるページへのリンクとして「続きを読む」ボタンがデフォルトで設置されているのだと思います。

それでも記事タイトルがリンクになっているから不要という場合は以下のように<p class="entry_more">~</p>をmore_link変数で挟んでください。すると追記部分のない記事に続きを読むが表示されなくなります。

<!--more_link-->
<p class="entry_more"><a href="<%topentry_link>" title="<%template_abs_link>"><%template_extend></a></p>
<!--/more_link-->
#166 : 記事冒頭分を制限する変数
mayさん、こんばんわ。#155です。

ご回答ありがとうございます。
なるほど、デフォルトでそうなっていましたか…。

正直に言うと、続きを読むボタンが表示されるのは大した問題ではなく、本文装飾部分のリンクがまったく無効になっているのをどうにかしたかったんです。
例えば、他の相互リンク先などの記事を紹介するだけの簡単な記事の場合、わざわざ追記部分に遷移させるよりも、画像横などのリンクをクリックしてもらった方が都合がいいものですから。

これ、「記事冒頭文を200文字だけ表示する変数」を削除することはできないでしょうか?

もしできるのであれば、対処法を教えていただければ幸いです。

お忙しいところ恐れ入りますが、どうぞ宜しくお願いいたします。
#170 : Re: 記事冒頭分を制限する変数
コンバンハ。
冒頭文を非表示にする場合はスタイルシートに次のいずれかを追加してください。
/* 冒頭文非表示 */
#main .entry_discription {display: none;}
/* グリッド表示冒頭文のみ非表示 */
#main .grid_content .entry_discription {display: none;}
/* リスト表示冒頭文のみ非表示 */
#main .list_content .entry_discription {display: none;}

またはHTMLにある以下の1行を削除しても表示されなくなります。
<div class="entry_discription"><%topentry_discription><%topentry_desc></div>

リスト表示でのみ記事本文を完全な形式で表示する方法をリンク先URLに掲載致しましたので必要なときはご参考くださいませ。
#175 : No title
mayさん、こんばんわ。#166です。

ご回答ありがとうございました。
お蔭さまで、リスト表示形式で大分思い通りのレイアウトにできました。

追加の質問で申し訳ないんですが、リスト表示形式において、記事タイトルや日付、タグの位置などを全て画像の右側に配置するにはどのようにすればいいか教えていただけないでしょうか?

当方、画像を左側に配置して、タイトルや日付、タグなどを画像の右側にすっぽりと収めるような形にしたいと思ってます。
つまり、コチラのブログのTOPページのようなスタイルです。

もし、解決方法があれば、是非教えていただきたく思います。
お忙しいところ恐れ入りますが、どうぞ宜しくお願いいたします。

では。
#188 : リスト表示で画像の右側に記事タイトルなど
コンバンハ。
遅くなり、申し訳ございません。
リスト表示で画像の右側に記事タイトルや冒頭文を配置する記事をリンク先URLに投稿したのでご参考くださいませ。
#203 : No title
mayさん、こんばんわ。

この記事にある「リスト表示調整」のソースを導入してみたところ、TOPページはキレイに表示されるんですが、個別記事ページに移ると画像の下のスペースが途中で途切れてしまって本文の一部が表示されません。

どこを直せばよいでしょうか?
対処法を教えていただければと思います。

では。
#204 : Re: No title
コンバンハ。
こちらで確認いたしましたが再現しませんでした。
HTMLの構造的にこのスタイルシートを追加しただけでは発生しない現象と思われます。
テンプレートは何も変更していない状態でしょうか?
変更している場合はどのように変更したかがわからないと対処法も答えられそうにございません。
こちらで掲載しているカスタマイズ方法以外の変更を少しでも加えていた場合はブログを実際に見ないと恐らくわかりません。

一応、影響しそうな部分を改善できそうなコードを詰め込んだ応急措置コード(スタイルシート)を用意しましたが、改善しない場合は削除してください。
/* 応急措置コード */
#main #main_contents #e,#main #main_contents #e .entry_body,
#main #main_contents .p_area .entry_body,
#main #main_contents #e .entry_discription,
#main #main_contents .p_area .entry_discription {height: auto;}
#main #main_contents .p_area + .content {height: auto;}
#main #main_contents #e .entry_discription,
#main #main_contents .p_area .entry_discription {overflow: visible; min-height: 1px;}
#main #main_contents .p_area .entry_body {min-height: 1px;}
#207 : No title
mayさん、こんにちわ。
質問をした#203です。

HTMLを再確認してみたところ、<div>タグの閉じ忘れが一カ所あり、そこを直すと本文部分も追記部分も表示されました。

お騒がせしてどうもスイマセン。

ただ、当方、「トップページにも拍手・ツイートボタンなどを設置する方法」も実装しているんですが、個別記事においては、拍手ボタン等が記事フッターに重なり半分しか表示されなくなってます。

これを改善するにはどうすればよいでしょうか?
お忙しいところ恐れ入りますが、ご回答お願いいたします。
#245 : No title
mayさん、こんばんは。

リスト表示における記事本文の抜粋文字数は200だと思うのですが、これを調整する方法というのはあるのでしょうか?

ご回答いただけると幸いです。
#246 : Re: #245 文字数200
コンバンハ。
200文字は変数の仕様ですので調整はできません。
タグ入りであれば「リスト表示で記事本文部分を完全な形式で表示」で増やすことは可能です。
http://fc2blogtemplate.com/blog-entry-148.html

スクリプトで文字数を指定する方法の記事をURLリンク先に投稿いたしましたが……
変数の各機能についてはマニュアルに掲載されている事以外はできません。
http://help.fc2.com/blog/manual/Home/template/templatevariable.html
ご了承くださいませ。

コメントの投稿

  

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

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

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

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

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

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