h1やh2やh3をオシャレな見出し/WordPressのカスタマイズ

毎日インターネットを見ていると、多くの記事を目にします。
良いことを書いていてもダラダラと書かれていると途中で読み飽きてしまいます。

内容さることながら記事の「見やすいページ」を考えて少しページに手を加えてみました。

目次

h1やh2やh3をオシャレな見出しにしたい/Wordpressカスタマイズ

※見出し変更の備忘録

ダッシュボードの「css編集」 で下記のコードを入力します。
子テーマでの編集をおすすめします。

h3見出し例

h3 {
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 18px;
	border-left: 5px solid #559768;
	border-bottom: 1px dashed #559768;
	padding: .6em .8em;
}

可愛い見出し

見出し

h3{
    font-size: 1.143em;/* 文字の大きさ */
    font-weight: bold;/* 文字の太さ */
    color: #5C4747;/* 文字の色 */
    border-bottom: 2px dashed #D26466;/* 文字下の点線の太さ・種類・カラー */
    margin: 0 0 1.5em;
    padding: 0.2em 0 0 1.7em;
    position: relative;
}
h3:before{
    background: #d48789;/* 左上四角部分の色 */
    top: 0;/* 左上四角部分の位置 */
    left: 0.5em;/* 左上四角部分の位置 */
    height: 12px;/* 左上四角の大きさ */
    width: 12px;/* 左上四角の大きさ */
    position: absolute;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    content: "";
}
h3:after{
    background:#d26466;/* 左下四角部分の色 */
    top: 0.8em;/* 左下四角部分の位置 */
    left: 0.2em;/* 左下四角部分の位置 */
    height: 8px;/* 左下四角の大きさ */
    width: 8px;/* 左下四角の大きさ */
    position: absolute;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    content: "";
}

(※ 当サイトの操作方法で生じたトラブル等につきましては責任は持てません。あくまでも自己責任でお願い致します。
css編集される時は、必ずバックアップを取られてから編集して下さいね。)


色の使い方

デザインを考えるとき。プロとの違いは、色の扱いかたであるでしょう。

見苦しくないよう、美しく見えるように「色合わせ」をしたいものです。

私は下記のサイトを参考にしました。

色見本と配色サイト

色見本

多数のカラーパレット「Color Hunt」

色見本

見出しの設定を変えたとき注意すること

みなさんは、こんな事されないと思いますが 段落を付けて「Enter」を押して改行すると・・・

見出し

こんな事になっちゃうのです。

原因は、黄色の所。

2見出し

直しますと通常になりました。

3見出し

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次