Bloggerでモバイル表示の行間をカスタマイズする方法

Bloggerの「Simple」テーマで、モバイル表示の行間をカスタマイズしようとした際に、CSSの編集で反映されないという問題が発生することがあります。ここでは、モバイル表示の行間を適切にカスタマイズする方法を紹介します。

1. モバイル表示の行間が反映されない理由

Bloggerのテーマでモバイル表示の行間を変更しようとすると、編集内容が反映されないことがあります。これは、BloggerのCSSがデスクトップ表示とモバイル表示で異なるスタイル設定を使用しているためです。また、モバイルデバイスには追加のスタイル設定が適用されていることが多く、これが原因で行間の変更が反映されないことがあります。

2. 正しいCSSを適用する方法

モバイル表示で行間を変更するためには、まずCSSのセレクタが正しく設定されているか確認します。以下のコードをBloggerのカスタムCSSに追加してみてください。

.mobile .post-body { line-height: 1.5; }

このコードでは、モバイル表示の投稿本文に対して行間を1.5に設定しています。もしこれでも反映されない場合は、テーマの他のスタイルシートや、Bloggerの設定による競合が原因の可能性があります。

3. モバイル用スタイルシートの確認

Bloggerでは、PCとモバイルの両方に別々のスタイルシートを使用していることが多いため、モバイル用のスタイルシートが適切に読み込まれているかを確認してください。モバイル用のスタイルシートが上書きされていないか、モバイル専用のCSSが適切に適用されているかをチェックします。

4. モバイル表示のカスタム設定

Bloggerの管理画面で、「モバイル表示」の設定をカスタムにすることもできます。この設定を変更することで、モバイル表示のレイアウトやフォント、行間などを調整することができます。設定画面で「カスタム」に切り替え、モバイルのレイアウトを微調整してみてください。

まとめ

Bloggerでモバイル表示の行間を変更するには、CSSを正しく記述し、モバイル専用のスタイルが適切に適用されているかを確認することが重要です。これにより、デスクトップとモバイル両方で望む表示が得られるようになります。