CSS見出しジェネレーターを使ってシンプリシティで
かんたんに見出しタグを変更する方法をご紹介します。
h2タグやh3タグなどの見出しはユーザーさんの目につきやすい場所です。
あなたのサイトテーマに合ったデザインの見出しタグを作りましょう!
目次
シンプリシティの見出しタグの変更|リボン風見出しの作り方
今回は、リボンのような見出しを作ってみましょう。
このタグデザインは女性らしくて美容商品サイトなどに相性がよさそうですね。
WEB道の見出しジェネレーターで見出しタグCSSを作成
http://web-dou.com/tool/css_gen_h.php
リボン風見出しを作るために項目を埋める
①は背景色、②は枠の色、③は文字色になります。
マウスを合わせると色彩の一覧が出てくるので好きな色を選んでいきましょう。
④は見出しの中の文字を記載します。その後「ジェネレート」をクリック。
③CSSコードをコピー
ジェネレートをクリックするとCSSが自動で生成されます。
今回私が作ったCSSは以下。
これを全てコピーしておきます。
シンプリシティ子テーマにCSSコードを追記
ワードプレスのダッシュボード→外観→テーマの編集に進みます。
スタイルシート(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コードがありますので
コピーしましょう。
シンプリシティの記事作成画面に戻り、テキストモードにしてhtmlコードを貼り付けます。
今回はh2タグを設定しますので、htmlコードをペーストしたらh3→h2へ変更します。
その後公開をクリック。
できました!お疲れ様でした(^-^)//””
このように、見出しメーカーを使えば、あなたのサイト内容に合った色やデザインの
見出しが作れちゃいます!
見出しはよく見てもらえる箇所なので、ぜひオリジナルの見出しを作ってみてくださいね♪
シンプリシティテーマを導入したら目次を必ず設定しましょう!
目次はSEO効果もあります。
>>シンプリシティの目次設定はこちら!
・ノウハウコレクターになってしまっている
・アフィリエイトって稼げるの?
などなど、アフィリエイトのご相談はお気軽にあーこまでお問い合わせください♪
お問い合わせには100%回答していますし、
みなさんに喜んでいただいています^^
↓ ↓ ↓
>>あーこに問い合わせしてみる