ブログの記事を見ていてふと気づく。最新の投稿のガジェット表示がなんだか変だと。つい最近までは問題がなく表示されていたはずなのに…。
サムネイル画像が表示されなくなっていたのです。ただ埋め込み動画のサムネイル画像だけは表示されていましたが。
最近手を加えたところで何か問題があったのかな？と思い、元に戻して確認してみますが変化はなし。バックアップを取っていれば話は簡単だったのですが、僕はブログを始めて一度もバックアップを取らずにコードをいじっていました（自業自得…）。
ちなみに最新記事の投稿ガジェットは下記のサイトのガジェットを使わせていただいています。
SNEEIT(Blogger Random – Recent – Specific Label Posts Widget – All in One Post Feed Widget)
どうしたものか。上記のガジェットをまた入れ直してみようか？と自問自答。でも画像が表示されていないだけだし…いっそ画像がないスタイルでいけば…と消極的な方向へ思考が向かう。このまま悩んでいると記事が書けなくなるな～と鬱々した気分になってきたので、いつもより早くふて寝しました。
ふて寝しながら考えました。そしてサムネイルに任意の画像を指定するコードを書き込んだらどうなるのだろうか？と思いました。
そして翌朝。さっそく記事に下記コードを追加してみました。
<img src="画像URL" style="display: none;" >
すると…画像が表示されるようになりました！ただサムネイルにカーソルを合わせたときに画像の下部にしかリンクが貼られていない状態でした。ここで妥協すべきか悩む。少しネット検索してみると領域が重なっているときに起こる症状らしいと分かりました。
そこで問題のページでChromeの開発者ツールを開き確認してみました。するとガッツリ領域が重なっていました。
こんな感じでタイトル部分の領域が画像部分の領域に重なっていたのです。そうと分かって問題のページを再度確認してみると、確かにタイトルの長い記事と短い記事で画像のクリックできる範囲が違っていました。
こういう感じの表示になるのですが、タイトルが長いとクリックできる画像の黄色の部分が少なくなっていきます。
じゃあどうすればいいのか？調べてみるとCSSのz-indexプロパティで重なりの順序を変更すればいいようです。重なりをz軸とみたプロパティのようです。参考にさせていただいたのはTechAcademyさんの重ねて表示する！ＣＳＳのz-indexの使い方【初心者向け】です。
タイトルの領域を一番下にするか、画像の領域を一番上にもってくれば問題解決です。僕は問題のサムネイルCSS部分に「z-index: 2;」と加えてみました。すると…
こういう感じに画像の領域が前面にきて画像全体がクリックできるようになりました。なんとか問題解決できました。まぁ個別の記事ごとにサムネイル設定用コードを書き込まなくてはならなくなりましたが、面倒なのでこれで良し！としました。また問題が発生したら考えよう。早めに解決できて本当に良かった。
CSSとかHTMLやらを忘れたころに不具合がでてきます。まぁ元々ブログを始めるときに少し調べた程度の知識しかありませんでしたが。良識のあるBLOGGER初心者の方はきちんとバックアップを取るように心掛けましょう！(僕は今後も取らない気がしますが…)
不具合は油断して忘れたころにきっとやってくる。
0 件のコメント:
コメントを投稿
認証キャプチャは指示された画像を全てチェック後に確認ボタンを押すと公開できるようになります。