Simplicityのh1～h6タグでカスタマイズ

Simplicityをスタイルシートをそのまま使いたい人は中々いないと思いますが、どうするのかわからないって方に私の知っている方法を紹介したいと思います。

記事タイトルや記事内の見出し2や3はただスタイルシート子テーマの.article h2の部分のh1にするかh3にすれば良いだけでh1は記事タイトルでh2以下は記事内の見出し2以下になります。

太字の部分を変えてあげるだけでタイトルや見出し2～6になります。

上のスタイルシート記号の太字の部分を戻して子テーマにコピペしたらそのまま見出し２がカスタマイズされます。上の「.article h2 {」部分を「.article h1」に書き換えるだけで記事のタイトルになります。「.article h3」にしたら見出し３ですし、article h○に1～6まで入れ変えてあげるだけでタイトルから見出しまでカスタマイズになります。

h1は記事タイトルでこれで言うと「Simplicityの記事内見出しの装飾はh1～h6で変更」の部分です。color: #6e05a0;は枠線の色と同じにしています。

記事見出しのカスタマイズサンプル

これはもともとこのサイトの見出し2の装飾部分でh2が見出し2になります。

このようにスタイルシートの子テーマに書き込まれています。

これからは写真になりますので若干色が違ったり位置が違ったりしますがその辺はご理解ください。色は枠線の色になります。

またお使いのモニターでも全く違います。私のノングレアタイプのモニターで良い色だな～と思ってもグレアタイプのノートパソコンでは違った色になります。

グレアタイプは周りの背景が反射して移り込むのでチョッといや大分違います。

backgroundが塗りつぶしを意味していて文字の色の指定はcolor: #fff;この部分です。

border-left: 15px solid #336699;が左端の色違いのボーダーの事です。

今度は文字色が黒になりました。バックの色は何も指定しないと白になっているのでこの場合何も指定はしません。

大体の装飾のやり方は載せましたが、記事タイトルに使いたい時はh1にすれば良いし、記事内の見出しに使う場合はh2～h6にすれば使えますから、後は色々組み合わせて使ってみてください色は全て違うようにしています。doubleの場合は3px以上でないと表示されません。この枠線の太さは2pxです。

各自で好みの形でこれを参考に独自の見出しを作るのも良いでしょう。

皆さんの参考になれば良です。私も忘れないような感じで載せました。