【はてなブログ】デザインテーマのCSSコードを確認する

はじめに

はてなブログの始め方をITエンジニア向けにまとめた記事にて「デザインテーマ」を利用すると良い旨を記載しました。

特定のデザインテーマを利用すれば統一感のあるデザインになりますが、慣れてくれば「このデザインテーマのこの箇所のデザインだけ利用したい」という要望もあるかと思いました。

本記事ではそういったケースでの利用方法について解説します。

デザインテーマから情報を収集する

デザインテーマを利用すると「デザイン＞デザインCSS」という箇所の冒頭に以下のような記載があります。

@import url("https://blog.hatena.ne.jp/-/theme/xx.css");
/* </system> */
/* Responsive: yes */

このURLに記載されているリンク先に反映するデザイン設定が格納されているので、ブラウザやCURLコマンドを利用すれば該当のデザインCSSは全て確認可能です。

例えばCURLコマンドを利用して情報を取得する例です。

$ curl https://blog.hatena.ne.jp/-/theme/xxxx.css
/*
Theme Name: ...
Theme URI: https://blog.hatena.ne.jp/-/store/theme/xxxx
Description: ...
Author: ...
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;-webkit-text-decoration:...

改行されていない場合は可読性を上げるためにawkで任意に改行させるのもおススメです。

$ curl https://blog.hatena.ne.jp/-/theme/xx.css | awk 'BEGIN{RS=";"}{print $0}'
...
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{line-height:1.15
-ms-text-size-adjust:100%
-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em
margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box
height:0}code,kbd,pre,samp{font-family:monospace,monospace
font-size:1em}a{background-color:transparent
...

該当箇所のタグを確認する

例えばサイドバーの「検索」や「最新記事」の装飾を変えたければそこをHTMLで確認します。

<aside id="box2">
  <div id="box2-inner">
      <div class="hatena-module hatena-module-search-box">
  <div class="hatena-module-title">
    Search
  </div>
  <div class="hatena-module-body">
    <form class="search-form" role="search" action="..." method="get">
  <input type="text" name="q" class="search-module-input" value="" placeholder="検索" required>
  <input type="submit" value="検索" class="search-module-button" />
</form>
  </div>
</div>

上記を確認しながらCSS全体を読めば、どこで何をしているのかがつかめてよりカスタマイズが可能になります。

終わりに

デザインテーマを組み合わせて自分のデザインを作りたい上級者向けの記事ですが、本記事がカスタマイズの参考になれば幸いです。