FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

javaScriptの外部ファイル化

一般的にjavaScriptをヘッダー内に書くよりも外部ファイル化したほうがSEO的に良いと言われています。
このJavaScriptの外部ファイル化を紹介します。

まずヘッダー内<head>～</head>の中のJavaScriptを確認してください。

<head>
～

<script language="JavaScript"></script>

～

<script language="JavaScript"></script>

～
</head>

<script language="JavaScript"></script>　まで囲まれた部分をメモ帳などのテキストエディタに貼り付けてください。

メモ帳などのテキストエディタに貼り付ける内容

function mySetCookie(myCookie,myValue,myDay){
myExp = new Date();
myExp.setTime(myExp.getTime()+(myDay*24*60*60*1000));
myItem = "@" + myCookie + "=" + escape(myValue) + ";";
myExpires = "expires="+myExp.toGMTString();
document.cookie = myItem + myExpires;
}
function myGetCookie(myCookie){
myCookie = "@" + myCookie + "=";
myValue = "";
myStr = document.cookie + ";" ;
myOfst = myStr.indexOf(myCookie);
if (myOfst != -1){
myStart = myOfst + myCookie.length;
myEnd = myStr.indexOf(";" , myStart);
myValue = unescape(myStr.substring(myStart,myEnd));
}
return myValue;
}

function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}

これを拡張子.jsとして適当な名前で保存してください。（例：test.js）

このファイルをサーバにアップします。
FC2ブログの場合は管理画面からファイルのアップロード→ファイルの選択→アップロード

ヘッダー内のJavaScriptは削除し、代わりの次の一行を加えてください。

<script type="text/javascript" src="jsファイルのURL"></script>

あれだけ大量にあったJavaScriptの記述がこの一行になり随分スッキリしました。
検索エンジンはソース上部に書かれているキーワードほど重要視するので、上部を占める無意味なJavaScriptを外部化することでSEO効果が得られるようです。

関連記事

[ 2007/02/20 00:21 ] カスタマイズ共通カスタマイズ | TB(3) | CM(29)

≪ アイコン付きツリー化カテゴリーをグループで折りたたむ | HOME | お手軽バックアップ ≫

[ 1249 ] こんにちは

1ケ所は外部化済みだったのですが、上の方は放置していました(汗)
かなりすっきりしました。
有難うございます。

私は「たぐ」で打ち込むと
<script type="text/javascript" src=""></script>
が出てくる様にしてあるので、アップロード画面で、表示(jsの)→右クリ→プロパティ→コピーして、上のタグに入れるだけで簡単でした。

他にも、
<img src="" border="0" align="right" hspace="">
<img src="" border="0" align="left" hspace="">
<font color="" size=""></font>
など、その他もろもろが出てくる様にしてあります。
タグラー(？)としてはこれが無いと困ります(苦笑)

[ 2007/02/20 15:46 ] [ 編集 ]

[ 1251 ] …と思ったら

「続きを読む」が機能しなくなってしまった為戻しました。
何か間違えた様なので、試行錯誤してみます。

[ 2007/02/20 17:12 ] [ 編集 ]

[ 1255 ] 私も続きを読むがおかしく成りました

　はじめまして。いつも参考にさせて頂いております。

ここのカスタマイズを参考にして外部化してみたのですが、カスタマイズしていた「続きを読む」がおかしく成ってしまいました。

　結局泣く泣く元に戻しました・・・。

[ 2007/02/20 22:08 ] [ 編集 ]

[ 1257 ] > ちゃんさん

申し訳ありません。ちゃんさん。
私の記事が間違っていました！jsファイル内では
<script language="JavaScript"></script>
は不要です。
どうも最近の私はミスが多くて冴えてないです。誠に申し訳ありませんでしたm(__)m

[ 2007/02/20 22:45 ] [ 編集 ]

[ 1260 ] > 水野圭人さん

こんばんは、水野圭人さん。
私の記事が間違えていたせいでご迷惑をおかけしてしまいました。jsファイル内では
<script language="JavaScript"></script>
は不要でした。
お手を煩わしてしまって誠に申し訳ありませんでしたm(__)m

[ 2007/02/20 23:07 ] [ 編集 ]

[ 1265 ]

その後、もう1つの外部化したjavaを見て気付きましたw
(javaとスタイルシートは現在色々覚えている最中です。)

しかしながらPC歴が浅い為、打ち間違い・勘違い・無理矢理(→これが大半)が多いので、バックアップ無しでは恐ろしいです(^^;

[ 2007/02/21 19:00 ] [ 編集 ]

[ 1269 ] > ちゃんさん

こんばんは、ちゃんさん。
ちゃんさんのコメントのおかげでいち早く記事の間違いに気付くことができました。有難うございました。
ちゃんさんはＰＣ暦が浅いとは思えないスキルを既に持っています。挑戦し続けた結果ですね＾＾

[ 2007/02/22 01:59 ] [ 編集 ]

[ 1271 ]

いたお様、こんばんは。
ちょっと遅くなってしまいましたが早速JavaScript外部化にしました。
とてもhtmlがすっきりして希望通りです。
要望に答えていただき感謝感激ありがとうございます。

ところでゆくゆくは後半のJavaScriptも外部化していこうと思っているのですが問題ないでしょうか？

[ 2007/02/22 22:59 ] [ 編集 ]

[ 1274 ] > しんさん

こんばんは、しんさん。
残念ながら後半にあるJavaScriptは外部ファイル化が出来ません。できたとしてもファンクション(function{～})のみです。
後半にあるJavaScriptはSEOに影響がでるほどではないので、そのままでも問題ないと思いますよ。

[ 2007/02/22 23:44 ] [ 編集 ]

[ 1276 ] ありがとうございます

いたお様、ありがとうございます。
そうですか。
了解しました。
おかげ様で前の方がすっきりしたので、後ろも・・・なんて思っていました。
またご相談ありましたらよろしくお願いします。

[ 2007/02/23 00:10 ] [ 編集 ]

[ 1280 ] その後…

前半に入れてあるもののうち、

・上の記事の部分
・NEWマーク
・壁紙2種類(読み込みの度に変わる)

を外部化しました。

他に、いたおさんの「折り畳みプラグイン」以外に入れている折り畳み(プラグイン3やコメント欄パス部分に付けているもので以前から外部化使用)を含め、計4ケ所になりました。

壁紙はしょっちゅう変えるのであれば元から変更してアップし直して…と、手間がかかりますが、変えないのであれば外部化しても良さそうですよねw

それにしても私のはジャバジャバ(？)しすぎて無効にしてある方には優しくない状態のブログになってしまいました…

PC歴は４年前に1年ちょっと＆昨年5月からなので、トータル2年ちょいなんです。
色々と覚え出したのはこちらのテンプレートをお借りしてからです。
いたおさんのお陰と言っても過言ではありません(^^)

[ 2007/02/23 13:24 ] [ 編集 ]

[ 1283 ] > しんさん

こんばんは、しんさん。
後ろのJavaScriptは残念ながら外部化できませんが、また疑問があれば何でも聞いてくださいね。全てに答えれる訳ではありませんが＾＾；

[ 2007/02/24 01:25 ] [ 編集 ]

[ 1287 ] > ちゃんさん

こんばんは、ちゃんさん。
今はほとんどのブラウザの初期状態がJavaScriptに対応しているので、問題ないと思いますよ。たまに故意的にJavaScriptを無効にしている方もいるとは思いますが。。。
ちゃんさんがこのペースで知識を増やしていくと凄いことになりそうですね＾＾

[ 2007/02/24 01:52 ] [ 編集 ]

[ 1288 ] > かどりんさん

こんばんは、かどりんさん。
たしかにソースが片付いているとすっきりして見やすいですね。内も外も美しくですね＾＾

[ 2007/02/24 01:57 ] [ 編集 ]

[ 1775 ] このJavaScriptは

はじめまして、いたお様。

改造するに当たって、分かりやすいCSSが魅力的なので、こちらのテンプレートを使わせていただこうと思っております。
何分にも、今年になってからBlogを始め、CSSを勉強し始めたばかりなので分からない事ずくめですが試行錯誤しながら進めています。
（現在ちまちまと改造中なので、まだテンプレート実装まで行き着いていないのですが）

JavaScriptに関してはまるで分からないので教えていただきたいのですが、この記事で取り上げられているヘッダー内のJavaScriptは、どのような働きをするものなのでしょうか？
幾つか見た他の方のテンプレートのHTMLでは見たことがないものなので、お教えいただければ幸いです。

[ 2007/04/28 03:01 ] [ 編集 ]

[ 1785 ] 有難うございました

かどりん様

早速お教えいただきまして有難うございました。
どちらも独自なスクリプトだったんですね。
道理で他のテンプレートでは見かけないはずでした。

自分では殆ど追記は使わないので分からなかったですが、そういえば此方のテンプレートを使っているブログで【続きを読む】をクリックしたら、その場で続きが開いたのでびっくりした記憶があります。

またひとつ勉強になりました。有難うございます。

[ 2007/04/29 09:28 ] [ 編集 ]

[ 2264 ]

いたおさま　いつもお世話になります。
上記を参考にMTの外部ファイル化を試みたところ、うまくいきました。有難うございます。

TBをMTから送ると、送信エラーになってしまうのは仕様ですよね？

p.s その後調べたところ、送信は難しいという情報を得ました。

[ 2007/06/20 22:36 ] [ 編集 ]

[ 3183 ] ｍ(*＿∇＿*)ｍ

エラー表示になってスクリプトが適応されていません；；

[ 2008/03/16 12:44 ] [ 編集 ]

[ 3187 ] うまくいってたのに；；

　最近開くまではうまくいくのですが　閉じるとエラーページ（FC2）に切り替わってしまうよになりました。オイラだけかなぁ？　あんなに快適だったのに　ｵﾛﾛﾝ　；；

[ 2008/03/18 21:25 ] [ 編集 ]

[ 5431 ] 少し関係ありませんが

外部ファイル化についてのことではありませんが、質問させていただきたいことがあります。

上記の緑色の文字で書かれている色付きの文字は、【続きを読む】の開閉部分ということなのですね。

続きを読むを個別記事ページに遷移させる
http://10plate.blog44.fc2.com/blog-entry-114.html
↑のようにカスタマイズした場合、緑色の文字の部分は、削除しても問題ないのでしょうか？

外部ファイル化することによって、SEO的に良いのであれば、削除した方が良いと思うのですが。。。

また、もし、削除せずにそのまま置いてある場合、ページの表示速度、不要なHTMLによるブラウザの表示への悪影響など、そういった問題はあるのでしょうか？

初心者なので、申し訳ありません。。。

[ 2009/08/13 14:21 ] [ 編集 ]

[ 5435 ] > 匿名さん

そうです。ここは追記の開閉部分で使っていたところなので、「続きを読むを個別記事ページに遷移させる」カスタマイズをしたなら不要になります。

一般的にシンプルなHTMLのほうがSEOに良いと言われているので、不要なものは削除したほうが良いと思います。

残したままでも表示上の影響はありません。

[ 2009/08/13 20:08 ] [ 編集 ]

[ 5440 ] >いたおさん

いたおさん、御回答ありがとうございます。

テンプレートをお借りしている立場でございますが、失礼ながら、この部分は削除させていただこうと思います。
申し訳ありません。

不要なHTMLを読み込ませない
http://10plate.blog44.fc2.com/blog-entry-235.html
↑の記事に「読み込みに時間がかかったり、その他よくない影響がでる可能性があります。」とあったので、疑問に思ったのですが、残したままでも問題ないのですね。

重ねて、もう1度確認させていただいてもよろしいでしょうか？
「ページの容量が大きいと表示速度に時間がかかる」とWEBのある記事で見かけたのですが、容量を軽くするために、

カスタマイズを容易にするためにあると思われる、




<div class="menu_outline3">
～

↑を↓のように

~~~~
<div class="menu_outline3">～

実際にやってみたのですが、私の気のせいか、ほんの少し表示時間が速くなったような気もするのですが、特別速くなったような感じもしませんでした。
やらなくてもよいのかと思ったのですが、それについて御意見をお聞かせいただけたらと思います。

standardバージョンを使用させていただいているのと、そんなに性能が良くないノートPCで見ているので、表示速度が気になり、確認させていただきました。

御面倒な質問で申し訳ありません。。。

[ 2009/08/14 00:04 ] [ 編集 ]

[ 5444 ] > 匿名さん

確かにコメントアウトや改行を削除すればファイルサイズは僅かに小さくなります。
ですが体感できる程表示が早くなる訳ではないのでお勧めしません。

[ 2009/08/14 01:42 ] [ 編集 ]

[ 5448 ] >いたおさん

いたおさん、ありがとうございます。
やはり、体感できる表示速度にそれほど変化がないようなのですね。
それでは、lightframeの方へ検討してみようと思います。
御無礼な質問だったかと思いますが、お許しください。
今後とも、よろしくお願い致します。

[ 2009/08/14 13:52 ] [ 編集 ]

[ 5450 ] > 匿名さん

また何かあれば聞いてください＾＾

[ 2009/08/15 00:43 ] [ 編集 ]

[ 7459 ] 参考にさせていただきました

いつもお世話になってます。

記事を読み無事動作させることができました。
トラバしましたので宜しくお願いします。