WPtouch【見出し】表示を変える方法・CSS
スマートフォンの利用者が増えた今、サイトをスマートフォン対応にすることが求められます。
今回は、そんなスマートフォン対応サイトにするWPtouchを、さらにカスタマイズするCSSを紹介します。
コピー＆ペーストで、楽々 かんたんに、見出しが分かりやすくなりますよ。
WPtouchをインストール・有効化する流れ
まず、前提として、プラグイン「WPtouch」がインストール・有効化されていることが条件となります。
もし、まだインストールされていなくても、次の手順で、かんたんにできます。
１．ダッシュボードの画面にある「プラグイン」にカーソルを合わせます。
２．「プラグイン」の中の「新規追加」をクリックします。
３．「プラグインの検索」に「WPtouch」と入力し、検索します。
４．表示された「WPtouch」の「今すぐインストール」をクリックします。
５．インストール完了後、「有効化」をクリックします。
これで、プラグインWPtouchのインストール・有効化は、完了です。
くわしい方法は、次の記事に書かせていただきました。
ご参考いただければと思います。
デフォルトの見出し
有効化したあと、ダッシュボードの画面に戻ります。
すると、ダッシュボードの画面に「WPtouch」が表示されるようになっています。
この「WPtouch」にカーソルを合わせ、「設定」をクリックします。
開かれた「WPtouch」の画面にある「テーマのカスタマイズ」をクリックします。
「カスタマイザに移動」というボタンをクリックします。
ちなみに、このあとの画面で、サイトの文字や背景の色を変えることができます。
色を変えることで、あなた好みのサイトに近づけることができますよ。
くわしいことは、先ほどの記事に書かせていただいております。
ご参照ください。
WPtouchを有効化しただけで、デフォルトのままの場合は、スマートフォン画面で次のように表示されます。
（パソコンの画面であれば、インストール・有効化する前と同じ表示のままです。）
画面が表示される幅は、スマートフォンの画面の大きさに合うようになりました。
しかし、スマートフォンに対応できているとはいえ、味気ないですよね。
そこで、色などを自分好みにしてみました。
ホーム画面は、これでOKです。
では、それぞれのページ画面は、スマホで どのように表示されるのでしょうか。
下にスクロールしてみましょう。
見出しが段落とほぼ同じ文字の大きさで、分かりにくくなっているのが お分かりいただけるでしょうか。
これでは、スマートフォンに対応することができているとは言い難い状態です。
「どうしたものか…」
そう思い、インターネットで調べてみました。
すると、
「CSSでカスタマイズすればいい」
という情報がありました。
ただ、わたしは、CSSについて知識がありません。
かといって、今から勉強するのもなぁ…。
と、面倒くさく思い、このときは あきらめてしまいました。
そうして、今になって、見出しのカスタマイズは とても かんたんだと分かりました。
「あのとき、面倒くさがらずに、終わらせておけばよかったな…」
と思います。
あなたに そのような思いをしていただきたくないので、かんたんなカスタマイズ方法を用意いたしました。
カスタマイズ後の見出し
見出しをCSSでカスタマイズしたサイトは、スマートフォンの画面で、次のように表示されます。
スマートフォンでも、それぞれの見出しが分かりやすくなっています。
「きっと、CSSでのカスタマイズは 難しいんだろうな…」
そう思われる方が多いです。
しかし、サイト制作の初心者でも、かんたんにCSSをコピペするだけで、見出しが分かりやすくなるのです。
CSSで見出しの表示を変える方法
WPtouchの「カスタム CSS」は、
「スマホの画面では、このような表示をする」
と 指示を付け加えるようなものです。
<style type=”text/css”>○○○○</style>
このような文字列で指示することができます。
上の文字列○○○○のところに、
見出し２(h2)は、このように表示する。
見出し３(h3)は、このように表示する。
見出し４(h4)は、このように表示する。
見出し５(h5)は、このように表示する。
見出し６(h6)は、このように表示する。
と指示を出せば、それぞれの見出しごとで表示を変えられます。
ベースとなるCSSは、次のような文字列です。
△△△の部分には、どのように表示するかの具体的な文字列を書きます。
<style type=”text/css”>
.post h2
{
△△△
}
.post h3
{
△△△
}
.post h4
{
△△△
}
.post h5
{
△△△
}
.post h6
{
△△△
}
</style>
そうではなく、
見出し２、見出し３、見出し４、見出し５、見出し６は、このように表示する。
というように、どの見出しも同じ表示にするという指示を出すこともできます。
ベースとなるCSSは、次の文字列です。
<style type=”text/css”>
.post h2, .post h3, post h4, .post h5, .post h6
{
△△△
}
</style>
これらをベースにして、表示の仕方に関する△△△の文字列に指示を書き加えるだけで、見出しを変えられます。
表示のしかたを指定する文字列 (基本)
どのような文字列(△△△のところ)で、どのような表示になるか、基本的な５つだけ見ておきましょう。
見出しの文字色を変える
デフォルトの状態では、見出しも段落と同じ色になっています。
これでは サイトが読みづらいので、せめて見出しの文字色を変える必要があります。
文字の色を指定する場合は、
color:blue
と書くだけです。
「blue」以外の色でも、色名を英語で書けばかんたんに指定できます。
または、色名ではなく、カラーコード(#以下６つの数字)で指定することもできます。
カラーコードであれば、より細かな色を使うことができます。
color:#000000
と、△△△のところに書くだけです。
ただ、こうして色を指定する文字列を書いても、見出しが変わらないことがあります。
そのような場合は、どこか 記号や文字が抜けていることが考えられます。
正しい文字列で指示してあげないと、思った通りに表示されないのが難点です。
もしくは、指定する見出しの種類(h2～h6)が違う可能性もあります。
わたしは、最初、見出し２(h2)で指示していました。
しかし、いっこうに文字色が変わらなかったのです。
そのため、見出し２(h2)ではなく、見出し３(h3)として指示をしたところ、無事に 色を変えることができました。
見出し２は「h2」で指定します。
見出し３は「h3」で指定します。
見出し４は「h4」で指定します。
以下、同じように見出し〇は「h〇」で指定できます。
もし、h2でダメなら、h3～h6で試してみてください。
見出しの文字に下線を引く
見出しを目立たせる方法のひとつが、下線を引くことです。
下線を引く文字列は、次の通りです。
border-bottom: 1px solid #000000
「1px」で線の太さを調節できます。
カラーコード「#000000」で、線の色を変えることができます。
文字色と文字の大きさを指定するだけで、かなり 見出しらしさが出せます。
余裕がなければ、この２つだけでも 手を加えておくとよいでしょう。
見出しの文字の大きさを変える
見出しの文字は、やはり大きめにした方がよいですよね。
文字の大きさは、次の文字列で指定します。
font-size:140%
「140％」の数字を大きくするほど、文字は大きくなります。
「100%」にすると、段落と同じ大きさの文字になります。
指定する文字の大きさは、好みによりますが、200％だと大きすぎる気がします。
見出しの文字の横にスペースをつくる
実は、見出しの文字の左側に、あまりスペースがなく、窮屈な感じがします。
気になる方は、気になるポイントです。
これを解消するための文字列は、次の通りです。
padding-left:6px
「6px」の数値を大きくすればするほど、スペースは広がっていきます。
「20px」で、だいたい１文字分のスペースが空きます。
見出しの文字横に縦線を入れる
見出しを目立たせるときに、下線を引くというワザはお伝えしました。
もうひとつ、横に線を引くのではなく、縦に線を引くことで、見出しを強調することができます。
左端に縦線を入れるための文字列は、次の通りです。
border-left:6px #000000 solid
また、カラーコード「#000000」で色を変えることができます。
もし、左端だけでなく、右端にも縦線を入れたい場合は、追加で文字列を書きましょう。
border-right:6px #000000 solid
コピペOKのカスタマイズCSSはこちら
ここまで見てきたように、とても 単純なCSSを使うだけで、十分 見出しを目立たせることができます。
それでは、あなたのお役に立てると思って、コピペでかんたんに設定できるCSSをお贈りいたします。
次の文字列を「WPtouch」の「カスタム CSS」に貼りつけ、カラーコードなどを 自分好みに設定し直してください。
<style type=”text/css”>
.post h2
{
color:#000000;
border-left:6px #000000 solid;
border-right:6px #000000 solid;
padding-left:6px;
padding-right:6px;
}.post h3
{
color:#000000;
border-bottom: 1px solid #000000;
padding-left:6px;
font-size:140%;
}.post h4, .post h5, .post h6
探LIFE～たん＊らいふ～のWPtouch用カスタマイズCSS
{
color:#000000;
border-left:6px #000000 solid;
padding-left:6px;
font-size:110%;
font-weight:nomal;
}
</style>
上記の「#000000」は、色を指定するための文字列(カラーコード)です。
この「000000」の数字を変えることで、色を細かく変えることができます。
#ffffffが白色、#000000が黒色になります。
また、「#000000」の部分を「red」「green」「blue」などと入力しても色を変えることができます。
あなたのサイトが よりよいものになりますように。
最後までお読みいただき、ありがとうございます。