編集

Bloggerテーマを可愛いF-light (エフライト) に変更 問題点解消に四苦八苦

2022/10/23
BloggerテーマF-light

ずっと放置状態だったブログですが...テンプレート(テーマ)をBlogger公式Emporioから今年8月公開の新しいテーマF-light (エフライト) に変更してみました。『ふじやん』さんの作品です。デモサイト

追記:アナリティクスに『ヒットを受信していません』の通知が...(記事末に記載)

テーマF-lightの使用感

可愛いテーマだなぁ...と思って1ヶ月くらい前だったかダウンロードさせていただいた。その時は、まだヘッダーに記述が残っていたり、スマホで見ると画面にブレがあったりで使用を断念していました。
その後、どんどん更新されているようで今回使用してみました。ver.1.23です。

追記10.16:ver.1.25に更新しました。
(投稿プレビューがダークモードで表示されるようになった...ライトモードで表示したいが...慣れかなぁ)

テーマF-lightを選んだ理由

  • 速度が速い(モバイルで100は凄い)
  • カスタマイズの必要がないほどデザインが完成されている
  • タブレット・スマホ表示がとても見やすい
  • 目次が表示される(見出し3つ以上の場合?)
テーマF-light
BloggerテーマF-light

上がiPad表示で、下がiPhpne表示(記事下部分)です。
欲を言えば...記事本文で、モバイル画面のギリギリまで文字が表示される。あとわずか余白があると視認性が上がると思うのですが。あとわずか... 幅の狭いスマホもあるから無理かなぁ...

追記:さっそく改善されており、スマホ表示の視認性がグンとアップしました。凄い!

残念な部分:画像上下の余白が広すぎる

真っ先に目につくのが画像周辺の余白です。特に画像下の余白が他のテーマより広い。。
デモサイトでも同じ余白なので、これがスタンダードなんだろうなぁ...

追記:御覧のとおり、画像上下の余白もすでに改善されています。↓

これがBlogger公式テーマEmporioの画像下の余白↑(画像上の余白も狭い)

画像下の余白

こちらがテーマF-lightの画像下の余白↑(画像の説明を入れるにしても距離が遠い...😥)

サイドバーのデザイン崩れ(このブログ特有の問題発生)

新しいテーマを設定して『可愛いな~』とご満悦だったのですが...2ページ目やカテゴリページ表示時にサイドバーが1/3程しか表示されないことに気づいてしまった...😂
デモサイトに問題が無い…ということは、このブログに問題あり。。

このブログ特有のエラー

  • 特定のページでサイドバーが1/3程しか表示されない。
  • 3記事だけリンクが機能していない(記事を見れない)。
  • 記事一覧10記事のうち特定の位置以降、記事抜粋部分が太字で表示される。
テーマF-light

過去に他のテーマでサイドバーが右横ではなく記事下に表示されることがあった。テーマのデザイン崩れは『divタグ』や『bタグ』などが影響していることがある。探し出すのは至難の業。

結論:リンクが機能していない3記事に問題あり

Blogger公式テーマEmporioではデザイン崩れが起きなかったのにテーマF-lightでなぜ起きたのか... Emporioの記事一覧にはタイトルしか表示されないからかな。本文の『bタグ』が記事一覧の記事抜粋部分に影響した?

Bloggerブログでフッターやサイドバーなどの文章が太字や斜体に変わる原因を突き止めた

3記事だけタップしてもリンクが機能せず記事を見ることもできなくなった。不思議なことに『関連記事』に表示されるリンクだけは機能した。そう関連記事にはタイトルしか表示されないから。

何はともあれ...解決して良かった。2018年の記事も多く、この際タグを全面的に見直した。簡単モードでは『divタグ』も量産されており、記事を更新するよいきっかけとなりました。太字は極力使わない!😂

アナリティクスに『ヒットを受信していません』の通知

テーマを変更して2週間ほどが経過した。Google Analyticsに通知が表示された。

『ヒットを受信していません』...要因としては、『訪問者がいない』または、『正しくタグ設定されていない』のどちらか。どんな状況かというと...テーマ変更後からずっとアクセス0ゼロ表示。↓👀

実際にはBloggerの解析を見ると訪問者はいるし、記事もインデックスされている。これまでこんなに真っ平なグラフではなかった。アナリティクスでは受信できなくなったということなのかな...

原因は何なんだろう...

スマホでのURL末尾に『?m=1』が表示されなくなった

GoogleのBloggerブログのURLはパソコンとスマホで違うURLになる。スマホではURLの末尾に『?m=1』が付く。これ、気になる人結構いると思うけど...テーマF-lightでは、パソコンもスマホも同じURLになっている

BloggerスマホURL『?m=1』についてGoogleの見解は...適切なcanonicalタグが設定してあるから何の対処も必要ないよ...ということでした。Search Consoleでは{代替ページ(適切な canonical タグあり)}と表示。

URLの統一をしている方もたまに見かけるので、これ自体が影響を与えているわけではないと思うけど...今のところ原因が思いつかない。。可愛いデザインで気に入っているので、もうしばらく様子をみてみよう。


新しい投稿はありません 前の投稿