PCインストラクターの川上です。
アメブロをカスタマイズする際、フリープラグインにブログパーツをコピペしたりしますが・・・
例えば、
なくなってしまった、記事フッター部分の「ペタ」リンクを表示させようと思ったら、
わざめーばさんの
記事フッタに「ペタ」リンクを表示する方法
で書かれているコードをフリープラグインに貼り付ける必要がありますね。
文字数を数えてみると、312文字あります。
しかし、フリープラグインは最大で3,800文字までしか受け付けていませんので、今回のように 312文字をコピペしていったら、こういったカスタマイズは
3800 ÷ 312 を計算すると
約12個 しかできませんね^^;
そこで、フリープラグインを少々ダイエットする必要があったりします。
・jQuery(ジェイクエリー)の宣言コードを一つにまとめる
・フリープラグインを外部化する
といった方法もありますが、
まずは、少々、というダイエットですから、次のことをされるとよいです。
<script type="text/javascript">
の箇所の
type="text/javascript" を消して、
<script>にする
です。
これだけでも、22文字減りますから、消さない手はありませんね。
ただし、余計な(でも大事な)文字を消さないように気をつけてください。
これは、scriptで始まるコードが JavaScript(ジャバスクリプト)という言語で書かれていますよ~という意味なのですが、アメブロでは、なくても認識してくれますのでいらないというわけです。
<補足>
もう少し、言えば・・・(初心者の方は飛ばしてください^^;)
HTML4.01では<script>タグにはtype属性が必須でしたが、 HTML5ではtype属性の初期値はtype="text/javascript"とされており、 スクリプト言語のタイプが type="text/javascript" となる場合には、type属性を省略してもよいことになっています。
アメブロの新デザインはHTML5で書かれていますね。
(旧デザインはXHTML1.0ですが・・・)
それは、ソースを見れば、
(ソースを見るには?と思われた方は『投稿したブログのHTMLソースを見るには』をご覧ください。)
先頭に
<!doctype html>
と、「HTML5」のDOCTYPE宣言が書かれていますね。
旧デザインの方は、先頭に
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
と、長ったらしい「XHTML1.0」のDOCTYPE宣言が書かれていますね。
もう少し、言えば・・・(初心者の方は飛ばしてください^^;)
HTML4.01では<script>タグにはtype属性が必須でしたが、 HTML5ではtype属性の初期値はtype="text/javascript"とされており、 スクリプト言語のタイプが type="text/javascript" となる場合には、type属性を省略してもよいことになっています。
アメブロの新デザインはHTML5で書かれていますね。
(旧デザインはXHTML1.0ですが・・・)
それは、ソースを見れば、
(ソースを見るには?と思われた方は『投稿したブログのHTMLソースを見るには』をご覧ください。)
先頭に
<!doctype html>
と、「HTML5」のDOCTYPE宣言が書かれていますね。
旧デザインの方は、先頭に
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
と、長ったらしい「XHTML1.0」のDOCTYPE宣言が書かれていますね。
・・・で、実際にはどうやるのか・・・って?
例えば、ACRアクセスランキングのプラグインコードが次のようにあるとします↓↓↓
<!-- ACRアクセスランキング -->
<div class="ranking">
<script type="text/javascript" src="http://rranking13.ziyu.net/js/xxxxxxx.js" charset=shift_jis></script></div>
<script type="text/javascript" SRC="http://rranking13.ziyu.net/rank.php?xxxxxxx"></script>
<a href="http://www.ziyu.net/" target=_blank><img src="http://rranking13.ziyu.net/rranking.gif" alt="アクセスランキング" border=0 width=35 height=11></a><noscript><a href="http://www.ziyu.net/" target=_blank>アクセスランキング</a></noscript>
このコードの中の赤い部分を↓↓↓
<!-- ACRアクセスランキング -->
<div class="ranking">
<script type="text/javascript" SRC="http://rranking13.ziyu.net/js/xxxxxxx.js" charset=shift_jis></script></div>
<script type="text/javascript" src="http://rranking13.ziyu.net/rank.php?xxxxxxx"></script>
<a href="http://www.ziyu.net/" target=_blank><img src="http://rranking13.ziyu.net/rranking.gif" alt="アクセスランキング" border=0 width=35 height=11></a><noscript><a href="http://www.ziyu.net/" target=_blank>アクセスランキング</a></noscript>
削除して、次のようにします↓↓↓
<!-- ACRアクセスランキング -->
<div class="ranking">
<script src="http://rranking13.ziyu.net/js/xxxxxxx.js" charset=shift_jis></script></div>
<script SRC="http://rranking13.ziyu.net/rank.php?xxxxxxx"></script>
<a href="http://www.ziyu.net/" target=_blank><img src="http://rranking13.ziyu.net/rranking.gif" alt="アクセスランキング" border=0 width=35 height=11></a><noscript><a href="http://www.ziyu.net/" target=_blank>アクセスランキング</a></noscript>
(注 script と src の間は半角スペース1文字分にしてください。)
こんな感じで、ポチポチとフリープラグインのダイエットをしていくといいですね^^!
あっ、そうそう・・・、とーっても重要なこと、最後に忘れていました!!
このように、フリープラグインをいじる(修正したり、削除したり、移動したりetc)場合は、
その前に、必ず!
メモ帳などのテキストエディタにコピー&ペーストしてバックアップしてから
にしてくださいね!
先に言えばよかったですね('◇')ゞ
失礼しました~^^ゞ
<参考>
「フリープラグイン簡単ダイエット」文字数3800文字制限に達してしまったとき(アメブロ)
以上、フリープラグインのダイエット方法その①でした。
LIDS澄川・ライフデザインスクール
川上 雄大