ワクワクして働くための生産性↗向上Hacks

中小企業や個人事業で頑張る人が楽して他人の3倍成果を上げるために役立ちそうな情報を紹介しています。

はてなブログテーマのコードの入手方法

f:id:ganapati55:20170525144817j:plain

どうも。ganapatiです。

f:id:ganapati55:20170526154821j:plain

ブログのカスタマイズの準備をちょこちょこと始めています。

さて、あまりニーズはなさそうですが、はてなブログにあてたテーマを編集するために、ソースコードを全文入手する方法についてご紹介します。

自分用のテーマを作りたい人とか、カスタマイズがうまく機能しない人には役に立つかもしれません。

テーマの入手方法

テーマファイル(ソースコード)を入手するにはいくつか方法があります。

① テーマの紹介ページから

テーマの紹介ページにもしかしたらファイルのダウンロードリンクがあるかもしれません。 デモサイトがないときは特に可能性はありますね。

② テーマのデモサイトから

テーマの紹介ページの案内文の中にデモサイトへのリンクが貼られているかもしれません。 そこからデモサイトへ飛んで、探してみると見つかることが多いと思います。 デモサイトにはカスタマイズ方法などが投稿されていることが多いようです。 それらの記事の中か、フッターやサイドバーなどにリンクがあるかと思います。

③ テーマ作者のサイトから

テーマ作者の多くが「テーマを公開しました!」というような投稿をします。 ですのでテーマ作者のメインとしているブログをのぞいてみても良いでしょう。 面倒なときは記事検索してみればヒットするはず。

④ 読み込みソースから

上記①~③ですぐ見つからないようなときはこの方法を試してください。 以下やり方を解説します。

読み込みソースから入手する方法

① デモサイトかテーマをあてた自分のサイトを開く

まずはデモサイトかテーマをあてた自分のブログを表示させてください。 はてなブログのテーマは基本的にCSSとして機能するので、テーマのソースコードをどこかから読み込んでいます。 それを調べればよいわけです。 なお、開く際はGoogleChromeがおススメです。EdgeやIEでも悪くはないのですが、次に使うデヴェロッパーツールが使用できることを確認してください。

② F12キーを押してデベロッパーツールを起動する

サイトを開いたら早速F12キーを押してデベロッパーツールを立ち上げます。 画面の下部に表示されるように設定していたら、下の図のように表示されるはず。

f:id:ganapati55:20170525143621p:plain

図の中の①・②に注目してください。

③ Souceタブから探す

デベロッパーツールの左下、上記図①を拡大したのが以下の図です。

f:id:ganapati55:20170525143625p:plain

Sourceタブを選択し、読み込んでいるソースから「blog.hatena.ne.jp」を探します。

フォルダマークで「blog_style」を選択すると暗号のような英数字の羅列になっているファイルがあります。

それを見つけたら選択してください。

④ 該当ソースコードをコピペ

選択すると前々図②の部分にファイルのソースが表示されます。

f:id:ganapati55:20170525143631p:plain

表示されたソースを取りあえず全部選択してコピーしちゃいましょう。

これがテーマのソースになります。

ただし、テーマによってはこのままでは非常に使いにくい状態です。容量を少しでも減らすためにminifyという処理がなされていて1行にすべて集約されてしまっています。

このままテキストエディタにペーストしても使いにくいだけです。

⑤ コードの整形ツールで整形

そこで、コードの整形ツールを使います。

実際に使うと以下のように整形されます。

f:id:ganapati55:20170525143636p:plain

このようなツールはいくつもありますが、今回使用したのは以下のサイトです。

syncer.jp

整形したら整形後のコードをコピーしましょう。

⑥ Bracketsなどのエディタでシンタックス表示

前のステップでコピーしたものをメモ帳のようなものにペーストして編集しても良いのですが、初心者ほど何が何だかわかりにくくて苦労します。 入力補助機能のあるエディタにペーストしてCSSファイル(.style)として保存すると以下の図のようにわかりやすく表示されます。

f:id:ganapati55:20170525143640p:plain

このようなツールは色々ありますが、ちょうどよいツールとして私はBracketsをお勧めします。

AtomとかSublimeとかいろいろありますけど、ほんと丁度良いんです。 brackets.io

⑦ 余裕があれば説明をコードに補記

最後に余裕があればブログのどの部分に関するコードなのかざっくり説明を入力していくと良いです。

/*説明文・コメント  */

を適当な箇所(ソースの分かれ目)に入力するだけです。

いかがでしょう?

参考になりましたら幸いです。