Home > FC2ブログ > basic_white > basic_whiteテンプレート 記事下のプラグイン3を2列表示にする方法

basic_whiteテンプレート 記事下のプラグイン3を2列表示にする方法

 basic_whiteテンプレートの記事下にあるプラグイン3を記事と同じように2列ずつ並べる方法です。
※フッターにあるプラグイン2ではありません。

 プラグイン3は偶数個用意し、足りない場合はフリーエリアを追加して適当な画像を掲載するなどしてください。

1:HTML

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

 「showGridLayout();}」の後に以下のコードを追加します。スペースなどは無理に追加する必要はありません。「}」の後に改行を入れてそのまま貼り付けてOKです。

function initialize() {
  var layout = jQuery.cookie( COOKIE_KEY_NAME );
  if ( !checkCookieValue( layout ) ) {
  layout = DEFAULT_LAYOUT;
  }
  
  if ( "list" == layout ) {
  showListLayout();
  } else if ( "glid" == layout ) {
  showGridLayout();
  } else {
  showGridLayout();
  }

jQuery('#plugin_main').addClass('plg_table').find('.plg_elm:odd > dd').each(function(){
var elm=[jQuery(this),jQuery(this).parent().prev().children('dd:first')];
elm[0].parent().addClass('plg_right').after('<div class="plg_row" />');
if(elm[0].height()>elm[1].height()){elm.reverse();}elm[0].css('min-height',elm[1].height()+'px');
});


}

2:HTML

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

 「<!--plugin_third-->」から「<!--/plugin_third-->」までが変更場所です。

<!--plugin-->
<!--plugin_third-->
<div class="content plg">
  <h3 class="plg_header" style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
  <!--plugin_third_description--><div class="plg_description" style="text-align:<%plugin_third_ialign>"><%plugin_third_description></div><!--/plugin_third_description-->
  <div class="plg_body" style="text-align:<%plugin_third_align>"><%plugin_third_content></div>
  <!--plugin_third_description2--><div class="plg_footer" style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></div><!--/plugin_third_description2-->
</div>
<!--/plugin_third-->
<!--/plugin-->

 上記を丸ごと以下に変更します。

<!--plugin-->
<div class="content plg" id="plugin_main">
<!--plugin_third-->
 <dl class="plg_elm">
  <dt class="plg_header" style="text-align:<%plugin_third_talign>"><%plugin_third_title></dt>
  <dd class="plg_body" style="text-align:<%plugin_third_align>">
<!--plugin_third_description--><div class="plg_description" style="text-align:<%plugin_third_ialign>"><%plugin_third_description></div><!--/plugin_third_description-->
  <%plugin_third_content>
<!--plugin_third_description2--><div class="plg_footer" style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></div><!--/plugin_third_description2-->
  </dd>
 </dl>
<!--/plugin_third-->
</div>
<!--/plugin-->

3:スタイルシート

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

 以上で完了です。

 左右2個ずつ並べるのでプラグイン3の数は偶数個にしてください。

プラグイン3を有効にする

 記事下にプラグイン3が表示されていない場合はメニューの【プラグインの設定】から表示させたいプラグインのカテゴリを【3】に変更します。

※間違って別のプラグインを移動させてしまうと元の順番に戻すのに手間がかかるので注意しましょう。元の順番がわからなくなると困るので移動させる前に別タブで変更前のブログページを開いておくのも一考です。

 サイドバーと記事下両方に最新記事を表示したい時は公式プラグイン追加ページで挿入先を【プラグインカテゴリ3】に変更してから最新記事プラグインの【追加】をクリックします。

左右の横幅を変更する

 左側のプラグインを35%、右側を65%にする時はスタイルシートのコードを次のように変更します。

#main_contents .plg_table .plg_elm {
  display: table-cell;
  width: 35%;
  vertical-align: top;
}
#main_contents .plg_table .plg_right {
  border-left: 1px dotted #B5B5B6;
  margin-left: -1px;
  width: 65%;
}

 そうすると左側より右側の方が横幅が広くなります。幅の合計は100%になるようにしてください。

補足

 displayはtableにしてあるので高さが可変するようなプラグインでも仕切り線は正常に表示されると思います。IE7についてはJavaScriptを使ってmin-heightで対応していますが、Windows XPはIE8までバージョンアップできるので無視してもよさそうです。

関連記事
スポンサー リンク
コメント
#125 : No title
お世話になります。
先日サムネイルのリンクの件で質問させていただいたTANAKAと申します。
質問ばかりで申し訳ないのですが、プラグイン3の2列表示にしたときのスタイルで1列表示する方法を教えていただけないでしょうか?
少しわかりにくい質問ないようと思いますが、ノーマルのままで「basic_white」のテンプレートを使った時のプラグイン3と2列表示にした際のプラグイン3のタイトル部分などの表示が違うので、これを1列表示したときも2列表示したときと同じスタイルにしたいと思っております。
何度もお手数をおかけしますがよろしくお願いします。
#133 : プラグイン3のタイトル
コンバンハ。
昨年10月31日に更新された際の不具合です。
スタイルシートの以下の部分を変更することでタイトル表示が改善されます。
#main_contents h3.sub_header {
↓変更
#main_contents h3.sub_header,#main_contents .plg_header {
その他詳細についてはURL先の記事をご覧くださいませ。
#134 : No title
対応ありがとうございます^^
#285 : プラグイン3 2列表示
いつもお世話になってます☆
度々の質問で申し訳ありません。

夕べはなんともなかったのに、
今朝からブラグイン3の2列表示が1列になってしまいました。

該当する解決策なのかも分りませんが、基本的カスタマイズ・ページを見て
下のようにしてみましたが、1列表示のままです。
//jQuery(function(){

ブログは、色々改変していますが、基本的な部分は、
ヘッダー以外、mayさんの書き込みを参考に作っています。

プラグイン3の2列表示がとっても気に入っていたので、
改善方法があるようでしたら、是非教えて下さい。

宜しくお願い致します。


余談ですが、mayさんのお蔭で、先週、訪問者さんから
ブログデザインについて、お褒めの言葉を頂きました☆
とっても嬉しかったです!
質問のついでみたいで、申し訳ありませんが、ホントに感謝してます!!
いつも更新、ありがとうございます。
#350 : プラグイン3を上部に移動して2つに分割
こんばんわです。表題の件で質問があります

こちらの記事の[basic_whiteテンプレート 記事下のプラグイン3を記事上に移動させる方法]
http://fc2blogtemplate.com/blog-entry-102.html

を2つに分割と併用したいのですが、どのように編集すればよろしいでしょうか?

ヘッダーと記事の間にバナーを挿入するでも対応可能のなのですが
できればプラグインで設置したいと思っております

お忙しいところ申し訳ありませんが、宜しければご返答下さい

コメントの投稿

  

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

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

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

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

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

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