WordPress 投稿ページのカスタマイズ

実際に記事を書いて投稿するとできるページ、つまり読まれるページの見え方をカスタマイズ。記事の読みやすさを重視しつつ「らしさ」を表現したい。customize（カスタマイズ）を辞書で調べたら、『カスタマイズとは、ユーザーの好みと使い方に合わせて、システムや機能などを設定し直すこと。または特別注文でつくること。注文に応じてつくり替えること。』とあった、今回は既に出来上がっているテーマを改変した訳ではないので厳密に言うと意味が違うが、自分用にオリジナルを作ると言う意味ではカスタマイズだ、ともあれあがいてみた、多分今後あれこれ試行錯誤するのだろうなー。

見だし設定

小見出し：,h2,h3のスタイルを決める

背景色と下線で見出し感をだす

画面のチラチラ感を緩和したかったので、見出しで文書に区切りをつけてみた。読みやすくなったかな〜

<style.css>
/* 小見出し */
.toko h2 {
clear: both;
position: relative;
margin-top: 40px;
padding-left: 32px;
padding-bottom: 5px;
font-size: 22px;
font-weight:normal;
font-family: “新丸ゴ M”;
background-color: #F8F3F3;
border-bottom: 4px double #c4161c;
}

.toko h3 {
clear: both;
position: relative;
margin-top: 25px;
padding-left: 25px;
font-size: 18px;
background-color: #FAE8E8;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #E6E3E3;
}

Font Awesome を利用してアクセントをだす

<style.css>

.toko h2:before {
position: absolute;
left: 0px;
top: 3px;
content: ‘\f046’;
color: #c4161c;
font-family: ‘FontAwesome’;
font-size: 28px;
font-weight:normal;
line-height: 1;
}

.toko h3:before {
position: absolute;
left: 2px;
top: 3px;
content: ‘\f14a’;
color: #c4161c;
font-family: ‘FontAwesome’;
font-size: 20px;
font-weight:normal;
line-height: 1;
}

Font Awesomeのアイコンをスタイルシートで表示する方法。
font-familyを 「FontAwesome」で指定し、contenでアイコンのコードを指定する（上記の赤い部分がその設定）。アイコンのコードは以下のように「FontAwesome」のHPで調べる。
（１）http://fontawesome.io/　へ行き[icons]のボタンをクリック

（２）イメージにあうアイコンを探し、見つけたらクリック。

（３）Unicode:を調べる　このアイコンは「f2cd」、contenコードの指定は「\f２cd」

マークアップ設定

文章中の書き込みにアクセントを、マークアップ設定を何個か作成した。編集画面で使用する時はスタイルを使用。

引用：タグの記述
引用だけではなく、タグの記述等に利用

設定方法は以下
（１）function.php　にスタイルメニューを有効化する設定を追加

＜function.php＞
—-
$style_formats = array(

array(
‘title’ => ‘補足情報‘,
‘block’ => ‘div’,
‘classes’ => ‘point’
),
array(
‘title’ => ‘注意書き‘,
‘block’ => ‘div’,
‘classes’ => ‘attention’
),
array(
‘title’ => ‘コメント‘,
‘block’ => ‘div’,
‘classes’ => ‘comment’
),
array(
‘title’ => ‘ハイライト‘,
‘block’ => ‘span’,
‘classes’ => ‘highlight’
),
array(
‘title’ => ‘引用‘,
‘block’ => ‘span’,
‘classes’ => ‘blockquote’
)
);
$init[‘style_formats’] = json_encode( $style_formats );

//スタイルメニューを有効化//
function add_stylemenu( $buttons ){
array_splice( $buttons, 1, 0, ‘styleselect’ );
return $buttons;
}
add_filter( ‘mce_buttons_2’, ‘add_stylemenu’ );

（２）各々のスタイルを設定、beforeで’FontAwesome’;を使用したアイコンを設定。afterでアイコンに続くタイトル部分を設定、重なり具合は  z-index で設定。内容はほとんど同じなので「コメント」のみ紹介。

<style.css>
/* コメント */
.comment{
position: relative;
margin: 20px 0 20px;
padding: 20px 15px 15px;
border-radius: 10px;
background-color: #FBEFF8;
font-size: 14px;
clear: both;
}

.comment:before{
position: absolute;
left: 15px;
top: -15px;
content: ‘\f27a’;
z-index: 2;
width: 32px;
height: 32px;
padding-top: 3px;
border-radius: 16px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #F5A9D0;
color: #ffffff;
font-family: ‘FontAwesome’;
font-size: 26px;
line-height: 1;
text-align: center;
}

.comment:after{
position: absolute;
left: 32px;
top: -8px;
z-index: 1;
content: ‘Comment’;
padding: 3px 10px 3px 20px;
border-radius: 5px;
background-color: #F5A9D0;
color: #ffffff;
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
line-height: 1;
}

（３）編集画面で フォーマット＞スタイル＞各々の設定名　で設定する。