Home > FC2ブログ > basic_white > basic_whiteテンプレート グリッド表示の記事タイトルを全文表示

basic_whiteテンプレート グリッド表示の記事タイトルを全文表示

 basic_whiteテンプレートでグリッド表示した際は記事タイトルが一行分しか表示されません。

 これを省略せずにすべて表示する方法です。

 変更するのはスタイルシートのみです。

スタイルシートのコード

 以下のコードをスタイルシートに追加すると記事タイトルが省略されずに表示されます。

記事タイトル文字サイズの調整

 小さくする時は「86」の数値を「80」などに減らしてください。大きくする時は逆に増やします。

font-size: 86%;

 文字を小さくしすぎた時にタイトル左にあるマークを上方に調整したい場合は以下のコードを加えてください。「3」の数値を減らすとマークが上方に移動します。最初の記事タイトルも全表示している場合は「 + .grid_content」を削除してください。

#main_contents .grid_content + .grid_content h2 {
  background-position: 20px 3px;
}

冒頭文文字サイズの調整

 文字サイズを自分で指定する時は次のfont-sizeで調整できますが、文字サイズに合わせてheightの数値「5.7」も変更する必要があります。heightの値が文字サイズにマッチしていないと最終行の文字の高さが途中までしか表示されない場合があります。

#main_contents .grid_content + .grid_content .entry_body {
  height: 5.7em;
  font-size: 90%;
}

 そのため主要ブラウザ(IE、Firefox、Google Chrome)で確認することを推奨します。

#main_contents .grid_content + .grid_content .entry_body {
  height: 5.2em;
  font-size: 82%;
}

注意点

 あまりにも記事タイトルが長い時は冒頭文の文字サイズを小さくしたり、表示される行数を減らさないと枠からはみ出すことがあります。

 どうしてもはみ出してしまう時は次のコードをスタイルシートに追加して高さを調整してください。「330」の数値を増やすと高さが増加します。

#main_contents .grid_content + .grid_content {height: 330px;}

(注)グリッド表示の最初の記事を狭めて並べるのカスタマイズを行っている場合は「 + .grid_content」の部分だけ削除してください。

記事タイトルを2行まで表示

 記事タイトルの高さを固定させて3行目以降を非表示にします。タイトルが1行の場合でも2行分の高さになります。高さを均一にしたい時にご利用ください。

 スタイルシートに追加した「/* グリッド表示タイトル調整 */」のENDの前に以下のコードを追加すれば、2行まで表示されます。

body #main_contents .grid_content + .grid_content .entry_header a {
  height: 3.0em; line-height: 1.5;
}
body #main_contents .p_area .entry_header a,
#main_contents #e .entry_header a {height: auto; line-height: inherit;}

/* END */

 記事タイトルの行間を変更する時はline-heightの値を増減させ、そのline-heightの2倍の数値をheightに指定します。

height: 2.8em; line-height: 1.4;

 3行まで表示する時はline-heightの3倍の高さを指定してください。

(注)グリッド表示の最初の記事を狭めて並べるのカスタマイズを行っている場合は「 + .grid_content」を削除してください。

body #main_contents .grid_content .entry_header a {

関連記事
スポンサー リンク
コメント
#49 : 無事にうまくいきました!
mayさま

この度は突然のお願いにも関わりませず、快く適切な処理を教えていただきまして、本当にありがとうございます! 見事にグリッド表示で記事タイトルが全文表示されるようになりました。

と喜んだのも束の間、その代わりに一番上の最新記事の記事名がなんだか途中で省略されてしまいました。これを改善するためには、どこをどのようにいじったらよろしいでしょうか。失礼かとは思いますが、URLも併記させていただきますので、症状?をご覧いただきまして、ご教示をお願いできましたら幸いです。
#50 : 一番上の最新記事
コンバンハ。
最初の記事は以下を追加すると省略されなくなります。99%は文字サイズです。

#main_contents .grid_content .entry_header a {
width: 98%; height: auto; white-space: normal;
font-size: 99%;
}

ただしタイトルが複数行で冒頭文も長いと幅を狭めた時に枠からはみ出てしまう可能性もあるので必要なら以下もついでに追加しておくといいかもしれません。

body #main_contents .grid_content:first-child .entry_body{height: 8.5em;}
#51 : No title
mayさま

ありがとうございました! 見事にキレイに表示されるようになりました! もう、こうなると私のような素人がちょっと手を入れるという感じでは手に負えなかったので、本当に助かりました。心から感謝を申し上げます。
Basic_whiteは使っている人も多いでしょうから、こちらのようなサイトの存在は本当に役に立っていると思います。お忙しい中、ご丁寧にコードまで書いていただき、本当にありがとうございました!
#52 : No title
横からですが助かりました
自分もこの問題がネックでリスト表示にしてたんですが、
無事グリッド表示に戻ることが出来ました

おそらく同じように悩んでる潜在的なユーザーはごまんといると思う
この複数行表示を標準仕様にしてもよさそう

ついでに質問で恐縮なんですが、
タイトル部分の背景の色を変えるってできますか?
#53 : タイトル背景色
コンバンハ。
拙いところもありますが、お役に立てて良かったです。
マイペースに色々と更新していきたいと思います。

#52
タイトル部分は記事タイトルでしょうか?
URL先の基本的なカスタマイズページに記事タイトル背景色の変更を追加しましたのでご参考ください。
#54 : No title
#53
ありがとうございます!
まさにその通りで言葉足らずですいません(^_^;)

ただ自分が他の部分を色々イジリすぎて、どっかが悪さしてるのか
何故か「記事タイトル全体」のコードは適用されませんでしたorz
でもテキスト背景の方法はバッチリ適用できました!
テキスト背景の方法だとちなみに左のマークは消せないんでしょうか?
#55 : 記事タイトル背景
コンバンハ。
10月31日更新分で追加されたスタイルシートの影響により優先順位が変わったためと思われます。テキスト背景色のみの場合は以下で有効になります。
/* 記事タイトル背景色 */
#main #main_contents .entry_header a {
background-color: #f3f3f3;
width: auto;
padding: 1px 10px;
}
#main #main_contents .entry_header {
padding: 5px 5px 5px 5px;
background: none;
}
#main #main_contents .p_area .entry_header {height: auto; white-space: normal;}
/* END*/

個別記事ページの記事タイトルの文字の大きさは以下のコードで調整。
#main #main_contents .p_area .entry_header {font-size: 105%;}

それからお手数ではありますが、グリッド表示タイトル調整のスタイルに次のコードを追加してくださいませ。
#main #main_contents .p_area .entry_body,
#main #main_contents .p_area + .grid_content {height: auto;}

これは1ヶ月更新しないと出てくる広告による影響で記事の高さがなくなるのを防ぐものです。1ヶ月に1回必ず更新する場合はなくても問題ありませんが、追加しておいた方が安心できるかと思います。
どちらの説明ページのコードも一応更新済みです。
#56 : No title
無事左の印を無くすことができました!
自分が原因じゃなかったんですね(ホッ)
わざわざ広告の影響も配慮もしていただき頭が下がる一方ですm(_ _)m
バッチリ追加させていただきました
本当なにからなにまでありがとうございます!
#58 : No title
初めまして。こんばんは。
FC2ブログを初めて間もない者です。
教えていただきたいことが2つほどあります。
すみません。。。


まず1つはbasic_whiteを使ってまして
最初のページでグリットもリストも要らず
最初から続きを読むと押したような
普通のページがいいんですが
それはできますでしょうか?


それともうひとつは
画像と本文をセンターに出来ないでしょうか?
1つ1つではなく
HTML編集でどうにかなりませんでしょうか。。。

よろしくお願いします。
#60 : 通常の記事本文表示とセンタリング
コンニチハ。
URL先に通常の記事本文を表示する方法を掲載いたしましたのでご参考ください。
本文をセンター配置にする時は以下のコードをスタイルシートに追加します。

.entry_body {
font-size: 94%; /* 本文文字サイズ */
line-height: 1.7; /* 行間 */
text-align: center;
}
.relate_dl {text-align: left;}

もし変わらない時は.entry_body の前に#mainを付けてみてください。
#main .entry_body
#62 : No title
本当にありがとうございます。
ちなみにすみません。。。
記事タイトルも
センターにしたいときはどうすればいいですか?
#63 : 記事タイトルをセンター
コンバンハ。
記事タイトルをセンターにする時は以下を追加してください。
h2.entry_header {text-align: center;}

タイトル左のマークを消したい時はさらに以下を追加。
body #main h2.entry_header {background: none; padding: 5px 8px 5px 8px;}
背景色を変えたい時はbackgroundに色を指定。
body #main h2.entry_header {background: #ffeeee; padding: 5px 8px 5px 8px;}
#64 : No title
親切に教えていただき
本当に感謝しております。
すごくすごく親切です。
何回もありがとうございました。

また参考にさせてください。
#65 : トップページのサムネイル表示に関して
こんばんは 初めてコメントします

最近になってbasic_whiteを使い始めました。

このブログの記事を参考にさせていただき、右サイドバー2列の3カラム化に成功したのですが、

このブログのトップページのように、記事本文中にある画像のサムネイルを記事一覧に表示させたいのですが、これは元々basic_whiteに備わっている機能なのでしょうか?

それとも何か特別なプラグインを使うのですか?
ネットでも色々と情報を集めてみましたがどうしても解らずに困り果てています。

もしよろしければ教えていただけないでしょうか?

よろしくお願い致します。
#68 : Re: トップページのサムネイル表示に関して
コンニチハ。
記事一覧は100件ずつタイトルが表示されるインデックスページ(archives.html)のことでしょうか?
トップページのサムネイル画像はFC2ブログテンプレートの独自変数「<%topentry_image>」を使用しており、この変数は<!--topentry-->内のブロック(通常の記事表示エリア)でしか機能しません。
インデックスページは<!--titlelist-->ブロック変数で表示するものなので「<%topentry_image>」は使用できません。また現在のところ<!--titlelist-->内でサムネイル画像を表示できる変数も存在しません。
ですのでインデックスページに個別記事のサムネイル画像を表示する公式な方法はございません。
#70 : No title
専門的な用語がよく理解出来ませんのでお答えいただいた内容をよく理解出来ないのですが、
自分の希望としては、このブログ(http://fc2blogtemplate.com/)のトップページのように、各記事で使われている画像を表示させるようにしたいと思っています。

私はこのブログ(http://fc2blogtemplate.com/)内の記事を参考に、basic_whiteをサイドバー右2列の3カラム化している状態なのですが、それが原因でこのブログのトップページのような画像表示ができないという事でしょうか?
#71 : トップページのサムネイル画像表示
コンバンハ。
上部メニューの左にある「記事一覧」のリンクで表示されるページではなく、トップページにサムネイル画像が表示されていないということでしょうか?
その場合は3カラムにする前のbasic_whiteテンプレートでサムネイルが表示されるかをご確認ください。
ご自身のブログURLに「?share=41762&index」をつけ足すと変更前(初期状態)のbasic_whiteテンプレートでブログが表示されます。
このブログの場合:http://fc2blogtemplate.com/?share=41762&index

そのページでもサムネイルが表示されない場合は取得できるサムネイル画像自体が記事に存在しない事になります。(もし表示されている場合は3カラム化の際に何らかの不具合が発生)

サムネイル画像として取得できる画像は「FC2ブログにアップロードした画像」で「記事投稿の際に【本文の編集】のテキストフォーム内に画像のタグ<img>を入れている(追記の部分に入れた画像は対象外)」ことが条件になります。

サンプル:basic_whiteを3カラム化したページ
http://fc2blogtemplate.com/?template=basic_white3-131031&index

■サムネイル画像の仕組み
FC2ブログテンプレートのHTMLで使用されている「<%topentry_image>」というワード(変数)が画像に変換されて表示されます。
プラグインなどは使用されておらず、FC2ブログ自体に備わっている機能で、どのテンプレートでも使用することができるタグのようなものです。
<%topentry_image>→記事中の画像に変換→<img src="ファイルアドレス">
#72 : No title
細かく教えていただきありがとうございます
専門的なことに詳しくない自分にとって、このブログはとても参考になって助かっています。

今回の場合は、FC2ブログのドメイン外に保存していた画像のURLを挿入する形で記事本文に表示させていたのでサムネイルに反映されなかったようです。
FC2ブログ内に再アップロードすることで無事にサムネイル表示させることができました。

ありがとうございました。
#80 : No title
今ゼロからこのテンプレートをイジってるんですが、
#main_contents .grid_content + .grid_content {height: 330px;}
で記事の高さを固定しようと思うと、一番目の記事だけ微妙にズレて崩れます

「basic_whiteテンプレート グリッド表示の最初の記事を狭めて並べる」は実行済み
この記事で紹介されてる一番上のコードは、どちらも未チェックのコード
そして記事タイトルの背景色も変更済みの状態です
他は特に何もイジってませんでした

ただその高さを固定するコードを消して
#main_contents .grid_content {
にある/* グリッド表示の時の記事の高さ */をイジれば問題はありませんでした
#81 : No title
#80ですが「+ .grid_content」というのを消し忘れてるところがありました
申し訳です
#84 : + .grid_content
コンニチハ。
こちらのカスタマイズは当初、一番目の記事以外のタイトルを全文表示する方法として公開しておりました。
注意点の部分は確認し忘れていたようです。
ご指摘の通り、最初の記事を狭めて並べるの補足のように「+ .grid_content」を削除すると1番目の記事も対象になります。
こちらこそお手数をおかけしました。
申し訳ないです。
#110 : No title
いつも参考にしております。

記事タイトルの長さによって画像のズレが出てしまうので
タイトル行数の指定は出来るのでしょうか?

ページが多い場合のページ移動にGoogle検索の下段にあるうような数字のページナビゲーションのような事は出来るのでしょか?

厚かましい質問で申し訳ありませんが
宜しくお願いたします。
#335 : No title
現在の状態;
・fc2ブログ
・basic_white
・3カラム
・リスト表示固定

【質問内容】
basic_whiteのリスト表示で、記事タイトルを2行まで表示させるには、どのようにしたら良いのでしょうか?


よろしくお願いいたします。
#352 : No title
冒頭文文字サイズの調整をしたら記事内の文字サイズまで変わってしまったのですが
記事内の文字サイズはそのままに頭文文字サイズだけ変えることはできないのでしょうか?

コメントの投稿

  

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

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

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

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

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

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