このブログ

アメブロのカスタマイズ方法とかを書いてます。


テーマ:

フリープラグインを利用してアメブロをカスタマイズする方法


アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロで、ユーザーCSSを編集することよるカスタマイズとともによく行われるカスタマイズ方法として、フリープラグインを利用したカスタマイズがあります。

フリープラグインは、アメブロで唯一、(ほぼ)何を書いても許される、つまり機械的チェックが(ほぼ)入らない場所で、これを利用することで、CSSでは実現できない多くのカスタマイズ方法が実現可能となります。

(「ほぼ」の理由は、Googleアドセンスのタグが禁止になっているためと、アメブロの規約に抵触するような内容は削除されることがあるため)

読者を増やすツールとして欠かせない、メインカラム上下の読者登録ボタンや、お問合せフォームメルマガ登録フォームなども、このフリープラグインを利用して設置します。

また、好みのアクセス解析ツールや逆アクセスランキングを設置したい場合も、フリープラグインを利用しなければ、導入することは不可能でしょう。

そこで、本記事では、このフリープラグインを利用してアメブロをカスタマイズする手順についてご紹介します。

これが必須となっているカスタマイズ方法も多いので、ぜひマスターしてくださいね。

では、以下、フリープラグインを利用したカスタマイズの手順です。



フリープラグインを利用したカスタマイズの手順


フリープラグインを利用したカスタマイズでは、こちらフリープラグインの編集ページを使います。






マイページからは、まず、マイページの右上の方にあるAmebaサービス一覧アイコンをクリックし、開いた小窓の中にあるプラグインの追加をクリックします。






すると、プラグインの追加ページが表示されますので、そのページにあるフリープラグインと書かれたタブをクリックするとたどり着きます。






フリープラグインの編集方法は、テキストボックス(上記画像の赤四角内)に必要なコードを書いたり、コピペしたりしてから、保存ボタンをクリックすればOKです。

ただし、アメブロのフリープラグインは、半角文字で3,800文字分しか保存できないという制限があります。

ですので、あまり長くなりすぎないように注意する必要があります。

なお、フリープラグインを利用してアメブロをカスタマイズする場合、他にも以下のようなやっておくべき準備事項がありますので、ここで合わせてご紹介します。



jQueryを使えるようにする


フリープラグインを利用してアメブロをカスタマイズする場合、JavaScriptというプログラミング言語で書かれたプラグラムを<script>タグ内に記述して実行させる方法が頻繁に使われます。

<script>
  // JavaScriptで書かれたプログラム
</script>

そして、その際に、jQueryというライブラリ(≒プログラミングを楽にするためのミニプログラムの集合体)がよく利用されます。

jQueryは、短く簡潔に処理を記述するのに向いていて、3,800文字という厳しい文字数制限のあるアメブロのフリープラグインには、まさに打って付けです。

実は、以前使われていた「旧デザイン」のときは、何もしなくてもフリープラグインjQueryを使うことができたのですが、現在のCSS編集用デザインなどの「新デザイン」では、フリープラグインjQueryを使うためには、別途手続きが必要になっています。

でも、手続きと言っても特に難しいものではなく、次のコードをフリープラグイン最初に記述しておくだけで大抵は大丈夫です。

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>

jQueryが使えないことによるトラブルを避けるためにも、とりあえず、フリープラグイン最初に記述しておくようにしてください。

▸ 詳しくはフリープラグインでjQueryを使えるようにするにはをご参照ください。



フリープラグインを「使用する機能」に入れる




また、アメブロのフリープラグインは、初期状態では使用しない機能になっています。

そのままでは、フリープラグインにいくらカスタマイズ用のコードを記述しても、アメブロの方には何も反映されませんので、フリープラグイン使用する機能に変更する必要があります。






変更は、こちらサイドバーの配置ページで行います(マイページからは、アメーバのサービス一覧配置設定の順にクリック)。

操作も簡単で、使用しない機能の方に入っているフリープラグインを、マウスで使用する機能の方にドラッグ&ドロップして移動して、保存すればOKです。

移動先は、サイドバー中のフリープラグインを表示したい位置にしてください。

どこがいいかわからない場合は、ひとまず、どちらかのサイドバーの一番下に入れておけばいいでしょう。

幅広側のサイドバーは、最下部に「アメーバブログ広告」と「RSS」が居座るため、その上に配置して下さい。







以上、フリープラグインを利用してアメブロをカスタマイズする手順についてご紹介しました。

あとは、本ブログ等で紹介されるコードを追加していくのみです。

フリープラグインを使うと、CSSでは実現できない様々なカスタマイズをアメブロに施すことができます。

まだやったことがないという方は、ぜひチャレンジしてみてくださいね。



関連記事


CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ




2014/01/04 アメブロの仕様変更に合わせ加筆修正。
2012/11/18 加筆修正&再アップしました。
2012/03/06 全面修正&再アップしました。



いいね!した人  |  コメント(84)

松本@このブログさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります