【はてなブログカスタマイズ】 HTML・CSSを貼る場所

f:id:simonsnote:20170721143248p:plain
はてなブログをカスタマイズするには、HTMLやCSSを書き込む必要があります。

書き込むといってもコピペでいいんだけど、具体的にどこに貼ればいいのかを説明します。







共通の流れ

HTMLにしろCSSにしろ、ここまでは共通です。


ダッシュボードを開きます。


②「 デザイン」をクリック
f:id:simonsnote:20170721140827p:plain


③「」(カスタマイズ)をクリック
f:id:simonsnote:20170721135604p:plain



HTMLを貼る場所

HTMLを貼る場所は4箇所(+1箇所)あります。

タイトル下」「記事上」「記事下」「フッタ」、それに「サイドバー」です。

なんでサイドバーが括弧に入っているのかというとちょっと特殊だからなのですが、ひとつずつ説明しますね。


ちなみにそれぞれの場所に貼ったHTMLはこんなかんじでページの中のそれぞれの位置に対応しています。
f:id:simonsnote:20170721142919p:plain

タイトル下

ヘッダ」をクリック
f:id:simonsnote:20170721135600p:plain

「タイトル下」がありました
f:id:simonsnote:20170721135609p:plain

記事上・記事下

記事」をクリック
f:id:simonsnote:20170721135556p:plain

下にスクロールしていくと、「記事上」「記事下」があります。
f:id:simonsnote:20170721135614p:plain

フッタ

フッタ」をクリック
f:id:simonsnote:20170721135534p:plain

すぐにHTMLを記述する場所が現れますね。
f:id:simonsnote:20170721135551p:plain

サイドバー

サイドバーはちょっと特殊で、いろいろなモジュールを追加したり削除したりという形になっています。デフォルトで用意されている「プロフィール」や「最新記事」などのモジュールのほか、自分でHTMLを書いてモジュールを作成することもできます。今回はこの自分でHTMLを書いて(貼って)モジュールを作成する場所を説明します。

サイドバー」をクリック
f:id:simonsnote:20170721135523p:plain

モジュールを追加」をクリック
f:id:simonsnote:20170721135542p:plain

ポップアップが出てくるので、ちょっと下にスクロールして「  HTML」をクリック
f:id:simonsnote:20170721135538p:plain

「モード」が「HTML」になっていることを確認して、HTMLコードを貼りましょう。



CSSを貼る場所

デザインCSS」をクリックします
f:id:simonsnote:20170721135546p:plain

ここですね
f:id:simonsnote:20170721135530p:plain



カスタマイズのHTML・CSSを貼る場所は以上です。
コピペだけでもいいのですが、HTML・CSSはとっつきやすい言語なので自分で色々試してみるのも面白いですよ!
www.simonsnote.com