Home > FC2ブログ > basic_white > basic_whiteテンプレート 10月8日の更新による変更点

basic_whiteテンプレート 10月8日の更新による変更点

 10月8日に更新されたbasic_whiteテンプレートの内容です。

 変更点はHTMLとスタイルシートのごく一部なので再ダウンロードする必要はありません。

 既にある程度カスタマイズしていてダウンロードし直すのが面倒な場合は変更箇所のみ入れ替えましょう。

変更点1:HTML

 場所はCtrl+Fキーで『e<%topentry_no>』を検索。

<div class="content entry grid_content<!--permanent_area--> p_area<!--/permanent_area-->" id="e<%topentry_no>">

 上記が以下に変更されました。

<div class="content entry grid_content<!--permanent_area--> p_area<!--/permanent_area--><!--not_permanent_area--> no_br<!--/not_permanent_area-->" id="e<%topentry_no>">

 個別記事ページ以外で「no_br」クラスを付加するようになりました。

【必要性】クラスによるページ分けにもなるので変更しておいてもいいと思います。


変更点2:スタイルシート

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

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

 上記が以下に変更されました。

#main_contents .no_br:first-child br { display: none; }

#main_contents .p_area .entry_body {
  height: auto;
}

 しかし「#main_contents .p_area .entry_body {height: auto;}」の記述は既にスタイルシート内に存在するので加える必要性は全くありません。制作者側の余計な追加です。なので実際は以下に変更されたと考えてOKです。

#main_contents .no_br:first-child br { display: none; }

 これは先の変更点1:HTMLの変更をしている時のみ効果がある設定です。グリッドまたはリストで記事一覧を表示している際に、各記事内のbr要素(改行)を無効にするものです。ただしテンプレートの該当部分には改行を使っていないので追加しても特に意味はありません。

【必要性】記事冒頭部分を記事本文を表示する変数などに変更した場合には意味がありそうです。特にそういったカスタマイズをしていないのであれば追加の必要性はありません。追加してもしなくてもどちらでもOKです。


 変更前の「, #main_contents .p_area .antry_body」は元からあった記述ミスです。

 「#main_contents .grid_content:first-child .entry_body~」が削除されてますが、これによりグリッド表示の際の一番上の記事の高さが自動ではなく、デフォルトの固定(height:5.8em;)になります。

 サムネイル画像の横幅が大きかったり記事冒頭文が長すぎた場合、ウインドウを狭めた時(スマートフォンからPC表示した時など)に冒頭文がはみ出る可能性があり、それを固定にすることで枠内に収めるようにした措置です。

 デメリットとしては高さを固定にすることになるので画像や冒頭文の高さが小さい場合に余分な空白が生じます。

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

【上記を削除する必要性】冒頭文がはみ出して表示されるよりも余分な空白を発生させた方が無難と思えるなら削除してもいいでしょう。といってもスマートフォンにはスマートフォン用のテンプレートがあるので無理に変更する必要はありません。サムネイル幅の最大横幅に300pxなど大きな値を指定しているのであれば(デフォルトではmax-width:200px;)、削除した方がいいかもしれません。

 あるいはスタイルシートのContent Widthにある「min-width: 800px;」の値を「880px」などに増やしてはみ出しを防ぐのも一つの方法です。

#container { min-width: 880px; }
#headermenu , #wrap ,
#footer_plg , #footer_inner {
  min-width: 880px;

まとめ

 現在のままで特に支障がなければ再ダウンロードも変更する必要もありません。

関連記事
スポンサー リンク
コメント

コメントの投稿

  

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

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

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

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

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

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