【はてなブログ】HTMLとCSSのトラブル対処法のまとめ

私が遭遇したHTMLやCSSの不具合と、その対処法をご紹介する。

この記事では、初心者の方にも分かりやすいように丁寧な説明を心がけた。
また、参考になるサイトを厳選して示してもいるのでぜひご覧いただきたい。

ブログのカスタマイズについては別の記事も参考にしていただきたい。

HTMLとCSSの基本

コードの意味や構造などの基本的な内容については、下のサイトで分かりやすく解説されている。

ここからは今までに発生した不具合とその解決法について述べる。

CSSを記述しても見本の通りに表示されない場合、次のような原因が考えられる。

この場合はプロパティの記述順序を変えればうまくいく。

例えば下のような見出しを作りたい場合。

以下のコードなら正常に表示される。

.entry-content h4 {
padding: 0.2em 0.5em;
font-size: 20px;
color: #111111;
border-left: 6px solid black;
border-bottom: solid 3px black;
}

しかし、以下のようにborder-leftとborder-bottomを入れ替えたコードの場合、

.entry-content h4 {
padding: 0.2em 0.5em;
font-size: 20px;
color: #111111;
border-bottom: solid 3px black;
border-left: 6px solid black;
}

下のように左端の縦線が表示されなくなってしまう。

CSSは後に書かれたものが優先されるため、記述の順序が重要である。

変更したい要素に関するコードがすでにデザインテーマに記述されている場合、それをあらかじめ無効化しなければデザインがうまく反映されないことがある。

例えば大見出しのデザインテーマを無効にする場合は次のように記述する。

.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

参考サイト：

などの可能性がある。

CSSはコードに誤りがあってもエラーを吐かずに黙って無視するので間違いに気づきにくい。

スクリプトで記述したボタンが表示されないことがあったが、jQueryの最新バージョンを読み込むようにしたら治った。

当ブログで使用している「上に戻る」ボタンが、当初iPhoneでは動作しなかった。ボタンをタップしても何も反応が無いのである。

下記サイトの「空のイベントハンドラを指定」を試したところ、すぐには治らなかったが一晩経ったらいつの間にか治っていた。対処法が効いたのか、それともデザイン変更の反映に時間がかかっていただけなのかは不明。

以下のサイトに従い、iタグの中に ¹を入れると回避できる。

<i class="アイコン">&nbsp;</i>

はてなブログでは空のタグが自動的に削除されるため、iタグの中に何もなければアイコンが消えるらしい。そこで、改行なしの空白を指す をタグの中に入れてやれば空とはみなされず、削除されなくなるとのこと。

 の代わりに、HTML編集画面にて・と表示されるもの（空白文字だろうか？）を入れてもうまくいった。

見た目がすっきりするのと、強調表示されて見やすいため私はこちらの方法を取っている。

ちなみに ははてな記法でも使えた。これに限らず、はてな記法ではたいていのHTML表記がそのまま使えるようだ。

検索してもなお不明の場合、最終手段はブラウザでページのソースを調べることである。

Firefoxの場合はページの調べたい部分の上で右クリックし、「要素を調査」を選択すると詳細な情報を取得できる。Chromeの場合は右クリック→「検証」で類似の機能が使える。

無効になっているプロパティには取り消し線が表示される。

ほかにも

といったことをリアルタイムで操作でき、ページのデザインがどのように変化するかをその場で調べられる。

この機能はデバッグ時に重宝するし、ほかのブログで使われているデザインや色を調べたいときにも便利である。