mamakokoro

ココロなるままシンプルライフ

はてなブログのカスタマイズを一からやってみたくなった、1日目

f:id:asdf0202:20170511124833j:plain

ブログをやりだすと、テンプレートを自分好みにしたくなりませんか?

テンプレートストアでは無料でテンプレートをインストールできるのですが、
いちから自分で作ってみたくなりました。

まずは1日目。やったことはこちらです。

はてなブログのカスタマイズを一からする手順

①まずは、はてなブログ公式ヘルプの「制作の手引き」をチェック

help.hatenablog.com


どういうながれで新たにテンプレートを作っていけるのかが書いています。
一通り読んで、流れを把握しました

②サンプルエントリーをコピペ

つぎに、いろんなタグを網羅しているサンプル記事のソースが下記においています。

サンプルエントリー - はてなブログ ヘルプ

こちらをコピペして、自分の記事に投稿

③テンプレートのサンプルCSSをコピペ

つぎに、もとになるCSSを下記からコピペします。

Hatena-Blog-Themes/boilerplate at master · hatena/Hatena-Blog-Themes · GitHub

↑のページからboilerplate.cssをクリックするとでてきます。

レスポンシブデザインにしたい時は

③の、もとになるCSSにタグを追加します。

私は22行目ふきんに追加しました。

/* Responsive: yes */

④ ③でコピーしたCSSを自分のブログのデザインCSSに貼り付けます。

デザインCSSの場所は、
メニュ>デザイン>カスタマイズ>デザインCSS(一番下にあります)


これで、カスタマイズの準備が完了!あとはCSSをいじるのみです!