はてなブログのデザインを調整する

やろうやろうとおもって面倒くさくてやってなかったことと、過去に対処したことを記録しておきます。

Google Adsenseの背景黄色をなくす

Google Adsense（Googleの広告）で、広告枠と実サイズが異なる場合に空いた部分の背景色が黄色になってしまうことがあります。まぁ実害はないのですが見た目的に目に飛び込んでくる色なので、広告として主張し過ぎになりますよね。これを透明にするには、下記の手順でCSSを上書きする設定を追加します。

はてなブログの管理画面を開く
デザインを選択
左のサイドバーにあるスパナアイコンのタブを開く
一番下の「{} デザインCSS」を選択
テキストエリアを選択し、適当な行に下記のコードを貼り付けて変更を保存する。

ins.adsbygoogle { background: transparent !important;}

この方法は下記のサイトで紹介されていました。

www.blogging-life.com

記事とサイドバーの幅を変える

こちらのはてなブログは、「Report」という公式テーマを使っているのですが、どうも本文の横幅が狭く、ちょっと込み入ったことを書くとぎゅうぎゅうになってしまいます。また、右横のサイドバーも広告等を入れるにはちょっと幅が狭いという違和感を持ってました。これもCSSを調整することで変更できました。現在、本文とサイドバーを合わせたエリアの横幅を980ピクセル（px）、本文715ピクセル、サイドバーは250ピクセルに変更しています。これも手順は上記の広告背景透明化と同じで「{} デザインCSS」の入力テキストエリアに、下記のコードを追記するだけです。

#container {
width: 980px;
}
#main
{
width: 715px;
}
#box2 {
width: 250px;
}

こちらについては下記のブログに紹介されていた方法を参考にしました。

jomasafumi.com

また、テーマごとの初期CSSは、上記のコードを追記したCSSテキストエリアのおそらく前半に下記のように書いてあります。

@import "/css/theme/report/report.css";

この「/css/theme……」の部分を、自分のブログのトップページURLの後に繋げて「https://www.backyrd.net/css/theme/report/report.css」のようにすれば直接見ることが出来ます。もともとどうなっているのかを読み解く場合に参考にしてください。

それからはてなブログのCSSで登場する各部分の名称や設定については、はてなブログテーマ「Plain」に関する公式ブログで説明されているので、カスタマイズされる場合はこちらも参考になるかもしれません。

theme-plain.hatenablog.com

記事とサイドバーの幅を変える / 補足

この設定内容ですが、テーマによってはCSSのID（って言うのかな？#で始まる名称）が異なるようです。たとえば「Afternoon」というテーマの場合、containerではなくcontent-innerが外枠サイズになるようでした。具体的にそのテーマにおけるID名、どれがどこの設定にあたるかは、先に書いたCSS内容を見る方法で確認して少し試行錯誤する必要がありそうです。ご注意を。

見出しを元にした自動目次をページ冒頭に表示する

ページを「1記事のみ」で表示した際に、はてな記法で「**（アスタリスク2個）」による見出しを設定していると、それが2個以上あれば目次を表示するように設定しています。具体的には下記の過去エントリーに記載しているので必要であれば参考にしてください。もともとは別のブログの受け売りだったのですが、元ネタが閉鎖されてしまったようです。なお、はてなブログには目次を挿入するタグもありますが、こちらは何も入れなくても勝手に作られるのと、多少は見た目が綺麗になってますのでお好みで利用してください。

www.backyrd.net