*

続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をカスタマイズしよう

スポンサードリンク

スポンサードリンク

この記事が少しでもあなたのお役に立ちますように
  • このエントリーをはてなブックマークに追加

2013/09/15 | WordPress


サイトの更新情報をお知らせしています

follow us in feedly follow me

関連記事

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

日々進化を遂げているワードプレスの無料テーマStingerは、...

記事を読む

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

ワードプレス使いのブロガーさんの中で、最強のテーマとまで言われ...

記事を読む

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

私が現在カスタマイズしているSTINGER3のバージョンは、2...

記事を読む

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

前回の記事で、ヘッダー周辺を可愛くカスタマイズすることができま...

記事を読む

新着記事

無料化粧品モニター【全国9店舗】保湿も美白もできるコラーゲンゲル

無料で化粧品がもらえるお得なモニター情報です。ノエビアの薬用ホワイトニ...

記事を読む

消えものギフトの最高峰!とろける幻の高級ふりかけ「口どけ」さん

ふなっしーとパンとスープカレーが大好きな私ですが、毎日そればか...

記事を読む

ポーズパンで人気のブッロ!バターの香りとフォアグラパテで幸せ~

2013年10月19日にオープンしたパン屋さん「ポーズパン」さ...

記事を読む

ふな ふな ふなっしー♪ふなっしーデビューCD、本日発売なっし~

ふなっしーの魂の叫び!激しくもポップな「ふなメタルロック」サウ...

記事を読む

ふなっしーの「恋するフォーチュンクッキー」みんなと踊ったなっしー

AKB48の「恋するフォーチュンクッキー」を、いろいろな人たち...

記事を読む

コメント/トラックバック

トラックバック用URL:

コメントフィード




管理人にのみ公開されます

*

スポンサードリンク


follow us in feedly follow me
無料化粧品モニター【全国9店舗】保湿も美白もできるコラーゲンゲル

無料で化粧品がもらえるお得なモニター情報です。ノエビアの薬用ホワイ...

消えものギフトの最高峰!とろける幻の高級ふりかけ「口どけ」さん

ふなっしーとパンとスープカレーが大好きな私ですが、毎日それ...

ポーズパンで人気のブッロ!バターの香りとフォアグラパテで幸せ~

2013年10月19日にオープンしたパン屋さん「ポーズパン...

ふな ふな ふなっしー♪ふなっしーデビューCD、本日発売なっし~

ふなっしーの魂の叫び!激しくもポップな「ふなメタルロック」...

→もっと見る

  •  
  •  

  • Amazonアソシエイト・プログラム規約による記載
    えけこのくるるはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
PAGE TOP ↑