モバイル版Bloggerのトップページ（ホーム）を編集する。

モバイル版トップページを編集する手順

パソコンでテーマからHTMLの編集を開いて下さい。

モバイル版トップページのコードを見つけたら編集と保存をして、スマホで自分のサイトを確認します。

スマホを持っていない場合は、タブをもう１つ作って自分のブログのモバイル版を見て確認します。パソコンからモバイル版を見る方法は、ブログのURLに/?m=1を付けます。
例)https://○○○○○.com/?m=1

モバイル版トップページのコード

記事タイトル

<h1 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h1>

記事内容の抜粋

<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>

記事に使用している画像

<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</div>

モバイル版の続きを読む（　〉）

<div class='mobile-index-arrow'>&amp;rsaquo;</div>

トップページに必要ないものを削除する方法

モバイル版Bloggerのトップページを見た時にゴチャゴチャしていると思ったので必要ないものは削除します。

削除する方法は削除したい項目のコードを消すだけです。

もしコードを消したくない場合は<!--コード-->としておきましょう。

私が消したのは記事内容の抜粋です。

記事内容の抜粋は、長々としていて画像の下にまで入り込んでいたので削除しました。

画像の横に記事タイトルを入れる方法

画像の上にある記事タイトルを画像横に持っていきます。

方法は、記事タイトルのコードを記事内容の抜粋のコードがあったところに持ってきます。画像のコード+</div></b:if>の下です。

<!--モバイル版トップページの画像-->
<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
<!--モバイル版トップページの画像-->
</div>
</b:if>
<!--モバイル版トップページのタイトル-->
<h1 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h1>
<!--モバイル版トップページのタイトル-->

この方法で、記事タイトルを画像の横に持ってくるとタイトルの色がリンクテキストの色にはなりません。

リンクしているので問題はないです。

記事タイトルが勝手に改行されないようにする

記事タイトルが中途半端なところで勝手に改行されてしまうのを直して横幅いっぱいに記事タイトルが表示されるようにして、横幅いっぱいになったら改行するようにします。

方法は、style='width:100%'を記事タイトルのコードに追加します。

<h1 class='mobile-index-title entry-title' itemprop='name' style='width:100%'>
<data:post.title/>
</h1>

これで、勝手に改行される心配はなくなりました。