/*

WordPressのテーマ「Skeleton」で記事・固定ページ内の見出しを装飾して目立たせるには 【解決編】

LINEで送る
Pocket


記事や固定ページの中で、区切りや見出しを作って
より見やすくしたい!

とずっと思っていた問題がようやく解決できました。




WordPressのテーマ「Skeleton」で記事・固定ページ内の見出しを
装飾し目立たせるには、「スタイルシート(style.css)」のファイルの「h4」の表示方法を編集します。

あとは記事・固定ページ内では、見出しにしたい文字列を
<h4>と</h4>
で囲むだけで、こんな装飾ができてしまいます。


見出しを装飾




当サイトでは、「Skeleton」テーマを直接編集せず、
いわゆる子テーマを作って、
親テーマである「Skeleton」のstyle.cssをコピーし、
変えたい部分だけ編集して使っています。




style.cssの310行目付近に、
/* @group Typography */
のくくりを探します。

その10行くらい下に、以下のような記述が見つかりますから、
h1 {line-height: 140%; margin-bottom: 14px;}
h2 {line-height: 130%; margin-bottom: 10px; }
h3 {line-height: 130%; margin-bottom: 8px; }
h4 {line-height: 125%; margin-bottom: 8px; }
h5 {line-height: 120%; margin-bottom: 8px;}

このうちの「h4」の{}内を以下のように変更し保存します。
line-height: 130%; margin-bottom: 10px;
border-left: 8px solid #333300;
border-bottom: 1px solid #333300;
padding-left:12px;





これで下準備が整いました。

投稿や固定ページの編集画面で
<h4>これがSkeletonで使える見出しだ!</h4>
のように記入をすると、

これがSkeletonで使える見出しだ!



とこんなふうに表示されます。




border-left: 8px 
 「px」のところの数値を変えることで、
 左側の線の幅を変えられます。

border-bottom: 1px
 同じく「px」前の数値を変えることで、
 下線の太さを変更できます。

solid #333300
 3桁または6桁の色コードの前に「#」をつけるのはもちろん、
 さらにその前に「solid」と入れないと認識してくれません。
 「solid」と「#」の間には半角スペースを入れます。

padding-left:12px
 この数値で左側の線から一番目の文字までの間隔を変えられます。




「h4」を使った理由は、
「h1」はサイトの名前、
「h2」は記事一覧での記事の名前、
「h3」は右コラムの「最新の記事」などの見出しに
それぞれ使われているからです。

h4も私が表示させていないだけで、
どこかで使われているのかもしれません。

文字の大きさは、ダッシュボードの外観→Theme Opetionsで変えられます。

どんな編集をしても、
毎行の最後の「;」と最後の「}」は忘れないようにしてください。




引きこもりのまま社長になった
家から稼げる秘密
はここから学びました。
 ↓ ↓ ↓
自由な人生を手にいれる教科書

個人事業をしながら収入を安定させるために
もうひとつ柱となる収入源がほしい、

今は会社勤めだが、副業から
ゆくゆくは独立起業を考えている、

ネットで稼いで自由な人生を手に入れたい、

そんな方にぴったりの
無料電子書籍+動画+メールマガジンです。


特にメールマガジンは、
ネットを事業に使っている人には
読み物としてもおもしろく、
毎回ためになる情報が発信されているので絶対にお見逃しなく!

LINEで送る
Pocket


This entry was posted in WordPress, 便利, 見た目, 解決編. Bookmark the permalink.

Leave a reply