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

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

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

.article h2 {
background-color: #6e05a0;
border-left: 0 none;
color: #fff;
padding: 15px 30px;
}

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

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

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

スポンサードリンク
スポンサードリンク

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

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

.article h2 {
margin: 40px -29px 20px;
padding:5px 10px;
margin-left:3px;
border-left:8px solid #6896e1;
font-size:26px;
}

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

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

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

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

見出しサンプル

.article h2 {
background-color: #6e05a0;
border-left: 0 none;
color: #fff;
padding: 15px 30px;
}

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

見出しサンプル3

.article h2 {
background-color: #ff9900;
border-left: 15px solid #336699;
color: #fff;
padding: 15px 30px;
}

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

見出しサンプル6

.article h2 {
border-left: 15px solid #ff6633;
border-bottom:1px solid #ff6633;
color: #000;
padding: 15px 30px;
}

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

見出しサンプル8

.article h2 {
border-left: 15px solid #336600;
color: #000;
padding: 15px 30px;
}

見出しサンプル9

.article h2 {
margin: 40px -29px 20px;
padding:5px 10px;
border-top:3px double #004488;
border-right:3px double #004488;
border-left:3px double #004488;
border-bottom:3px double #004488;
font-size:26px;
}

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

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

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

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

コメントをどうぞ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)