FC2™ブログの表示されるプラグインコンテンツを変更する方法

2013/11/23 2014/11/24

FC2™ブログを利用していて、HTMLの編集まではしたくないけど、
ちょっと表示するコンテンツを増やしたり、Google™AdSenseなどの広告を挿入したいといった時ありますよね。
そんな時はプラグインエリアを利用してコンテンツを追加したりすると便利です。
コンテンツのHTML上の挿入位置や追加削除などの操作方法のご紹介です。

以下ではFC2ブログに関する投稿の一覧をご紹介しています。

Fc2ブログ

はじめに

FC2ブログといえば、フルカスタマイズが行えて商用利用も可能な、
本当に汎用性の高いブログサービスだと思います。
こうしたブログサービスを選択して、収益化されている方もいらっしゃることでしょう。

2014/11/25追記

人気のあるFC2ブログですが、先日の一件以降は、
個人的には使用を控えたほうがいいんじゃないかなと感じています。
大切な個人情報がほぼ当局にダダ漏れになってしまっていることを懸念しています。

FC2家宅捜索は対岸の火事？これからがアフィリ逮捕者続出の予感

さて、FC2ブログを利用してフリーエリアと呼ばれる、
プラグイン形式によるコンテンツの挿入方法のご紹介です。

FC2ブログの仕様

FC2ブログではHTMLがフルカスタマイズできるため、
決まった編集の仕方がないというか、同じテンプレートでも利用していないと、
こうした説明が役に立たない部分があります。

その為、触りの部分としてHTMLについて少しだけご紹介します。

FC2ブログでは、フリーエリアなどのプラグインを挿入するエリアを
３つ設定することができます。

この３つのプラグインエリアを表示する位置も、
HTMLによって、自分で決めることができるようになっています。
もちろん「使わない」という選択肢も可能です。

HTMLの文法といった部分に関しては他のサイトの方が
詳しく解説されていると思いますので、ここでは省かせていただきます。

プラグインの挿入の仕組み

既に利用されているテンプレートのHTMLによってサイトのデザインが決められており、
そのHTMLの中で、ここは「プラグイン１のエリア」ここは「プラグイン３のエリア」といったように、
プラグイン１とか、２とか３のプラグインをまとめた単位を、
挿入する位置を指定できるようになっています。

この挿入位置を指定する記号（タグ）が、FC2ブログのヘルプに記載されています。

FC2ヘルプ | FC2ブログ | テンプレート用変数一覧

<!–plugin–>～ <!–/plugin–> プラグインを有効時に表示するブロック
<!–plugin_first–> ～ <!–/plugin_first–> プラグインカテゴリ1を表示
<!–plugin_second–> ～ <!–/plugin_second–> プラグインカテゴリ2を表示
<!–plugin_third–> ～ <!–/plugin_third–> プラグインカテゴリ3を表示

例えば、私のサイトの最下部でいえば、プラグインエリア３が配置されています。
http://algorhythnn.blog.fc2.com/　（現在はレイアウト変更してしまっています）

プラグインカテゴリ３の表示状態

この出力されているプラグイン３のエリアはには、
プラグイン１とプラグイン２というプラグイン（フリーエリア）を設定しています。

プラグイン１を例に設定をご説明するとプラグインに
設定ができる出力項目は以下のようなものがあります。
またそれぞれはHTMLに設定したタグの位置に挿入されます。

タイトル (40文字以内)　→　<%plugin_third_title>
プラグイン説明(上部)　→　<%plugin_third_description>
プラグイン説明(下部)　→　<%plugin_third_description2>
タイトル文の文字設定　→　<%plugin_third_talign>
コンテンツの文字設定　→　<%plugin_third_align>
説明文の文字位置　→　<%plugin_third_ialign>
フリーエリア内容の変更　→　<%plugin_third_content>

プラグインカテゴリ３の設定とフリーエリア１

またWebページを出力した表示した状態と出力されたソース、
テンプレートに設定されたHTMLを見ると、以下のようになっています。

ブラウザの表示とHTMLの関係

これは、<!–plugin_third–> ～ <!–/plugin_third–>で囲んだエリアに、
テンプレート３の内容を出力すると定義したうえで、
出力を行いたいHTMLに対して、プラグインの設定で行ったタグを
埋め込むことで出力を行っています。

この<!–plugin_third–> ～ <!–/plugin_third–>のエリアは、
プラグイン３に設定したプラグインの個数分の回数繰り返して出力されます。

このようにして、<!–plugin–>で囲んだエリア内に、
<!–plugin_first–><!–plugin_second–><!–plugin_third–>で
囲まれた部分が各プラグインカテゴリ（１～３）に対応します。

こうしたルールに基づくことで、プラグインエリアの位置を変更したり、
見た目をCSSで指定したりカスタマイズすることができます。

意図しない位置にプラグインが出力されている場合には、
HTMLを修正してみるのもいいと思います。

FC2™ブログでHTMLの修正を行う方法

尚、HTMLを編集される際には複製を行ってHTMLのバックアップを行いましょう。

FC2ブログでテンプレートをコピー(複製)する方法

ちょっとした作業のコツ

上記のキャプチャ画像のように、
ブラウザの表示位置とHTMLの関係を調べる方法は以下でご紹介しています。

無料ブログサービスのHTMLタグ構造とコンテンツ挿入位置の割り出し方法

また、FC2のブラウザ画面でHTMLを修正するよりも、
見やすい画面で編集する方がミスなく効率的に作業が行えます。

無料ブログサービスのHTMLをEclipseで見やすく修正する(4.3.1 Kepler：日本語)

プラグインの操作

プラグインの追加や削除を行う操作に関しては、
おそらく迷うことは特にないのではないかと思います。
公式ヘルプでも丁寧に説明されていますから特にご紹介する必要はないでしょうね。

プラグインの非表示

FC2ブログを既にご利用でしたら、最初から登録されているプラグインが、
ブログに表示されているでしょう。
まずは、いらないものを消すことからご紹介します。

ブログのトップ画面から[プラグイン]をクリックするか、
サイドメニューの[プラグインの設定]をクリックします。

プラグイン(プラグインの設定)の選択

現在設定されているプラグインが一覧で表示されます。
非表示にしたいプラグインの行の[表示する]列のチェックをクリックして外します。

プラグインの非表示化

すぐ横の設定列の[設定]をクリックします。

プラグインの設定の保存

ブラウザでブログの表示を確認すると、非表示になっています。

ブラウザで非表示の確認

プラグインの追加

プラグイン管理の画面に戻り[公式プラグインの追加]をクリックします。

公式プラグインの追加

公式プラグインの一覧が表示されます。
上部のプラグイン挿入先でプラグインカテゴリ１、２、３から選択します。

例として「フリーエリア」プラグインを追加しますので、
フリーエリアプラグインの行の[追加]をクリックします。

追加対象カテゴリと追加プラグインの選択

プラグイン管理の画面に戻ると、指定したプラグインカテゴリに対して追加されています。

追加されたプラグイン以外に移動する際には、
カテゴリ列から[1、2、3]のプルダウンから移動先カテゴリを選択します。

選択すると選択したプラグインカテゴリにプラグインが移動します。

追加済プラグインのカテゴリ変更

プラグインの編集

プラグインの編集を行う場合には、編集するプラグイン行の[詳細]をクリックします。

プラグインの詳細

プラグイン編集の画面が開きますので、適宜表示したい内容などを入力し、設定します。
入力が完了したら[設定]をクリックすると保存されます。

プラグインの編集

ブラウザから表示を確認すると、入力した内容が表示されます。

ブラウザで変更内容の確認

プラグインの削除

プラグインを非表示ではなく、削除する場合には、
プラグイン管理画面の削除したいプラグインの行から[削除]をクリックします。

削除の確認ダイアログが表示されますので[OK]をクリックすると、
プラグインが削除されます。

プラグインの削除と削除確認

プラグイン管理画面で削除されたことが確認できます。

プラグインの削除確認

GoogleAdSense設置例

GoogleAdSenseの広告コードを設定する場合には、
フリーエリアの内容の部分に対して、GoogleAdSenseスクリプトコードを設定します。

必須ではありませんが、タイトルにはお約束の「スポンサーリンク」を入力しています。

GoogleAdSenseスクリプトの貼り付け

ブラウザで表示を確認すると、GoogleAdSenseの広告が表示されています。

GoogleAdSenseの表示確認

さいごに

FC2のこうしたプラグインは(HTMLを変更しない場合)挿入できる場所が、
限られてしまう点で自由度は少し低くなります。

ただ、HTMLのどこに挿入するといったプログラミング的な要素を、
考えることなく簡単に挿入することができますので、
とりあえず、ブログ上に設置したい場合などには非常に便利です。

HTMLの理解やカスタマイズは時間のある時にじっくりやればいいのです。
簡単に導入できるメリットを活かしながら、サイト運営を行っていくといいと思います。

参考

FC2はヘルプがしっかりと作られていて、HTMLの編集やカスタマイズに関しても、
丁寧に書かれているなと思います。

このヘルプに書かれていることをコツコツ真面目にやっていくと、
終わったころにはHTMLやCSSなどの一通りの知識はついていそうです。
教材として考えても十分な濃さではないかと思います。

FC2ヘルプ | FC2ブログ | プラグインについて

FC2はFC2, Inc.の商標であり、FC2ブログはFC2, Inc.のサービス名称です。
FC2ロゴ、アイコンその他のマーク等はFC2, Inc.の商標であり、FC2, Inc.の著作物です。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
Google Analytics™はGoogle Inc. の商標です。