CSS見出しジェネレーターを使ってシンプリシティで
かんたんに見出しタグを変更する方法をご紹介します。


h2タグやh3タグなどの見出しはユーザーさんの目につきやすい場所です。


あなたのサイトテーマに合ったデザインの見出しタグを作りましょう！

シンプリシティの見出しタグの変更|リボン風見出しの作り方

BL7yXOZqzx_6kCn1472763910_1472763916


今回は、リボンのような見出しを作ってみましょう。


このタグデザインは女性らしくて美容商品サイトなどに相性がよさそうですね。

WEB道の見出しジェネレーターで見出しタグCSSを作成

http://web-dou.com/tool/css_gen_h.php


IRRzFXuKoCiXxpO1472764321_1472764331

リボン風見出しを作るために項目を埋める



ULUNhYd_qGdk5Ge1472791047_1472791152


①は背景色、②は枠の色、③は文字色になります。


マウスを合わせると色彩の一覧が出てくるので好きな色を選んでいきましょう。


④は見出しの中の文字を記載します。その後「ジェネレート」をクリック。


③CSSコードをコピー

ジェネレートをクリックするとCSSが自動で生成されます。


今回私が作ったCSSは以下。


これを全てコピーしておきます。

シンプリシティ子テーマにCSSコードを追記



qcXq6CJaDdryWDW1472794265_1472794279


ワードプレスのダッシュボード→外観→テーマの編集に進みます。


スタイルシート(style.css)に先ほどのCSSコードを貼り付けます。


.sample2 {
position: relative;
color: #000000;
background: #feb5f7;
font-size: 16pt ;
border: 3px solid #fdc47b;
margin: 10px 10px 23px 10px;
padding: 10px 5px 10px 10px;
border-radius: 3px;
box-shadow:1px 3px 7px 0px #666666 ;
}
.sample2:after, .sample2:before {
content: “”;
position: absolute;
top: 100%;
height: 0;
width: 0;
}
.sample2:after {
left: 40px;
border: 10px solid transparent;
border-top: 10px solid #feb5f7;
}
.sample2:before {
left: 37px;
border: 13px solid transparent;
border-top: 13px solid #fdc47b;
}


その後ファイルを更新。

実際に見出しを記事に書いてみよう！



先ほどの見出し生成ツールにあるCSSの下にhtmlコードがありますので
コピーしましょう。


VOtq8PKZ32Rlyer1472794656_1472794666


シンプリシティの記事作成画面に戻り、テキストモードにしてhtmlコードを貼り付けます。


BJDBRJrKALcFmMF1472794834_1472794843


今回はh2タグを設定しますので、htmlコードをペーストしたらh3→h2へ変更します。


その後公開をクリック。


tPfbpQAOeVNEwCN1472795008_1472795015


できました！お疲れ様でした(^-^)//””


このように、見出しメーカーを使えば、あなたのサイト内容に合った色やデザインの

見出しが作れちゃいます！


見出しはよく見てもらえる箇所なので、ぜひオリジナルの見出しを作ってみてくださいね♪


シンプリシティテーマを導入したら目次を必ず設定しましょう！
目次はSEO効果もあります。


>>シンプリシティの目次設定はこちら！




・ノウハウコレクターになってしまっている
・アフィリエイトって稼げるの？

などなど、アフィリエイトのご相談はお気軽にあーこまでお問い合わせください♪

お問い合わせには100%回答していますし、
みなさんに喜んでいただいています^^
↓　↓　↓
>>あーこに問い合わせしてみる