PR

続3)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

※当サイトはアフィリエイト広告を利用しています

stinger3

前回は、記事タイトルとページタイトル、小見出し(h2とh3)の装飾を可愛くカスタマイズしてみました。h4に関しては、背景色を好みの色に変える程度でいいかなーと思っています。

実はこれ、PCやタブレットで見た時のカスタマイズだったのです。STINGER3は、PC&タブレット用のCSSと、スマホ用のCSSの2種類を用意してあり、アクセスしてきた端末によって表示を切り替えています。

前回のカスタマイズだけでは、スマホで見た時も同じ表示にはなりません。今回は、スマホでの見た目も可愛くしてみましょう。

スポンサーリンク

女子ブロガー向けカスタマイズの手順その4

スマホ表示の記事タイトル、ページタイトルの装飾を変えよう

せっかくパソコンでの見た目を可愛くしたと思ったのに、スマホで見てみると、あらあら!デフォルトのままです。

IMG_0857

サイトの属性により、モバイル利用者の比率は異なりますが、私が管理運営しているサイトでは、全訪問者のうち、スマホで訪問している人の比率が50%を超えているところがほとんどです。

スマホで見てくれている半数以上の人達のためにも、タイトルはわかりやすく、読みやすく、可愛くしていきましょう。

文字の色を変えてみよう

IMG_0861

こちらが文字の色を紫に変えてみたところです。ダッシュボードの外観→テーマ編集→smart.cssの一番下に、以下のコードを追記してください。PC用のCSSと間違わないように注意してくださいね。

.entry-title {
color: purple;
}

背景色を変えてみよう

IMG_0862

文字の色は元のままで、背景に色を入れてみました。スマホだと表示範囲が狭いので、このぐらいの装飾で十分かもしれませんね。marginとpaddingは、お好みで変更してください。

.entry-title {
background-color: #fff0f5;
margin-right: -10px;
margin-left: -10px;
padding: 5px 10px;
}

色々なパターンのご紹介

2重線で囲んでみました。パソコンと同じコードです。英語や括弧などが入ると改行されてしまうので、行数が増えて長くなってしまいます。margin設定で左右の幅をマイナスにしたほうがいいかもしれません。

IMG_0863

.entry-title {
border: double 4px #ffc0cb;
padding: 5px 10px;
}

下線のラインにしてみました。スマホのブラウザでは水玉にならないようです。点線になりますね。

IMG_0860

border-bottom: dotted 4px #ffc0cb;
padding: 0px 0px 6px;

スマホの画面幅は、最小値で320pxです。あまり飾り過ぎると画面が狭くなり、文字が読みづらくなりますので、パソコンよりシンプルな装飾にしておきましょう。

小見出しの装飾を変えてみよう

タイトルの装飾が決まったら、小見出しh2とh3のカスタマイズです。スマホで見てみると、こちらもデフォルトのままですね。さっそく女子らしく変身させてみましょう。

IMG_0858

文字の色と装飾を変えよう

h2の文字の色を紫色に、h3は左側の線を紫色にしてみます。

IMG_0864

h2 {
margin-left: 0px;
padding: 5px 0px;
border: 0px;
color: purple;
}

.post h3 {
padding: 1px 10px 4px 15px;
border-left: 8px solid purple;
}

h2の背景に色を入れて、h3は二重線にしてみました。パソコンとほぼ同じコードです。

IMG_0865

h2 {
margin: 20px -15px 20px -15px;
background-color: rgb(255, 240, 245);
padding: 5px 15px 5px 15px;
border: 0px;
}
.post h3 {
padding: 1px 10px 4px 15px;
border-left: 15px double #dda0dd;
}

h2に下線をプラス、h3をシンプルにしたカスタマイズ例です。これもパソコンとコードは、ほぼ同じです。

IMG_0866

h2 {
margin: 20px -15px 20px -15px;
background-color: #fff0f5;
padding: 5px 15px 5px 15px;
border-left: 0px solid rgb(26, 26, 26);
border-bottom: 1px solid #da70d6;
}
.post h3 {
padding: 1px 10px 4px 15px;
border-left: 10px solid #da70d6;
}

個性的だけどシンプルに

パソコンとスマホでは画面の大きさが違いますが、同じような装飾にしておくと、どちらで見ても違和感なく、訪問者の方に馴染みやすいと思います。いろいろ試してみて、自分のサイトにあう色や装飾を見つけて下さいね。

今回のまとめと次回のお知らせ

では、次回はトップページのカスタマイズと、ファビコンの作り方について書こうと思います。お楽しみに。

続4)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

タイトルとURLをコピーしました