SEO内的対策万全の賢威6.1＋ワードプレスでｈ３タグを太くしてみた
ご訪問有難うございます。
目次
h３見出しタグをもっと目立たせようと思い太く縦幅をする方法
今現在のh3見出しの画像は以下です。
上図のｈ３見出しの縦の幅を大きくして迫力あるもっと目立つようにしてみます。
投稿記事や固定ページで「h3タグ」を、もっと目立たせたいのでh3見出しを、カスタマイズします。
１：見出しの文字のサイズを投稿記事タイトル（h2）と大体同じ位のサイズにしてみます。
２：h3タグ見出しの、上に「もう３行分程度」余白を作ろうかと思いました。
３：h3タグ見出しの、「下」に「あと１行程度」を空けたい。
・文字サイズを、賢威の初期設定のh2と同じにするには、「font-size: 1.286em;」に変更します。
・h3の文字サイズと余白は、「#main-contents h3」にて、「font-size」と「margin」をご変更いたします。
上下の余白を、上に3行分、下に1行分太くするためには、「margin: 5em -10px 3em;」とご指定致します。
「5em」が上の余白、「3em」が下の余白ですので、自由に変更してみて下さい。
それでは、以下の図のように進んでいきます。管理画面＞＞外観＞＞テーマ編集
テーマ編集の画像です。管理画面＞＞外観＞＞テーマ編集＞＞design.cssの画面
変更前
/*●H3タグ*/
#main-contents h3{margin: 0 0 1.5em;padding: 0.8em;border: 2px solid #414141;font-size: 1.143em; font-weight: bold;}
変更後
/*●H3タグ*/
#main-contents h3{margin: 5em 0 3em;padding: 0.8em;border: 2px solid #414141;font-size: 1.286em; font-weight: bold;}
もう一方で、「#main-contents .contents h3」をWordPress用の変更箇所として、上下の余白を指定致します。
そして、2つ目の数値が「-10px」と記述されていますけど、これは左右の余白を示していて、この値は触らないで下さい。
変更前
#main-contents .contents h3{margin: 0 -10px 1.5em;}
変更後
#main-contents .contents h3{margin: 5em -10px 3em;}
photo by:
Kris Krug
Google+
この記事を読んだ人は次の記事も読んでいます。
内的SEO満載の賢威６．１でトップメニューの色と文字色を変える方法
賢威６．１＋ワードプレスの日付年月日を消したい。
賢威6.1+ワードプレスのヘッダー画像を横幅いっぱいに広げたい
賢威６．１のグローバルメニューのプルダウンの横幅を広げたい。
ワードプレス（賢威６．１）に枠線をつけました。
トップ・ページの抜粋部分の文字数が少ないので増やします。
賢威でヘッダー右上のサイトマップと固定ページをひもづける方法
賢威６．１の最新情報の日付を消す
賢威６．１でトップを固定ページにし、最新情報と投稿ページたす方法
賢威６．１で見出しｈ２の文字を大きくする方法。
賢威＋ワードプレスでコピペで使える枠線のHTMLソース
賢威６．１＋ワードプレスのSyntaxHighlighter Evolvedを説明。
賢威６．１でグローバルメニューの項目の境界縦線の色を変える
賢威で投稿ページの最後に、次・以前のページをタイトルで入れる方法
賢威６．１の３カラムで、サブコンテンツとサイドバーを右側に並べる方法
賢威＋ワードプレスで文字の色をサイト全体で変える
SEO内的対策満載の賢威６．１で発リンク画像アイコンを付ける方法
賢威を入れた新しいワードプレスでリビジョンが気になる
賢威6.1のヘッダー画像とトップとメニューの間を詰める方法です。
賢威6.1でTablePressの表示幅がセルごとに等分して表示されてしまう
最近のコメント