はてなブログでふきだしアイコンの左側が切れ表示されない問題が意外な方法で解決した体験談

はじめに

先日、このブログにふき出しを使った対話形式の表示を採用しました。ところが問題発生！PC表示は問題ありませんが、スマホとタブレットで表示すると、左側のアイコンが切れてしまう不具合が出ました。

最終的に意外な方法であっさり問題が解決しました。同じような状況の方の解決のヒントになればさいわいです。

もくじ

スマホ、タブレットで左アイコンが表示されない

ちなみにPCでは、このように表示されます。でも、解決した今、改めてこの表示を見ると、実はこのPC版表示も問題があることがわかります。

修正前のPC表示も実は問題あり

PCで左側のアイコンも表示されてはいます。ですがよく見ると、記事コンテンツ内から左のアイコンがはみ出しています。

同時に吹き出しの左右がそろっていて、アイコンが左右にずれています。

ちなみに、この表示は公式テーマの「Neutral」を使ったものです。

スマホとタブレットで左のアイコンが切れて表示されない

PCではこのように左側のアイコンも一応、見えています。ところがスマホやタブレットで表示すると、このように左側のアイコンが切れて見えていません。

ちなみにスマホやタブレットの場合は端末を横向きにしても、左側のアイコンが切れていて表示されません。

はてなブログの公式テーマを変えてみた

理由がわからないので、しばらく色々調べましたが、ギブアップ。もう、打つ手はないのかとあきらめかけた時、ある可能性に気づきました。

それははてなブログのテーマ（テンプレート）に何らかの不具合、もしくは相性の悪さが原因となっている可能性です。

つまり、うまくいけば、テーマ（テンプレート）を変えれば、この問題が解決するのではないかと思いつきました。

もう、考えられることを試しても修正されませんでしたので、考えられることはこのくらいしか思い当たりません。

はてなブログ公式テーマの「Neutral」の相性が悪い？

ちなみに不具合が出たときに使っていたテーマは、はてなの公式テーマの一番上の「Neutral」です。「まさか、そんなことは・・」と思いつつも、上から2番目にある「Smooth（デフォルト）」（なぜか2番目にあるのがデフォルトなんですね）を使ってみました。

結果は・・？

はい、あっさり修正（解決）しました。

つまり、とりあえずはっきりしているのは、はてなブログの公式テーマのうち、一番上にある「Neutral」を使った場合に右側のアイコンが切れるようです。（ただし全ての条件で同じようになるかはわかりません。）

はてなの公式テーマ「Smooth（デフォルト）」に変更したら不具合解消

そして、私の場合、上から2番目にあるはてなの公式テーマ「Smooth（デフォルト）」に変更したら、これらの不具合が解消されました。つまり、スマホかタブレットで左側のアイコンが切れて表示されない問題が、このテーマにすれば解決をみたということです。

念のため、PC表示も確認します。はい、このように問題なく表示されました。

ブログテーマ（テンプレート）「Neutral」に原因がある？

推測ですが、可能性としてはてなブログテーマ（テンプレート）「Neutral」にだけ、表示に癖のあることを疑っています。

「Smooth（デフォルト）」に修正したら治った・・というよりも、「Neutral」にだけ不具合があったので、「Neutral」以外のテーマ（テンプレート）に変更したから問題が解消されたのかもしれません。

 ちなみにですが、最初に表示がおかしい最初の状況下（「Neutral」使用時）では、ふき出しが、クマアイコンも、女性アイコンも、左右同じ位置に表示されていました。また、全体的に吹き出しに関係なく、コンテンツ欄が片方に寄っている気がします。

さいごに

とにかくもテーマ（テンプレート）を変えたら表示が変わったので、とりあえずは解決しました。具体的な原因はわからないのですが、同じことで困っている方がいましたら、御一考ください。