こんにちは、九條です。
今回はブロガー向けの記事なのですが。
僕がやっているはてなブログを始め、FC2やAmebaなど、レンタルブログサービスを利用している場合は、HTMLやCSSの知識が何もなくてもブログを始められるのが利点ですよね。
とは言え自分好みにブログをカスタマイズしたい人は多いと思いますし、ある程度他のブログとの差別化をしたければ、HTMLとCSSをいじることは避けられないです。
元々知識ある人であれば問題ないでしょうけど、多くのブロガーは「HTMLとCSSって何ぞや？」という状態ですよね。
僕は学生時代にHTMLの基礎を勉強したことがあるため、少しだけなら分かるんですが、ブログのカスタマイズレベルになると、もうさっぱり。
でもみんな、自分のブログをきちんとカスタマイズしていると思います。ちゃんとHTMLとCSSを勉強しているんだろーなーって思うじゃん？
ぜんぜんわからない。俺たちは雰囲気でCSSをいじっている。
コピペコピペコピペ
ありがたいことに、ネット上にはブログをカスタマイズするためのHTML・CSSコードを掲載してくれているサイトがいっぱいあります。
僕のような知識のない人たちは、そういったサイトからガンガンコピペして、コードや内部処理がよく分からないまま、雰囲気で自分のブログを構築しているのです！
ただ問題となるのは、コードをコピペしていくと、他のコードと競合して想定外の動作をすることがあるんですよね。
知識があればすぐに「あーこれいじったことで、こっちのコードをここ直さないとなー」って解決できると思うんですけど、コピペ魔人の僕たちはそんなわけにはいきません。
いったい何故想定外のレイアウトとなってしまうのかさっぱりだし、他のコードを修正しようにも、どこをどういじればいいのか全然わかんない。
そしてどのコードがなんのためにあるやつかも覚えてないので、下手にコードを消すこともできなくなるという……。
雰囲気でやるのもいいけど、本当はきちんと勉強しないと、コードが乱雑になりすぎて取り返しがつかなくなるかもしれないので注意ですね！
ヘッダー画像の設定がうまくいかない！
ここからはただの愚痴です。
現在作っているサブブログのカスタマイズをやっているところなんですが、全然うまくいかなくて終わんない！
ほぼカスタマイズできたところなんですけど、ヘッダー画像の設定だけが何故かできないんですよねー。
画像の表示はできますが、PC・スマホともに、毎回ページを切り替える度にヘッダー画像を読み込んでいるみたいで、その上ヘッダー画像の領域分のスペースを事前に確保してないから、画像が表示されるとページ全体が下にがくっとずれるという、ちょっと不格好な動きをします。
このブログでは、ブログを開いた最初は上記と同じ動きをするんですが、ページを切り替えるときはヘッダー画像は表示され続けている（一度画像が消えて再表示されるような動きを見た目上していない）んですよ。
ブログテンプレートも一緒で、設定も同じのはずで、CSSなどを全部初期状態にしてもうまくいかないので、完全にお手上げです＼(^o^)／
このブログのヘッダー画像を試しにサブブログで設定してみたら、PC・スマホ共に正常に動作しました。
おそらく、こちらのブログのヘッダー画像ははてなブログのキャッシュに保存されるので、読み込みが速くてカクカクずれないのだと思います。
別の画像をはてなフォトライフに上げて試すと、画像がキャッシュに保存されず、ページを切り替える度に一から画像を読み込み直しているみたいで、そのせいでヘッダー画像の表示が遅くなっているみたいです。
なんだかこちらの問題ではなく、はてなブログ運営側の不具合な気がしてきたので、はてなブログに問い合わせてみました。
とりあえず返信がきたら追記したいと思います～。
7/16追記
はてなブログからの回答はまだですが、ヘッダー画像の件、解決しました。
やはり原因ははてなフォトライフだったようで、ヘッダー画像をGoogleフォトにアップロードして、Googleフォトから参照するように変更すると、正常に動作しました。
はてなフォトライフの仕様が変更されたのか、最近はてなフォトライフにアップロードした画像はかなり重たいんですよね。キャッシュを読み込もうとしてエラーになっているみたいです。
いずれはてなブログ側が修正するかもしれませんけど、現状はGoogleフォトの方が画像の読み込みが断然速いので、こちらを使う方がいいのかもしれません……。少なくともヘッダー画像は毎回読み込むと重いので必須ですね。
はてなフォトライフの画像の読み込みがおかしいことを調べてくれた五条ダン (@5jDan) さん、ありがとうございました！