頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/24

Google or AdMax Promotion(it)

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

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

はじめに

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

 

2014/11/25追記

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

 

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

FC2ブログの仕様

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

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

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

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

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

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

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

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

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

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

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

01_プラグインカテゴリ3の表示状態

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

この出力されているプラグイン3のエリアはには、
プラグイン1とプラグイン2というプラグイン(フリーエリア)を設定しています。

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

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

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

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

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

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

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

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

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

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

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

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

 

ちょっとした作業のコツ

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

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

 

プラグインの操作

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

プラグインの非表示

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

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

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

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

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

05_プラグインの非表示化

プラグインの非表示化

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

06_プラグインの設定の保存

プラグインの設定の保存

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

07_ブラウザで非表示の確認

ブラウザで非表示の確認

プラグインの追加

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

08_公式プラグインの追加

公式プラグインの追加

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

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

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

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

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

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

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

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

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

プラグインの編集

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

11_プラグインの詳細

プラグインの詳細

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

12_プラグインの編集

プラグインの編集

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

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

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

プラグインの削除

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

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

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

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

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

15_プラグインの削除確認

プラグインの削除確認

GoogleAdSense設置例

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

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

16_GoogleAdSenseスクリプトの貼り付け

GoogleAdSenseスクリプトの貼り付け

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

17_GoogleAdSenseの表示確認

GoogleAdSenseの表示確認

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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

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

参考

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

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

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


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

Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
Google Analytics™はGoogle Inc. の商標です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - FC2ブログ , ,

  関連記事