読者です 読者をやめる 読者になる 読者になる

CGメソッド

CG制作に関してのヒント

MENU

【Blog】はてなブログのCSSをGitHubから外部参照する方法

はてなブログのCSSは見づらいですし、手動でバックアップを取ってないと以前の状態に戻したくても戻せなかったりします。

GitHubから外部参照すれば、バックアップにもなりますし、以前の状態にもすぐに戻すことができます。

GitHubから外部参照する方法

  • アカウントの作成(詳細は割愛)

  • ページ(GitHub Pages)の作成

[ユーザー名].github.ioというリポジトリを作成。

f:id:min0124:20170321004247p:plain

  • Create new fileから[ファイル名].cssファイルを作成。はてなブログで使用しているCSSをコピペ。

f:id:min0124:20170321004251p:plain

  • はてなブログで外部参照のコードを入力

デザイン>カスタマイズからヘッダのタイトル下にコードを入力

GitHub Pagesに作成したCSSのリンクを入力すること。

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

f:id:min0124:20170321004820p:plain

さらに今まで使っていたでデザインCSSは空白に

  • CSSが反映されているか確認

CSSが即座に更新されるので、ブログのデザインがおかしくないか確認して変更を保存するボタンを押して更新します。

※ちなみにデザインCSSからの外部参照は上手く行きませんでした。

@import "https://[ユーザー名].github.io/[ファイル名].cs";と入力しても反映されません。

(もともとのテーマのCSSは反映されますが、GitHubはうまくいかない)

感想

外部参照は反映に時間がかかったりするかと思ってましたが、即座に反映されます。(そもそも使用しているテーマのCSSも外部参照)

コードも見やすいですし、バックアップもされて安心です。

ちなみにこのブログのCSSは汚いのであしからず。その場しのぎのものが多いです。

CSSを一から勉強して凝りたいのですが、おそらくその時間は捻出できないと思います。

参考

GitHubを利用して、CSSを外部から参照するようにしました - カラモモ日記。