ところがこのフリープラグインエリア・・・
半角で3,800文字までという文字数制限があります。
外部からスクリプトファイルを読み込むブログパーツ的なスクリプトで10くらい設置するのが限度です。
また、アメブロカスタマイズで必須といえる「JQuery」。
アメブロはHTML部分を一切変えることができないのでdiv要素をいじるのには欠かせません。
JQueryは命令文がかなりコンパクトにできるんですが複雑なスクリプトだとけっこうな文字数になります。
そこで、スクリプトを外部化してフリープラグインから読み込ませるようにしてフリープラグインエリアの文字数を節約する方法を解説します。
外部化できないもの
・もともと外部からファイルを読み込むタイプのスクリプト
サードパティーのブログパーツやアクセス解析などです。
<script charset="UTF-8" src="http://analytics.qlook.net/analyze.js"></script>
例えば、これはqlookのアクセス解析用のタグですが「analyze.js」というスクリプトファイルを外部から読み込んでます。このタイプのスクリプトは外部化できません。jquery本体も当然できないので
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.7');
</script>
<script>(_JQ17_=jQuery)(function(){$=jQuery=_JQ17_;});</script>
これをフリープラグインに記入しなければなりません。
※ 上の例はGoogleのライブラリからJQueryの1.7っていうバージョンを読み込んでます。
一番最後の行はアメブロではHTMLの最後で1.3という古いバージョンのJQueryを読み込んでしまい強制的にダウングレードされてしまうのを防ぐための記述です。
アメブロで最新バージョンのJQueryを使いたい方はフリープラグインの先頭に上の５行を入れておいたほうがいいかも？です。
外部化できるもの
これはトライ＆エラーを繰り返して検証していくしかないのですが・・
JQueryで書いたスクリプトやJQueryのプラグインはたいてい外部化できます。
例えば当ブログではJQueryのFaceboxとidTabsっていうプラグインを使ってますが両方とも文字数は3,800文字を軽くオーバーしてますが外部化することによってフリープラグインの空きは確保してます。
外部化するときの注意点
・バックアップは必ずすること
思わぬところで原因不明のエラーに遭遇しますのでバックアップは必須です
・読み込む順序を考える
複数のプラグインを外部化するときは読み込む順序を考慮しましょう。
順序を変えることであっさり動作することもあります。
・あまりたくさん外部化しない
もともとアメブロは動作が軽いとはいえないので・・・
外部化してたくさんスクリプトを入れすぎると当然ページの読み込みに時間がかかってしまいます。