ジョー・ヒタギの止リ木 | 「ものづくり」や「ものなおし」をするブログ

色々なものを作ったり直したりするブログです。主な話題は日用品・電子機器・エアガンなど。

ジョー・ヒタギ の 止リ木

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

f:id:Jo-Bitaki:20200222133035j:plain:h300

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

この記事の内容は私のような初心者向けであり、おそらく上級者にとってはいまさらなことばかりかと思う。

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

www.joe-hitagi.com

HTMLとCSSの基本

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

www.ituore.com

トラブルシューティング

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

CSSデザインがうまく反映されない

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

プロパティの順序が悪い

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

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

f:id:Jo-Bitaki:20191012231354p:plain

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

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

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

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

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

f:id:Jo-Bitaki:20191012231357p:plain

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

デザインテーマのCSSが残っている

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

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

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

参考サイト:

www.myfirstclasstrip.com

コードに誤りがある
  • セミコロン(;)とコロン(:)の見間違え
  • パラメータ名のタイプミス
  • かっこ {} の閉じ忘れ

などの可能性がある。

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

jQueryのスクリプトが動かない

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

macoblog.com

ボタンがiPhoneのSafariで動かない

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

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

qiita.com

記事本文に入れたFont Awesomeが消える

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

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

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

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

f:id:Jo-Bitaki:20191012231301p:plain

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

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

変更したいパーツのプロパティ名が分からない・思った通りに変更できない

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

Firefoxの場合はページの調べたい部分の上で右クリックし、「要素を調査」を選択すると詳細な情報を取得できる。

f:id:Jo-Bitaki:20191016221154p:plain

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

ほかにも

  • プロパティの無効化
  • 値の変更
  • プロパティの追加

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

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

*1:"Non-Breaking SPace"の略。改行なしの空白を意味する。出典:&nbsp; は半角スペースではないというお話 (フェンリル | デベロッパーズブログ)