恐らく私の使っているBloggerのブログテーマ『Simple』特有の不具合だと思うのですが、モバイル用ホーム画面で、投稿のタイトルが途中で折り返されてしまって画面いっぱいに表示されませんでした。
|
| ブログのモバイル用ホーム画面 |
それをなんとかしたので今回紹介します。
【Blogger備忘録】モバイル用ホーム画面の投稿タイトル表示が途中で折り返される不具合を改善する（テーマ：Simple）
●問題点（不具合）の整理
本件はモバイル用ホーム画面に特有の問題です。
モバイル用の個別記事画面やPC用の表示画面では起こりません。
|
●改善方法（テーマのHTMLの編集）
以下ではBloggerのHTMLを編集します。編集する前に復旧できるように必ず忘れずにHTMLのバックアップを取ってから行ってください。
また、このHTMLの編集について本ブロブおよび筆者は一切の責任を負いません。参考にされる方は全て自己責任で実施してください。
・モバイル用のホーム画面の表示部分を探す
Blogger編集画面の『テーマ』＞『HTMLの編集』で、
- 『<b:includable id='mobile-index-post' var='post'>』
のセクションを探します。
（『mobile-index-post』で検索をかければ直ぐに見つかると思います。）
|
| Blogger編集画面 |
ここより下がモバイル用のホーム画面の表示部分です。
ここで以下の部分が投稿のタイトルの表示を規定する箇所です。
<h3 class='mobile-index-title entry-title' itemprop='name'> <data:post.title/> </h3>
今回編集するのはココです😋。
|
| Blogger編集画面 |
・コードの追加
この編集対象箇所の<h3～の部分に『style='width:auto'』を追加します。
<h3 class='mobile-index-title entry-title' itemprop='name' style='width:auto'> <data:post.title/> </h3>
追加するコード『style='width:auto'』の意味は『表示幅を自動にする』です。
コード追加（編集）後のテーマのHTML全体のコードはこんな感じになります。
|
| Blogger編集画面 |
●改善結果
以下の通りです。完璧ですね😎。
|
| ブログのモバイル用ホーム画面 |
モバイル用の個別記事画面やPC用の表示画面への影響はありません😋。
●改善したい点
- 本件、実は不具合の本当の原因は分かっていなくて対処療法的に上手くいった内容です😅。できることならば本当の原因をつきとめたいのですが…。
●まとめ
簡単なHTMLコードの追加でモバイル用ホーム画面の投稿タイトル表示が途中で折り返される不具合を改善することができました。大満足です😋。
（本件はかなり以前に対策した内容ですが、ポイントを忘れてしまいそうなので😅記事化しました。）
