INTEREST

↓テンプレート「basic_white」のカスタマイズ用に作ったブログです。
「 FC2ブログのテンプレート「basic_white」をカスタマイズ 」

---

「basic_white」トップページの編集

1. 1.トップページでのみ表示したい内容をHTMLに記述する
2. 2.スタイルシートへの記述
3. 3.応用とまとめ♪

---

1.トップページでのみ表示したい内容をHTMLに記述する

以下の画像のように、テンプレート「basic_white」のメインコンテンツ上部にトップページでのみ表示される部分を作るには、FC2ブログの「管理画面」から「テンプレートの設定」でHTMLを編集します。


※サンプルとして「忍者AdMax」の広告と「忍者レコメンド」を利用して記事をランダム表示してます。


上記のように表示する為に、テンプレート「basic_white」のHTMLに以下のように記述してます。
編集箇所はHTML内の「 <div id="main_contents" style="display: none"> 」のすぐ下です。
※キーボードの「Ctrl」+「F」で検索すればすぐに見つかると思います♪

<div id="main_contents" style="display: none">

<!--index_area-->
<div class="index-only">
<p><i class="fa fa-quote-left"></i> 緑の線で囲ってる部分はトップページでのみ表示してます <i class="fa fa-quote-right"></i></p>
<br />
<p>▼ 貼るだけでブログが収入源に！？「忍者AdMax」の広告です♪ ▼</p>
<!-- admax -->
<script src="http://adm.shinobi.jp/s/e34bbe309f9decc7c15fa0f19381e1a8"></script>
<!-- admax -->
<br />
<br />
<p>▼ 「忍者レコメンド」を利用して、このブログ内の記事をランダム表示♪ ▼</p>
<div class="ninja-recommend-block" id="ca0dd7c9d44d9f677ecceab1bda8e180">
<script type="text/javascript" src="http://rcm.shinobi.jp/js/imp.js"></script>
<script type="text/javascript" src="http://rcm.shinobi.jp/r/ca0dd7c9d44d9f677ecceab1bda8e180"></script>
</div>
</div>
<!--/index_area-->

※9行の「忍者AdMax」のタグと、14行～16行目の 「忍者レコメンド」のタグは私の場合のタグなので、実際にご自分でも試される場合は、それぞれのサービスで発行されたタグを貼って下さい^^

※3行目の「<!--index_area-->」 ～ 19行目の「<!--/index_area-->」の間がトップページで表示される部分になります。また3行目の「<!--index_area-->」と19行目の「<!--/index_area-->」を削除すると全てのページで上記の内容が表示されるようになります。

※今回はトップページでのみ表示させるので「<!--index_area-->」と「<!--/index_area-->」で囲ってますが、その他にも記事ページやカテゴリページでのみ表示させたり等も可能です♪
例えば・・・
記事ページでのみ表示の場合「<!--permanent_area-->」と「<!--/permanent_area-->」
カテゴリページでのみ表示の場合「<!--category_area-->」と「<!--/category_area-->」
その他にも表示エリアを指定する変数はいくつも用意されてるので、詳しくはこちらをご確認下さい。

上記のソースを記述すると、FC2ブログのHTML編集画面では以下の画像のようになります。

---

2.スタイルシートへの記述

テンプレート「basic_white」のメインコンテンツ上部に表示される内容に対して、以下のようにスタイルシートにも少しだけ記述を追加しました。

.index-only{
margin:15px;
padding:15px;
text-align:center;
border:1px #0c0 solid;
border-radius:10px;
}
.index-only p:first-child{ color:#0c0; font-size:x-large; }

---

3.応用とまとめ♪

上記HTMLの部分でも記載しましたが、表示させたいエリアを変える事により色々応用する事も可能です。
例えば、このブログの場合サイドメニューに表示されてる「このページの目次」は記事ページでのみ表示されるようにしてます^^

FC2ブログの場合、プラグインカテゴリが1～3まであり、その中にそれぞれ色んなプラグインを入れる事が出来るので、プラグインカテゴリ1は「全ページ共通」、プラグインカテゴリ2は「記事ページでのみ表示」、プラグインカテゴリ3は「カテゴリページや月別アーカイブページでのみ表示」と言う感じで、プラグインも表示エリア別に使い分ける事も出来ます♪

また、下記のように表示エリアを組み合わせる事も可能です。

<!--index_area-->
<!--permanent_area-->
<img src="http://～省略～.jpg" alt="○○○" />
<!--/permanent_area-->
<!--/index_area-->

※上記の場合、3行目の画像がトップページと記事ページでのみ表示されます。

上手く応用して、色々作り込むと普通のホームページみたいな作りに出来るかもですね♪ｗ
また、色んな場所に上手に過去記事へのリンクを入れたりするのも良いですね^^

以上、簡単にでしたがブログのトップページのみ（指定したエリアのみ）に表示する方法でした♪