記事や固定ページの中で、区切りや見出しを作って
より見やすくしたい！
とずっと思っていた問題がようやく解決できました。
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で変えられます。
どんな編集をしても、
毎行の最後の「;」と最後の「}」は忘れないようにしてください。
引きこもりのまま社長になった
家から稼げる秘密はここから学びました。
↓ ↓ ↓
自由な人生を手にいれる教科書
個人事業をしながら収入を安定させるために
もうひとつ柱となる収入源がほしい、
今は会社勤めだが、副業から
ゆくゆくは独立起業を考えている、
ネットで稼いで自由な人生を手に入れたい、
そんな方にぴったりの
無料電子書籍＋動画＋メールマガジンです。
特にメールマガジンは、
ネットを事業に使っている人には
読み物としてもおもしろく、
毎回ためになる情報が発信されているので絶対にお見逃しなく！
