最終更新日：2018.05.27
WordPressの無料テーマ『LION MEDIA』について解説している記事です。
今回のテーマは、【投稿スキン設定】です。よろしくお願いします。
「投稿スキン設定」では、投稿で使用する見出しのスタイルやカラーの設定をすることができます。投稿で使われる見出しは「見出し２<h2>」から「見出し５<h5>」です。見出しごとに設定が可能です。
見出しを使用することで、そこには何が書いてあるのかということがひと目でわかります。ユーザーにわかりやすく、見やすいサイトをつくるように心がけることが大切です。
見出しカラーの設定
見出しの設定方法は、2～5すべて共通です。
見出しカラーの設定は、ＡとＢの２種類
１つの見出しに対して、なぜ２種類あるの？って思いますよね。それは、後ほど出てくるスタイルのデザインと関係してきます。
では、スタイル「01．先頭大」を選択した場合を例として説明していきますね。
スタイル01は「先頭大［カラーA：先頭文字 B：文字］と表示されています。文字だけ見ていてもよくわからないと思うのでイメージを見てみましょう。
これが見出しのイメージ
先頭大・・・見出しの１文字目が他の文字より大きくなっています。
カラーA：先頭文字・・・先頭の１文字目だけ違う色になっています。
カラーB：文字・・・先頭文字以外（２文字目以降）が、Bで選択した色になります。
色の選択方法
パレットから選ぶ
色の選択をクリックするとカラーパレット（？）が開きます。パレット内をクリックしてカラーを選びます。
カラーコードを入力する
カラーコードは「＃」と６つの数字や文字で表されます。色を選択の横にあるのがカラーコードです。
カラーコードを調べるには、色見本のサイトなどを参考にします。「色見本」「配色サイト」などと検索すると出てきます。
私は、いつも色見本を参考にしています。
参考サイトは、WEB色見本 原色大辞典です。
見出しのスタイルを選択
デフォルト設定は以下の通りです。
- 見出し２ 01：先頭大
- 見出し３ 09：ボックス
- 見出し４ 00：オリジナル見出しを作成
- 見出し５ 00：オリジナル見出しを作成
『LION MEDIA』では、16種類の見出しのスタイルがセットされており、選択するだけで簡単に変更することができます。CSSの知識がある方は、CSSを記述してオリジナルの見出しを指定することもできます。
それでは、どのようなスタイルが用意されているのか見てみましょう。
スタイル01～04
01は先ほど説明した通りです。
02はボックススタイル。うっすらとボックスの内側に影が表現されています。Aがボックスの色、Bは文字の色。
03はリボン風。両側の端がリボンに見えるように折りたたまれています。Aがリボンの色、Bは文字の色。
04は立体的に見える箱型。Aが箱の色、Bは文字の色。
スタイル05～08
05はマーカー風。Aがマーカーの色、Bは文字の色。
06は吹き出し風。Aが吹き出しの背景色、Bは文字の色。
07はダークグラデーション。Aが上の色、Bが下の色。両方の色でグラデーションされます。文字の色は白。
08はライトグラデーション。Aが上線と先頭にある○の色、Bは文字の色。
スタイル09～12
09はふせん風ボックス。Aが左端の線の色、Bは文字の色。
10は左端のラインのみ。Aが左端の線の色、Bは文字の色。
11は同じくふせん風だけど背景色がついている。Aが左端の線の色、Bは背景の色。文字は黒。
12は下線。Aは下線の色、Bは文字の色。
スタイル13～16
13はふせんっぽいですね。左端と下に線があります。Aが左線の色、Bは文字の色。
14はボックス。見えにくいですがボックス内側に線があります。Aがボックスの色、Bは文字の色。
15.は井のカタチをしています。文字がセンターリングされていますね。Aが線の色、Bは文字の色。
16.は下線。文字が乗っている部分だけに色がついています。Aが文字が乗っている部分の線の色、Bは文字の色。
お気に入りのスタイルは見つかりましたか？
オリジナル見出しを設定
オリジナルの見出しを設定するには、CSSの記述が必要です。初心者にはちょっとむずかしいですよね。
設定方法としては、「00．オリジナル見出しを作成」を選択し、その下にある空欄、または、子テーマのCSSファイルにスタイルを記述すると変更することができます。
子テーマのCSSファイルとは、子テーマの「style.css」ファイルのことです。
CSSの追加は、「外観 ＞ カスタマイズ ＞ 追加CSS 」または、「外観 ＞ テーマの編集 ＞スタイルシート（style.css）」から行えます。
テーマの編集の画面
「テーマ編集」を開けると、画面上部に「付随のCSSエディターで編集とライブプレビューを行うことができます。」と表示されています。付随のCSSエディターとは、「外観 ＞ カスタマイズ ＞ 追加CSS 」のことです。そっちでやるとプレビューみれるから便利だよって誘導しています。
まぁ、どっちを使ってもいいと思います。CSSをイジるときは、不具合が起こった場合を考えてバックアップを取っておきましょう。
「テーマ編集」から行う場合は、編集するテーマを選択の部分が「LION MEDIA Child」になっていることを必ず確認してください。親テーマをイジってしまうと取り返しのつかないことになっちゃいますので・・・。
初心者が変更する場合は、外観 ＞ カスタマイズ ＞投稿スキン設定のフォームから入力するのが無難だと思います。
見出しをオリジナルに変更するときの注意！
見出しのHTMLタグは<h>です。見出し２は<h2>、見出し3は<h3>・・・となります。
見出し２をオリジナルにしようと思い、.h2{○○｝という記述をしてみたところ、あら大変！
投稿ページに反映されない・・・。
『LION MEDIA』の親ファイルを調べた結果、
.content ｈ2｛○○｝と記述すれば、スタイルを反映させることができました。
FITさんのサイトには、このようなメッセージが。
子テーマを用いて見出しスタイルをカスタマイズ(上書き)している方は、【外観】→【カスタマイズ】→【投稿スキン設定】から、カスタマイズを行っている見出しの【スタイルを選択】を【00.オリジナル見出しを作成】にしてください。
その後、ご自身のCSSファイルの記述で不要な要素を削除してください。というのも、【00.オリジナル見出しを作成】を選択することで、基本スタイルがフォントサイズのみとなるため、上書きという書き方をする必要が無くなるためです。
CSSの知識があまりない私には理解ができませんでした。ごめんなさい。
でも「.content 」をつければ変更できるので一度やってみてください。
当サイトの見出し２はオリジナルに設定しています。
オリジナル見出しの見本
これです。角がまーるくなっていて、左端から少しずれた位置に吹き出しがあります。
どんなCSSを記述しているかというと・・・
.content h2｛
position:relative;
background: #b83b5e; /*背景色*/
padding: 0.5em; /*文字周りの余白*/
color: white; /*文字の色*/
border-radius: 6px;/*角の丸み*/
}
/*この下は吹き出し部分の設定*/
.content h2:before{
position: absolute;
content: “”;
top: 100%;
left: 8%;
border: 18px solid transparent;
border-top: 15px solid #b83b5e;
margin-left: -15px;
}
ご参考にどうぞ。