記事の上に来るプラグインのタイトルの表示方法

最近はアフェリエイトに励むブロガーが増えてきているようですね。
記事の上や下にプラグインがあると、幅広広告や幅広プラグインをつけたい人には好都合です。
広告でなくてもお知らせに使えるし、要らなくなればすぐに削除できる。
記事だと更新とともに下へずれていくけれど、プラグインならいつも一番上に表示しておけます。

新しいテンプレを作っている間にその気になり、広告対応テンプレを作ってみました。
もともとプラグイン5が記事の上に来ていたテンプレも、この機会に新システムに変更していきます。
要らなければ、そのプラグイングループを使わなければ表示されることはありませんから、これがあって迷惑する人はいないでしょう。

それでは説明に入ります。

プラグイン4
トップページとそれに続く記事一覧ページで、記事の上に表示されます。
プレビューにはなぜが表示されませんが、あの表示されているページがトップページではないからです。つまり、トップページだけに特別なデザインをしても、プレビューでは見られないということ。

プラグイン4はお知らせに使うとき用にタイトルが用意されていますが、デフォルテは広告用に非表示になっています。これを表示させたい場合は、テンプレート編集ページの右上にあるHTMLを直接変更することになりますが、ご心配なく。誰でも簡単に変更できるように、HTML内に説明書きがあります。

HTMLを少しスクロールすると、下記のところが出てきます。
オレンジで囲まれたところにある、style="display:none;" を削除すればタイトルが現れ、コピペでまた貼り付けるとタイトルはまた消えてなくなります。
とっても簡単ですから、タイトルを表示させたい方は試してみてください。

広告はトップページと記事一覧ページのみの表示ですが、全ページに表示させたい場合、ピンク色の<!--if_page-->と<!--/if_page-->を削除すれば、すべてのページで表示されます。
が、カテゴリーやアーカイブなど各検索ページにプラグインを表示させたくない場合は、緑色の<!--if_entry-->と<!--/if_entry-->をピンク色に付け加えれば、検索ページでは非表示となります。

<!--　==========▼▼ プラグイン　4　========== -->
        <!--if_page--><!--if_entry-->
        <!--plugin4-->
        <div class="Plugin4InnerBlock">
        
<!-- ▽▽▽ プラグインタイトルの表示方法　
style="display:none;"を削除してください ▽▽▽ -->
          <h3 class="Plugin4Title <!--$plugin_title_align-->" style="display:none;"><!--$plugin_title--></h3>          
<!-- △△△ --------------------------------------- △△△ -->
          <div class="Plugin4Explanation <!--$plugin_explanation_align-->">
            <!--$plugin_header_explanation-->
          </div>
          <div class="Plugin4Contents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
          </div>
          <div class="Plugin4Explanation <!--$plugin_explanation_align-->">
            <!--$plugin_footer_explanation-->
          </div>
        </div>
        <!--/plugin4-->
        <!--/if_entry--><!--/if_page-->
<!--　==========▲▲ プラグイン　4　エンド　========== -->

プラグイン5
こちらは個別記事ページ（詳細記事ページ）だけに表示されます。
トップページに広告があっても、検索で来る訪問者が見るのはこの詳細記事ページだけです。
また、プラグイン4をお知らせ等広告以外に使う場合も考えて、プラグイン5を記事ページに設置。
こちらは記事の下、コメントとの間に表示されます。

テンプレートによってはここにランキングバナーを貼り付けて使えるものもありますが、デザイン上の問題が出る場合が多いと思うので、ランキングバナーはできれば記事の中にあるバナー設置箇所に貼り付けてください。

プラグインを一時的に非表示にする

記事の上にプラグインがあるテンプレートでは、フリーエリアに幅広広告やブログパーツ、お知らせなどが入れられます。
広告やブログパーツは常に表示されることが多いと思いますが、お知らせなどは期間限定ですね。
一度お知らせ期間が終わると、それが書かれているフリーエリアを削除してしまわないと表示が消えませんが、またお知らせを使いたい場合や、何かの都合で広告やブログパーツを一時的にだけ表示させたくない場合などは、いちいちそこを削除してまた書き入れるのは面倒です。

そこでここでは、プラグインを削除したり動かしたりせずに、表示させたり非表示にさせたりする方法をご紹介します。
また、プラグインはブログの全ページ（コメント編集ページを除く）に表示されますが、お知らせなどで詳細記事ページには表示させたくない場合のカスタマイズも一緒に載せておきます。

これはプラグイン全体に有効ですが、こういう使い方をするのは記事の上や下にあるプラグインだけだと思うので、ここでは私のテンプレにある、記事上部のプラグイン5で説明します。
他の作者のテンプレではHTMLが違いますので、その個所を探してください。

カスタマイズされたい方は、追記を開けてください。

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

多くのテンプレートは、変化のないプラグインが一列に並んでいるだけです。
忍者ブログにプラグインが５つもあるのは、記事の上や下に置いたり、３カラムで左右に置いたりするためだと思いますが、折り畳みなどの変化のあるプラグインを作るのにも役立っています。

このプラグインの多さを利用して、タイトルのないプラグインを加えたテンプレートが他にもありますが、今回の私の新作でダメが出たため、今後はタイトル無しのプラグインは作れなくなりました。

カウンターやアクセス解析、広告などでプラグインにタイトルを付けたくない場合もあると思いますので、ここではタイトルをなくす仕方を説明します。
とても簡単なので、気軽に試してみてください。


HTMLの変更の仕方
テンプレート編集ページへ行き、右上にあるHTMLを変更します。
忍者から出ている基本テンプレートをそのまま使用したテンプレートは、HTMLを見やすくするための見出しがついていないので、自分でプラグインの場所を探さなければなりません。

いったんHTMLを一番下まで一気にスクロールして、今度はゆっくりと上にスクロールしていくと、「コメントを編集する」と書いてある少し上のところにプラグインのブロックがあり、下のような部分が出てきます。
しかし、中にはプラグインが上のほうに来ているテンプレートもあるので、その場合はHTMLの上からスクロールすれば、プラグインブロックが出てきます。
プラグインの番号は下の緑の部分でわかります。この場合はプラグイン5なわけです。
下の赤い部分がタイトルなので、ここを削除すればプラグインのタイトルはなくなります。

      <!--plugin5-->
        <div class="PluginInnerBlock">
           <div class="PluginTitle <!--$plugin_title_align-->">
            <!--$plugin_title-->
          </div>
          <div class="PluginExplanation <!--$plugin_explanation_align-->">
              <!--$plugin_header_explanation-->
          </div>
          <div class="PluginContents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
          </div>
          <div class="PluginExplanation <!--$plugin_explanation_align-->">
              <!--$plugin_footer_explanation-->
          </div>
        </div>
      <!--/plugin5-->

私のテンプレにはSEO向けとそうでないものの２種類あります。
SEO向けでないものは上の説明どおりです。プラグインブロックがHTMLの上部にあるものと下部にあるものとがありますが、HTMLには見出しがついているのですぐに見つけられるでしょう。

SEO向けはタグが下記のようになっています。
他のSEO向けテンプレートもたいていこのように見出しタグ（h3とかh4）がついていますが、赤字の部分を削除すればタイトルはなくなります。
プラグイン5が記事の上にあるテンプレートはプラグインが4で終わっているので、プラグイン4のタイトルを削除します。

      <!--plugin4-->
      <div class="PluginInnerBlock">
        <h4 class="PluginTitle <!--$plugin_title_align-->"><!--$plugin_title--></h4>
        <div class="PluginExplanation <!--$plugin_explanation_align-->">
          <!--$plugin_header_explanation-->
        </div>
        <div class="PluginContents <!--$plugin_contents_align-->">
          <!--$plugin_data-->
        </div>
        <div class="PluginExplanation <!--$plugin_explanation_align-->">
          <!--$plugin_footer_explanation-->
        </div>
      </div>
      <!--/plugin4-->

Webstyle #01 シリーズでプラグインの左右を変える

Webstyle #01 シリーズで、プラグインの左右を入れ替えたい方用にカスタマイズの仕方をご紹介します。
簡単にできますので、気軽にカスタマイズしてみてください。

1. まずテンプレート設定 / 編集ページで変更したいテンプレートを選び、表の右側にある修正をクリックします。
2. そうするとテンプレート編集ページになります。左側にあるのはテンプレート編集用エディターです。
3. ページの右下にあるCSSをスクロールして、「プラグインブロック」の見出しを見つけてください。
4. ここの一番上のPluginBlock と、もう少し下の「記事ブロック」の一番上のEntryBlock の指定を変えます。下に訂正済みCSSを載せましたので、コピーして差し替えるだけでOKです。

更新後は３つとも同じＣＳＳになりました。下の部分をコピーしてください。

/*************************************************
  プラグインブロック
*************************************************/

.PluginBlock {
    float: right;
    width: 220px;
    margin-top:25px;
    text-align: left;
    overflow:hidden;
}

.PluginInnerBlock {
    margin-right:10px;
    padding:10px 10px 10px 0;
    line-height:150%;
}

.PluginInnerBlock2 {
    margin-right:10px;
    padding:0 10px 10px 0;
    line-height:150%;
}

/*************************************************
  記事ブロック
*************************************************/

#EntryBlock {
    float: left;
    width:570px;
    margin-top:25px;
    text-align: left;
    overflow:hidden;
}

更新前のテンプレートについては追記に入れました。更新前のテンプレートを変更されたい方は追記を開けてください。

インデントが利かないテンプレートを修正する

不適切な箇所のご指摘を受けましたので、記事を訂正しました。

忍者ブログにはたくさんのテンプレートが出ていますが、その指定の仕方は実はいろいろです。
気が付かずに使っていらっしゃる方が大半だと思いますが、なかには気が付いて「どうしてだろう？」と頭を悩ます方もいるかもしれません。

忍者エディターの機能の中にインデントがあるのをご存知ですか？
ツールバーの2段目、リストの箇条書き用のボタンからおたまじゃくしまで続く4個のボタンがそうです。
これを使うと、文章が少し中に入り込んで表示されます。
しかし、このボタンを使っても表示が変わらないテンプレートがあります。
こういうテンプレートは、CSSの最初によく下記のような指定がしてあります。

* {
        margin:0;
        padding:0;
    }

この星型はユニバーサルセレクトと言って、タグをリセットするためのものです。
余白の取り方がそれぞれ違う、各ブラウザの見え方を同じにするために使われているのですが、すべてのタグに指定が効いてしまうため、インデントが無効になるという不具合が生じるわけです。
ただ、作者が意図的にインデントをしていない場合がありますので、まずこれらの指定がCSSの中にあるかどうかを調べてください。もしあれば、そこを修正すればいいことになります。CSS*TEMPさんの二つ目のコメントも参考にしてください。
タグは下記のとおりです。リストと番号付きリストは記事部分の指定箇所にあると思います。
.EntryTextBox ul や .EntryTextBox ol  のように、タグが後ろに付いています。

引用文： blockquote
リスト：ul
番号付きリスト：ol

もしこのような指定がどこにもない場合、引用文とリスト用の指定を新たに作ってやることで問題を回避できます。

まず引用文の場合です。
コメントのCSS*TEMPさんがサンプルの指定を書いてくださっていますし、ここでは私がWebstyle #01 シリーズで使用した指定をご紹介しますので、参考にしてください。
Marginは外余白、paddingは内余白です。余白は記事に合うように調整してください。

blockquote {
    margin:10px 20px;
    padding:10px;
    border:dotted 1px #AAA;
}

次にリストと箇条書きの場合です。
忍者ブログの基本テンプレートを利用したテンプレートの場合は、次のサンプルを参考にしてください。同じくWebstyle #01シリーズで使用した指定です。これは記事部分にしか効力はありません。
お使いのテンプレートが明らかに違う方式の場合は、作者さんに聞いてみてください。

.EntryTextBox ul,
.EntryTextBox ol {
    margin:10px 20px;
    padding:0px 20px;
}

注）CSS*TEMPさんの指定の中にあるemは、使われている文字の高さです。