モバイルで投稿一覧の投稿タイトルを、左寄せじゃなく枠内に広げて表示する。

　Bloggerのブログを、スマホで閲覧してみましょう。
トップページへ。

投稿タイトルが、左寄せになっています。

これを、左寄せではなく、
普通に一列に（長ければ二行になる）表示させます。

モバイルの表示をカスタムしてみる

　ではやってみましょう。
テンプレート編集へいきます。

全然難しくないので、すぐにできますよ。



　参考にさせて頂いたのはこちらのサイトです。
Blogger:モバイルサイト(6)更新日時の表示などヘッダーの改造


違う内容の目的で書かれていますが、
私がやりたかった事と重なっていたので
そこだけ参考にしました。

その他の内容も、余裕のある時に
是非トライしてみたいですね。


　では、スマホで投稿タイトルがトップページで
なぜか左寄せなのを、
通常の表示にする方法です。


　テンプレートのCSS記入欄に、
以下を追加します。


.mobile-index-title.entry-title{
  width: auto;
  padding-right: 10px;
}

　どういう意味かと言いますと、
モバイル表示の投稿タイトルは、

幅は自動にしてねという指示。

あまり右端までいくと読みにくいから、
右端は10pk開けておいてという指示です。


　どうやら、
PC表示の投稿タイトルで別の指示があるようです。

それをモバイル表示の投稿タイトルが引き継いでいた模様。

なので、あえてモバイルの投稿タイトルのCSSを追加して、
モバイルはモバイルで表示方法を決めたのです。



　当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）

スポンサードリンク