GitHubを利用して、CSSを外部から参照するようにしました

f:id:kyobate24:20150721222054j:plain

こんにちは、京終です。

昨日、チルド（id:cild）さんが「はてなブログ・アンドロイド部」の創設を宣言されました。

取り上げていただき、ありがとうございます。

元は「はてなblogコピペできんぞゴルァ問題」に対し、Habit blowserを使えば1行だけですがペーストできることをお伝えしたのが始まりでした。

しかし、CSSをメンテナンスする度に1行にまとめたり、ブラウザとテキストエディタを何回も往復するのは大変です。何とか楽にならないかと考え、CSSを外部から参照する方法が良さそうなので、今回GitHubに利用し、私のブログで試してみました。

※設定を変更する際は、必ずバックアップを取ってから行ってください。

id:himaratsuさんのブログを参考にさせていただきました。

上記ブログの1～3までを設定し、GitHub Pagesが作成できればだいじょうぶです。独自ドメインはお好みで。

次に、作成したリポジトリに移動し、{organization_name}.github.ioの右側にある「＋」をタップします。

f:id:kyobate24:20150814145142j:plain

そうすると、ファイルの編集画面になりますので、ファイル名やCSSを入力し、保存します。

f:id:kyobate24:20150814145640j:plain

現在このブログで使用しているCSSがこちらです。

設定後は、ブログの管理画面からCSSを編集することがなくなり、GitHubの方を修正すればいいだけになるので、コピペも可能になり、作業が楽になると思います。

linkタグを使って、外部のCSSを参照します。スマホの編集エリア（記事上など）に追加してください。

<link rel="stylesheet" type="text/css" href="https://{organization_name}.github.io/{file_name}">

このブログの場合は、以下のようにして追加しています。

<link rel="stylesheet" type="text/css" href="https://kyobate24github.io/hatena.css">

PCの方は、「デザインCSS」に@importを使用して追加するのでしょうが、何故かうまくいかなかったので、同じようにしてフッタに追加しています。

設定を変更する前には、バックアップをお忘れなく。

カラモモ日記。