PCインストラクターの川上です。
<追記>(2014年5月21日)
ここでお伝えしている機能(DropboxのPublicフォルダの使用)は、無料ではできなくなっています。
有料になってしまいましたので、取り急ぎお知らせいたします。
『【注意】DropboxでPublicフォルダを使うには有料登録になってしまった!』
「アメブロのフリープラグインの文字数制限で文字数がオーバーしてしまったときにも、外部ファイル化としてDropboxを利用することもできますね。」
といった声があちこちであったそうで・・・^^;
そう、アメブロのフリープラグインって、最大で3,800文字までしか保存できないものですので・・・
(その説明は過去記事をご覧ください→『「フリープラグイン簡単ダイエット」文字数3800文字制限に達してしまったとき(アメブロ)』)
文字数がオーバーしてしまったら、別のところに避難させるとよいのです、ハイ^^
そこで、今回は、その別のところを
Dropbox(ドロップボックス)
にしてみます。
(Dropboxって?という方は、こちらをまずご覧いただいて、インストールをしましょう。)
さぁ、実際にやってみましょう!
まず、全体の流れはこちら↓になります。
1.フリープラグインの中のスクリプトをファイル化する
まず、フリープラグインの中のスクリプトを1セット決めます。
(スクリプトって?という方は過去記事 『記事やコメントを読んだ後に『読者になる』を見せるには』をご覧ください^^)
ここでは、記事フッターの「アメブロで紹介」リンクのスクリプトを外部化してみます。
<!-- 「アメブロで紹介」リンク-->
<script>
$(function(){
$('.skinArticle').each(function(i,e){
var t=$('.skinArticleTitle',e);
$('.articleLinkArea',e).prepend('<a href="http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?entry_text='+encodeURI('『<a href="'+$(t).attr('href')+'" target="_blank">'+t.text().replace(/\s*$/,'')+'</a>』')+'" target="_blank">アメブロで紹介</a> | ');});
});
</script>
この<script>・・・・・・・・・</script>で挟まれた部分だけを抜き出します。
そう、例えば今回のケースでいえば、この黄色い部分だけ↓↓↓
<!-- 「アメブロで紹介」リンク-->
<script>
$(function(){
$('.skinArticle').each(function(i,e){
var t=$('.skinArticleTitle',e);
$('.articleLinkArea',e).prepend('<a href="http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?entry_text='+encodeURI('『<a href="'+$(t).attr('href')+'" target="_blank">'+t.text().replace(/\s*$/,'')+'</a>』')+'" target="_blank">アメブロで紹介</a> | ');});
});
</script>
(画像では赤色の部分↓↓↓)
コピーして、メモ帳に貼り付け(ペースト)します。
そして、ファイル名をつけて、文字コードを「UTF-8」にして、任意の場所(ここではマイドキュメント内の「jsフォルダ内)に保存します。
ファイル名は、半角英数字でつけて、最後の拡張子には「.js」をつけます。(ここでは、「shoukai.js」としました。)
そう・・・、javascriptファイルをまず作るのです。
2.Dropboxにアップロード
次に、このjavascriptファイル「shoukai.js」を、DropboxのPublic(パブリック)フォルダにドラッグして移動します。
→これをDropboxにアップロード、といいます。
この時、パブリックフォルダが見当たらない方は、Dropboxの『パブリックフォルダ(Publicフォルダ)』を有効にします。
(こちらの記事『Dropbox(ドロップボックス)でPublicフォルダが見当たりません』もご参考に。)
ブラウザでこちらのURL (https://www.dropbox.com/enable_public_folder) にアクセスして、「Publicフォルダを有効にする」ボタンをクリックします。
(詳しくは、わざめーばさんの記事をご参照ください。)
3.外部に置いたファイルを読み込む
いったん、フリープラグインに戻って、
赤い部分の<script>・・・</script>を削除して、
(もちろん、元のフリープラグインのスクリプトはメモ帳にコピーしてバックアップしておいてくださいね。)
外部に置いたjavascriptファイル(・・・.js)を呼び出すのに、このような↓コードを作ります。(コピー&ペーストします。)
<script type="text/javascript" src="javascriptファイルのURL"></script>
または、
<script src="javascriptファイルのURL"></script>
そして、このjavascriptファイルのURLは、アップロード先のURLに置き換えます。
そのアップロード先のURLは、
Dropboxのパブリック(public)フォルダ内のJSファイルを右クリックして、「公開リンクをコピー」をクリックして取得します。
→ココが一番重要なポイント!
そのまま「クリップボードに貼付ける」をクリックします。
そして、アメブロのフリープラグインで、
<script type="text/javascript" src="javascriptファイルのURL"></script>
または、
<script src="javascriptファイルのURL"></script>
このjavascriptファイルのURLの部分に、アップロード先のURLを貼り付け(ペースト)します。
最後に、「保存」ボタンを押して、完成です!
あとは、うまくいったかどうか、ブログに戻って、F5キーを押して(何度か)更新してみてください。(Macの方は、command+Rキーを何度か押して更新してください。)
うまくいったら、他のブログパーツも同様に試してみるとよいですね。
ただし、jQuery(ジェイクエリー)のスクリプトだけは残しておいてください。
※注意!
フリープラグインを編集するときは、必ず作業前にメモ帳などに別途保存しておくことをお勧めいたします!
※補足
複数のスクリプトを個別にテキストファイルに保存する必要はありません。
すべてのスクリプトを1つのテキストファイル内にまとめて保存しておいてもOKです。
ただし、ファイルの拡張子は『.txt』ではなく、『.js』にしておくことをお忘れなく。
・・・と、
西川先生、リクエストいただきましてありがとうございました!こんな感じでよかったでしょうか~(笑)
<追記>
ネットサーフィンからの成功法則!
フリースタイル桐生 翔さんから、この記事をご紹介していただいております。
フリープラグインをドロップボックスで容量アップ。
以上、フリープラグインの外部化でした。
LIDS澄川・ライフデザインスクール
川上 雄大