本記事ではページの見出しのデザインをスタイルシートから変更する方法を説明します.上のアイキャッチ画像の上側のように,最初のデザインはとてもシンプルですが,スタイルシートを少しいじるだけで下側のようにデザインを変更することができます.
記事中の見出しをスタイルシートから編集する方法
見出しの見た目を設定する方法を説明します.見出しの見た目はスタイルシートの編集から設定します.
①管理画面から「外観→テーマの編集」を選択します.
②Simplicity2 child:スタイルシートに以下のコードを貼り付け,最下部の「ファイルを更新」をクリックします.
例えば本ページの見出しの場合は
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.article h2 { position: relative; margin: 0 0 1.5em; padding-left: 0.8em; padding-bottom: .1em; border-left: 0px solid #B92A2C; border-bottom: 1px solid #a0a0a0; font-size: 1.5em; font-weight: bold; } .article h2::after { position: absolute; top: 0.9em; left: .0em; content: ''; width: 7px; height: -webkit-calc(100% - 1.1em); height: calc(100% - 1.1em); background-color: #dc143c; border-radius: 2px; } |
というコードをスタイルシートの最下部に追加しています.
ネット上で”wordpress,見出し,デザイン”で検索すると様々な見出しの編集コード例が紹介されているので,好きなデザインを参考にして使用すると良いと思います.
以上で見出しのデザインを編集する方法は終了です.これで通常の投稿ページを自由に作成することができるようになったと思います.次回は本サイトのトップページのように,投稿ページではなく固定ページを作成する方法を説明します.