BloggerのCSSをスマホにも適用させる

みなさん、こんにちは。


「BloggerのテンプレートをCSSでカスタマイズする」でブログの表示をカスタマイズしましたが、スマホで表示してみたら変更できていませんでした。

調べてみるとモバイル用のCSSを作成しなければならないようですが、ダッシュボードのテンプレートからもモバイル用の設定が簡単にできるようです。


作業開始前にいろいろ変更することになりそうなので、おかしくなった時にすぐに直せるように、まずは現行のバックアップを作成しておきます。

画面右上の「バックアップ/復元」をクリックします。

「テンプレートをすべてダウンロード」をクリックします。

復元するときは今回ダウンロードしたファイルを「ファイルを選択」より選択して復元します。

では早速作業を開始します。

歯車の設定アイコンをクリックします。

「はい。携帯端末でモバイル テンプレートを表示する」が選択されていますので、「モバイルテンプレートを選択」でカスタムを選択します。

カスタマイズ済のPC表示用の設定に近いモバイル用の設定に自動で設定されます。

プレビューを表示して、どう表示されるか確認します。

カスタマイズしたCSSは反映しましたが、ブログの説明文が表示されていません。

正確にはブログの説明文の文字色を白に設定しているため、背景色の白と同化してしまい見えなくなっています。

これはモバイル専用のCSSを設定してブログの説明分の文字色を変更して対応することにしました。

結局CSSを書かないといけないのは残念 orz

手順は「BloggerのテンプレートをCSSでカスタマイズする」で説明した通りですが、まずはHTMLをじっくりみてブログの説明文の部分を探します。

<div class='descriptionwrapper'>
<p class='description'>
<span>&#12288;つれづれなるまゝに&#12289;<br>&#12288;日ぐらし硯に向かひて&#12289;<br>&#12288;心にうつりゆくよしなしごとをそこはかとなく書き付くれば&#12289;<br>&#12288;あやしうこそ物狂ほしけれ&#12290;</span></p>
</div>

上記が該当箇所でした。
<span>タグに文字色を設定するCSSを追加します。
頭に、.moble を加えるとモバイル表示の時のみ適用されるようになります。

/* moble */
.mobile .description span{
color:orange
}

これでスマホでも説明文が読めるようになりました。

ではでは～☆ミ