見出しタグh2h3を変更しよう

シェアする

  • このエントリーをはてなブックマークに追加
Amazonアソシエイトギフトコードの期限と再発行  のんびりママの気になる木(1)

記事を書く時に、心がけること。読み手に見やすくすること。
改行を適度に入れて、見出し・小見出しをつけるようにしています。

スポンサーリンク

見出しとは

そんなこと知ってると言われそうですが、初心者目線で書いているので(^_^;)

文章の内容をまとめている短い言葉、要点です。最近は、意識して書くようにしています。
長い文章は、スクロールしているうちに、どこに何が書いてあるか、わからなくなって、読む気が失せてしまいません?
見出しをつけては、書いてある方が読む気がします。なので、つけましょう。

それに、目次のプラグインが入っていたら、その見出しを、さらにまとめてくれます。
読者さんが、読みたいところに飛べます。便利ですよ。

目次のプラグインの記事はこちらです↓

記事内で目次を自動的に作ってくれるプラグイン
記事の内容が多くなり、見出しがいくつか分かれた場合、目次があると、見やすいですよね。

どうやって、見出しをつけるの?

これは、記事を投稿する画面をビジュアルモードにします。
見出しにしたい文字を選択して、ツールバーの中にある 段落 の中から、見出し2、もしくは、見出し3など選びます。

プラグイン、TinyMCE Advancedがインストールしてあれば、スタイルを選びます。同じです。

TinyMCE Advancedのプラグインの記事はこちらです↓

TinyMCE Advanced|ワードプレスプラグイン
記事の投稿の時の画面に編集ボタンを増やすプラグインです。 記事を書く前に入れておくといいですよ。 TinyMCE Advancedとは ...

テキストモードで確認すると、このタグが自動で入ります。

見出し2 <h2></h2>

見出し3 <h3></h3>

見出し4だと、数字が4に変わるだけです。6まであります。
細かく見出しを設定している人は、それぞれを変更します。

h2・h3タグを変更

では、見出しを自分好みに変えましょう。デフォルトの状態のh2だと、こんな感じです。
見出しの左横に縦の線が入っているだけで見ずらいです。つまらない(^_^;)

入学祝に最適|小学校学習漢字1006字がすべて読める漢字童話 のんびりママの気になる木

色の背景で強調しようと思います。白い文字に。
h2とh3を変更します。

これも、SimlicityのHPを参考にしました。色だけ自分の好みに変えました。

外観 ⇒ テーマの編集で子テーマの編集画面を開きます。

右上の編集するテーマを選択が child になっていることを確認します。

そこに、コードを追加して、ファイル更新するだけです。style.cssが変更されました。

すごく簡単です。具体的な変更内容を書きます。コピーすればokです。

テーマの編集 ‹ のんびりママの気になる木 — WordPress

h2の変更

背景が色付で白文字です。強調されてて見やすいです。

.article h2 {

    backgroundcolor: #3CB371;
    borderleft: 0 none;
    color: #fff;
    padding: 15px 30px;
}

h3の変更

こちらは、そのまま、H2の見出しの色と合わせます。

.article h3,

#comment-area h3,
#related-entries h3{
  fontsize:23px;
  borderbottom:5px solid #3CB371;
  padding:10px 0;
}
色については、こちらに別で記事を書いています。
こちらからコードを参照しています↓
色コード|色見本サイト一覧
カスタマイズしている時に、htmlで色コードを指定します。その都度、調べるのは面倒ですよね。 色見本がわかりやすく記載されているサイトをま...
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る