HBK

はてなブログのカスタマイズにハマりいろいろまとめています!

【はてなブログ】テーマ『Spirea』のカスタマイズ!このサイトのカスタマイズを一気にまとめて紹介!


スポンサーリンク

はてなブログテーマ

『Spirea』

カスタマイズまとめ

 

 

このサイトのカスタマイズを一気にまとめて紹介!

変更したら追記します!

テーマ変更や大がかりな変更の場合は新規投稿で!

テーマを変えることはないと思うけど。

このテーマ気に入ってるから!

 

 

使っているテーマ

 

 

はてなブログのテーマ『Spirea』

 

 

ダウンロードはこちらから

Spirea - テーマ ストア

 

 

テーマ『Spirea』の作者のサイトはこちらから

www.ituore.com

 

ヘッダー

 

高さ

 

 

上下にライン

 

 

 

タイトル

 

フォント

 

 

文字大きさ

 

 

センタリング

中央寄せ

 

 

フォント

 

 

色変更なし

 

 

トップページ

 

 記事一覧に飛ばす

 

 

 

トップページのSNSボタン消す

 

 トップページのカスタマイズ 【はてなブログ カスタマイズ】 - bunoshi

 参考にさせていただきました!

 

グローバルメニュー

 

 

 

 

 

 

記事中の文字

 

フォント

 

 

大きさ

 

 

見出し

 

h3→h2 変更

h4→h3 変更

h5→h4 変更

 

文字の大きさ変更

 

見出しデザイン

 

 

h2

 

 

 

h3

 

 

 

h4

 

 

 

 

 

サイドバー

 

設定

 

追加する項目

  • 最新記事
  • アクティブ

 

削除する項目

  • リンク

 

 

文字の色

 

 

 

SNSボタン

 

 

 

一番下固定

 

 

 

カテゴリー

 

 

カラー

 

 

 

Googleアドセンス

 

サイドバー

 

サイドバーは特にコードは必要なくスポンサーリンクの文字も入れられる。

 

貼る場所

 

デザイン→カスタマイズ→サイドバー

 

モジュール追加→HTML

→上のスペースに「スポンサーリンク」と入力

→下にGoogleアドセンスのコードをそのまま貼り付ける

 

 

あとはカーソルを合わせて好きな位置に移動!

 

 

 

記事上にGoogleアドセンスを貼る

 

「/* ここに入力 */」は全部消してOK。

わざと1行空いてます!お好みでどうぞ!

 

貼る場所

 

デザイン→カスタマイズ→記事→記事上

 

 

記事下に2つGoogleアドセンスを貼る

 

スポンサーリンクの文字を小さくして中央寄せにしたHTMLコード。

「/* ここに入力 */」は全部消してOK。

アドセンスコード入力したら改行して2つ目のアドセンスコードを入力してね!

 

貼る場所

 

 デザイン→カスタマイズ→記事→記事下

 

 

文字の入れ方コード

 

 

中央寄せコード

 

 

文字の大きさコード

 

 

スマホで気になるところ

 

基本レスポンシブだから気にならない。

無料版でもスマホデザイン繁栄されるからレスポンシブがおすすめ。

 

 

 

まとめ

 

 

 

 

さいごに