MENU

【Blog】はてなブログのCSS/JS/HTMLを外部参照する方法

css-html-js-external-references

ちゃんとカスタマイズを理解するべく、検証用のはてなブログを一つ作成しました。

違うテーマを選び、改めて一からブログカスタマイズすると、新しく理解することも多いです。

プラス。コードの整理も兼ねて、GitHubから外部参照するように現在試行錯誤中です。

はてなブログのCSS/JS/HTMLを外部参照に関するメモです。

CSSの外部参照方法

こちらは以前書いたとおりです。

【Blog】はてなブログのCSSをGitHubから外部参照する方法 - CGメソッド

<link type="text/css" rel="stylesheet" href="https://[ユーザー名].github.io/[ファイル名].css">

という記述から参照してます。

CSSの外部参照の補足

もともとのテーマで使用しているデザインCSSの部分はそのままにすることを推奨します。

それ自体も外部参照することはできるのですが、参照先を参照するので、CSSの反映が非常に遅くなってしまします。

JSの外部参照方法

Javascriptの外部参照方法です。

よくコピペして使用している、カスタマイズのコードと同じ構造です。

<script src="https://[ユーザー名].github.io/[ファイル名].js"></script>

JSの外部参照の補足

読み込み順番に気をつけましょう。

jQueryの参照方法

下記のようなコードが最適です。一番最初に読み込むこと

参照先はGoogleが一番安定感あります。

<!--[if lt IE 9]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/jquery/1.12.4/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--<![endif]-->

HTMLの外部参照方法

下記のコードのようにHTMLを読み込みます。

<script>
$(function(){

    <!-- $("#ID名1").load("https://[ユーザー名].github.io/[ファイル名].html");-->
    <!-- $("#ID名2").load("https://[ユーザー名].github.io/[ファイル名].html");-->

});
</script>

使用するときははてなブログのHTML欄に

<nav id="ID名1"></nav>

<div id="ID名2"></div>

というように記述して使用します。

参考

HTMLの外部参照の補足

ページが読み込みより先に、ナビゲーションメニューのjQueryが実行され、機能しなくなることがありました。

読み込み順を上手く調整すれば、機能したかもしれませんが、なかなか上手くいかなかったので、この部分だけHTMLを記述して回避しました。

まとめ

ということであらかた外部参照できましたが、はてなブログに記述した分もGitHub等でバックアップとることをおすすめします。