アメブロ フリープラグインのダイエットその①-まずはここからはじめましょう! | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

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宣言が書かれていますね。

川上雄大のワンポイントレッスン


・・・で、実際にはどうやるのか・・・って?

例えば、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澄川・ライフデザインスクール
川上 雄大