本記事ではページの見出しのデザインをスタイルシートから変更する方法を説明します．上のアイキャッチ画像の上側のように，最初のデザインはとてもシンプルですが，スタイルシートを少しいじるだけで下側のようにデザインを変更することができます．
記事中の見出しをスタイルシートから編集する方法
見出しの見た目を設定する方法を説明します．見出しの見た目はスタイルシートの編集から設定します．
①管理画面から「外観→テーマの編集」を選択します．
②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; } |
というコードをスタイルシートの最下部に追加しています．
スタイルシートの編集方法が分からないかたは以前の記事をご覧ください．
本記事では，グローバルナビのデザインを変更する方法を説明します．上記のアイキャッチ画像の上の状態から下の状態へ変更します．今回グロー...
www.how-to-make-affiliate-blog.com
ネット上で”wordpress,見出し,デザイン”で検索すると様々な見出しの編集コード例が紹介されているので，好きなデザインを参考にして使用すると良いと思います．
以上で見出しのデザインを編集する方法は終了です．これで通常の投稿ページを自由に作成することができるようになったと思います．次回は本サイトのトップページのように，投稿ページではなく固定ページを作成する方法を説明します．
本記事ではサイト内の固定ページの作成方法と，メニューに固定ページを足す方法について説明します．本記事が「Step3 記事を書く」の最...
www.how-to-make-affiliate-blog.com
