はてなブログで外部HTML・CSS・JSファイルを読み込む方法

ブログ運営
挨拶
くろやぎ
くろやぎ

どうも、くろやぎ(kuroyagikuncom)です!

この記事は約 2 分で読めます。

HTMLを外部読み込みする方法

今回は例として、「https://temp.com/temp.html」をはてなブログから読み込む方法について解説します。
はてなブログの管理画面にアクセスし、【デザイン】→【カスタマイズ】→【ヘッダ】→【タイトル下】に、次のコードを入力します。(コード内の「スクリプト」を「script」に置換してください。)

<すくりぷと>
	$(function(){
		$("#import").load("https://temp.com/temp.html");
	});
</script>

変更を保存して管理画面に戻り、【設定】→【詳細設定】→【検索エンジン最適化】→【headに要素を追加】に、次のコードを入力します。

<div id="import"></div>

今回は「import」というidを設定しましたが、HTML内の他のidと重複しないのであれば任意に設定してもらって構いません。

CSSを外部読み込みする方法

今回は例として、「https://temp.com/temp.css」をはてなブログから読み込む方法について解説します。
管理画面にアクセスし、【設定】→【詳細設定】→【検索エンジン最適化】→【headに要素を追加】に、次のコードを入力します。

<link type="text/css" rel="stylesheet" href="https://temp.com/temp.css">

JavaScriptを外部読み込みする方法

今回は例として、「https://temp.com/temp.js」をはてなブログから読み込む方法について解説します。
管理画面にアクセスし、【設定】→【詳細設定】→【検索エンジン最適化】→【headに要素を追加】に、次のコードを入力します。

<スクリプト src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://temp.com/temp.js"></script>

1行目において、jQueryを利用するために、CDNにホストされているjQueryファイルの読み込みを行っています。

0

コメント

0014185
タイトルとURLをコピーしました