Home > FC2ブログ > basic_white > basic_whiteテンプレート 記事下のプラグイン3を記事上に移動させる方法

basic_whiteテンプレート 記事下のプラグイン3を記事上に移動させる方法

 basic_whiteテンプレートの記事下に設置されているプラグイン3を記事の上に移動させる方法です。

 内容的にはヘッダーとメイン記事の間にコンテンツを設置する方法と同じです。テンプレートHTMLに直接テキストを書き込むか、プラグイン3を利用するかの違いです。

1. HTML

 場所はCtrl+Fキーで『"main_contents』を検索。直後に次の強調部分のコードを追加します。

<div id="main">
<div id="main_contents" style="display: none">
<div class="top-contents plg" id="plugin_main">
<!--plugin-->
<dl class="plg_elm">
<!--plugin_third-->
  <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>
<!--/plugin_third-->
</dl>
<!--/plugin-->
</div>

2. HTML

 場所はCtrl+Fキーで『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-->

3. スタイルシート

 場所はCtrl+Fキーで『#main {』を検索。次の強調部分のコードを変更します。margin-topを0にします。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 0px;
  margin-right: -340px;
  text-align: left;
}

 border-topを0にします。

#main {
  border-top: 0px dotted #B5B5B6;
  border-bottom: 1px dotted #B5B5B6;
}

※このブログで紹介している他のカスタマイズで#mainのmarginを指定するスタイルを追加した場合はそちらも同様に変更してみてください。

4. スタイルシート

 場所はCtrl+Fキーで『.grid_content:first-child』を検索。すべての該当箇所を以下のように変更します。

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



#main_contents .top-contents + .grid_content,
#main_contents .grid_content:first-child, #main_contents .p_area {

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



#main_contents .top-contents + .grid_content .entry_image img,
#main_contents .grid_content:first-child .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 .top-contents + .grid_content .entry_discription,
#main_contents .grid_content:first-child .entry_description,
#main_contents .grid_content:first-child .entry_discription {

テンプレートの利用時期によっては「~entry_description,」の行がない場合がありますが、同じように追加します。

 上記以外にも『.grid_content:first-child』が使われているコードがある場合はそちらも同様に「.top-contents + .grid_content」に変更したコードをカンマ付きで先頭に追加してください。

5. スタイルシート

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

 以上で完成です。


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

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

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

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

プラグインのタイトルを非表示にする

 追加したスタイルシートコードの「.plg_elm .plg_header」に「display: none;」を加えると非表示になります。

.plg_elm .plg_header {
  background: url("http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png") no-repeat scroll 10px 7px #F4F4F4;
  border-bottom: 1px dotted #B5B5B6;
  border-top: 1px dotted #B5B5B6;
  margin:0;
  padding: 9px 10px 9px 25px;
  font-size: 90%; /* タイトル文字サイズ */
  display: none;
}

 プラグイン3をフリーエリア一つだけにしてタイトルを非表示にすればフリーエリアの本文のみが記事上部に表示されるようになります。

リスト表示の下線を非表示にする

 初期状態では最新の記事などのリストを表示すると区切りの下線が表示されます。これを非表示にする場合は追加したスタイルシートコードの以下の部分を削除してください。

.plg_elm li {
  border-bottom: 1px #ccc dashed;
  padding: 3px 3px 6px;
}
.plg_elm li ul {
  border-top: 1px #ccc dashed;
  padding: 3px 0 0 10px;
  margin: 3px 0 0;
}
.plg_elm li ul li:last-child {
  border-bottom: 0;
  padding: 3px 3px 0;
}

特定のページではプラグインを表示しない

 [1. HTML]で追加したコードをエリア変数で挟んで指定します。

<!--エリア変数-->
<div class="top-contents plg" id="plugin_main">
<!--plugin-->
<dl class="plg_elm">
<!--plugin_third-->
  <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>
<!--/plugin_third-->
</dl>
<!--/plugin-->
</div>
<!--/エリア変数-->

 主なエリア変数は次の通りです。

トップページのみプラグイン3を表示=エリア変数『index_area』

<!--index_area-->
<div class="top-contents plg" id="plugin_main">
省略
</div>
<!--/index_area-->

個別ページ以外でのみプラグイン3を表示=エリア変数『not_permanent_area』

<!--not_permanent_area-->
<div class="top-contents plg" id="plugin_main">
省略
</div>
<!--/not_permanent_area-->

トップページ以外でのみプラグイン3を表示=エリア変数『not_index_area』

<!--not_index_area-->
<div class="top-contents plg" id="plugin_main">
省略
</div>
<!--/not_index_area-->

個別ページでのみプラグイン3を表示=エリア変数『permanent_area』

<!--permanent_area-->
<div class="top-contents plg" id="plugin_main">
省略
</div>
<!--/permanent_area-->

関連記事
スポンサー リンク
コメント
#205 : No title
プラグインを記事下に設置したいのですが、どうすればよいのでしょうか?
#209 : プラグインを記事下に設置
コンバンハ。
このテンプレートはプラグイン3が最初から記事下に設置されているので、1~5の手順は無視してこのページにある「プラグイン3を有効にする方法」をご覧ください。
管理画面の【プラグインの設定】から表示させたいプラグインのカテゴリを【3】に変更すれば有効になります。
#211 : No title
記事の固定方法を探していたらたどりつきました。どうかご教授お願いします。

プラグイン3を最新記事の上に配置したいのですが、「basic_whiteテンプレート 記事下のプラグイン3を記事上に移動させる方法」の1~4は理解できました。

5で追加するコードはCSSのどの場所に追加したらよろしいのでしょうか?
#212 : スタイルシートに追加
コンバンハ。
単に追加とある場合の追加する場所はスタイルシートの編集エリアならどこでも構いません。
ただし1行目にある「@charset "utf-8";」より前に追加したり、他のスタイルコードの途中に追加することはできません。例えばbody { } のカッコ内に割り込ませて追加するのはNGです。
何のコードがわかるように一応コメントは付けていますが、スタイルシートの最後など後から削除・編集しやすい場所に追加するのがオススメです。
#214 :
丁寧なご説明ありがとうございます。
早速とりかかってみます。
#283 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#284 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#327 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

コメントの投稿

  

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

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

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

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

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

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