はてなブログのCSSをGitHubで管理するための手順書

はてなブログのCSSをGitHubで管理するための手順書

はてなブログのCSSを編集する時にどんな編集方法をしていますか?設定ページのデザイン項目からCSSを表示させ、その上で修正?または、表示させたCSSをコピーしてテキストエディタで編集してから貼り付けをして編集?
はてなブログのCSS修正を行うPCが1台だけであれば、これで事足りるかもしれません。

しかし、わたしの様にノートパソコンで修正する時もあればデスクトップPCで修正する時もある。なんならネットカフェで修正するかも・・・?といった風に最近では複数のPCから単一のソースに手を加えることが当たり前になっています。

その時に、活躍するのがGithubです。
GitHubでCSSを管理すると複数PC利用時にメリットが大きかったので、ご紹介します。

こんにちは、最近GitHubを覚えて嬉しさのあまり、はてなブログのCSS管理をはじめた、らいか(id:sakanatech)です。

 

GitHubで管理するってこういうこと

簡単に図にしてみました。

はてなブログのCSSをGitHubで管理するための手順書

言葉の通りで、はてなブログの設定ページのデザイン項目の中に書き込んでいたCSSをGitHub上で管理して、その管理しているソースコードを

@import

を使って呼び出して利用します。

そうすることで、CSSを修正したい時にいちいち、設定ページのデザイン項目を開いてCSSをコピーして、また貼り付けて…といった作業が不要になり、
GitHubに対してpush(登録)することで、はてなブログのデザインを修正することができるのです。

 

GitHubで管理すると嬉しいコトがある

もっと考えれば出てくるかな?とも思いますが代表的には3つあります。

  1. 編集履歴が残せる
  2. 端末に縛られずにCSS修正が出来る
  3. カスタマイズコードを綺麗に公開できるGistが利用できる。

 

編集履歴が残せる

もはや有名ですが、GitHubといえばファイルのバージョン管理を行うことができるサービスです。過去のCSS修正についてもバージョン管理が出来ることで、後々に表示が崩れてしまった時や、何か大幅な修正を加えようとした時に過去の修正情報が残っているとそれを参考にすることが出来ます。

複数ファイルに分かれていなかったり、ページ数としては少ない小規模なコードであるため通常の更新履歴を保持するメリットと比べると弱いですが、やはり何かあった時に手軽に戻れることのメリットは大きいです。

 

端末に縛られずにCSS修正が出来る

複数端末で作業を行っている時は、どちらかの端末にしかコードが存在しないので異なる端末では最新版のコードを持っていない!といった問題を解決することが出来ます。

ソースコードをクラウド上の1箇所で管理できることは、どの端末からでも平等に(pushされていれば)最新版のコードを参照・編集することが出来るため、これ以上ないメリットとなります。

 

カスタマイズコードを綺麗に公開できるGistが利用できる

厳密に言うと誰でもGistは利用できるのですが、わたしの様に自分でテーマを作ったりしている方にとってはブログテーマのカスタマイズ例を紹介する機会があります。その時に”はてな記法”のシンタックスハイライトでも良いのですが、もっと美しくソースコードを表示・共有する手段としてGitsが有能で、そのGistとの連携を容易に行うことが出来るため、GitHub上で管理しておくことのメリットは大きいです。

 

CSSをGitHub上で管理するための手順

CSSを管理するための手順について、今回はWindowsをベースに書いていきます。Macは既にGitが利用可能なのでGitコマンドを打ち打ち始めた当りから参照してもらえればと思います。

 

Gitを始めるためのインストール

  1. git for Windows

のみです。この「git for Windows」のGitBASHというものを使って、GitHubにCSSを登録します。

git for Windowsの公式サイトから、インストーラをダウンロードしてインストールを行います。特にインストール時に気をつける事は無く、途中のオプション選択項目もデフォルトのままで問題ないです。「GitBASH」にさえチェックが付いていれば他の問題はありません。

はてなブログのCSSをGitHubで管理するための手順書

 

GitHubアカウントの取得

特に手順書化するほどでもないので、ざっくりと割愛しますが、ユーザ名・メールアドレス・パスワードを設定して新規にアカウントを取得します。GitHubは登録するリポジトリを公開することで無料で利用することが出来ます。

https://github.com/

 

新規リポジトリの作成

GitHubのアカウントを取得したら、はてなブログのCSSを保存するリポジトリを新規に作成します。

GitHubのトップページから「New repository」を選択し、以下の様に入力をしてリポジトリの作成を行います。

はてなブログのCSSをGitHubで管理するための手順書

 

GitHubにpushする

ここから、GitBASHを使って黒い画面と戦い始めます。
流れとしては、以下の様になります。

  1. 新規リポジトリとローカルフォルダの紐付けを行う
  2. ローカルフォルダにCSSファイルを作成する
  3. CSSファイルをpushしてGitHub上に登録する
  4. RawGitからCDN用のURLを取得する
  5. はてなブログに設定する

手順が細かくなりますが、使っているコマンドとしては数が少ないのでもう一息です!

 

新規リポジトリとローカルフォルダの紐付けを行う

先ほど作成した新規リポジトリとローカルフォルダの情報を紐付けるためにCloneコマンドでgitの紐付け情報をダウンロードします。
取得してくるモノは、「.git」という隠しフォルダと隠しファイルでこのファイルには、リポジトリとローカルフォルダを紐付ける情報が格納されています。(厳密にはその他にも色々入っていますが…)

はてなブログのCSSをGitHubで管理するための手順書
cd ◯◯◯
git clone git@github.com:●●●/hatena-css.git

◯◯◯には、CSSを保存するフォルダパスが入ります。
●●●には、ユーザ名が入ります。

 

ローカルフォルダにCSSファイルを作成する

通常のWindowsのファイル操作で問題ありません。はてなブログで現在利用しているCSSをコピー&ペーストして、先ほど 「 git clone 」を行ったフォルダと同階層にCSSファイルを配置してください。ファイル名は特に制約はありません。

 

CSSファイルをpushしてGitHub上に登録する

GitBASHに戻ります。

git add -A
git commit -m "FirstCommit"
git push -u origin master

このコマンドで、作成したCSSファイルをコミットし、GitHub上に登録することができました。

 

RawGitからCDN用のURLを取得する

GitBASHでの操作は完了しましたので続いて、RawGitからCDN用のURLを取得します。
GitHub上に登録されたCSSはソレ単体で、一意なURLを持っているのですが、そのURLに対して

@import

を行っても、CSSファイルとして正常に認識されないためはてなブログで上手く読み込むことが出来ません。その問題を解決することができるサービスがRawGitで、はてなブログから読込が可能な形式としてファイルを提供してくれます。

https://rawgit.com/

RowGitにアクセスし、GitHub上に登録したCSSのURLを貼り付けます。

貼り付けると自動的に、はてなブログで読込を行う用のURLが左側のテキストエリアの中に出力されますのでそのURLをコピーします。

 

はてなブログに設定する

取得したURLをはてなブログに設定します。
設定画面のデザイン項目からCSSを選択し、以下を設定します。

@import url(https://cdn.rawgit.com/●●●/hatena-css/master/hatena.css);

/*
  Theme: Raigyo
  Author: lyca
  Description:
    はてなブログ「SakanaTech」で利用しているオリジナルテーマCSSです。
    http://www.sakana.tech//
  Responsive: yes
  Licensed under the MIT license.
*/

この時に注意しなければならない点が1点あります。
はてなブログの設定でPC用とスマートフォン用のCSSを分けていない場合(=Responsive)は、「 Responsive: yes 」の記述を直接、デザインCSSの項目内に設定する必要があります。

これで、問題なくはてなブログで使用するCSSをGitHub上で管理することが出来るようになりました。

 

まとめ

GitHub上で管理することで、いちいちはてなブログの設定画面を開くことなくCSSの修正が行えるようになるので微修正など細かな修正が行いやすくなります。また、複数PCで管理を行っている場合でのメリットも大きいので、Gitを既に使える方やはてなブログのCSSを自分でカスタマイズしようと思われている方はぜひチャレンジしてみてはいかがでしょうか?

 

今後の課題

多少便利になったとはいえ、まだまだ不便だなと感じる所が2つあります。

  1. CSSの見通しが悪い
  2. 改行スペースが多くファイルサイズが大きすぎる

この問題を解決するためには、SassやLessの様なCSS拡張メタ言語を導入する必要がありそうなので、これについても順次対応を行って
はてなブログのCSSファイルは圧縮した形式で公開してファイルサイズを削減したいと思います。
また、ブログのパーツやページ種類ごとに拡張CSSファイルを分割して管理しておけば、今後のメンテナンシビリティも相当向上するんじゃないでしょうか。

 

らいか
まずは身近なところからGitHubを使い始めることでGitを習得することが出来るようになるんでしょう。
はてなブログのCSSをGitHubで管理するための手順書

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて"Webのものづくりの楽しさ"に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。