keni06

今回は、賢威でトップページで表示される記事の見出しのカスタムについて解説します。

 

このカスタムを行うと、ディフォルトでこのような表示の見出しが

02

この様にカスタムすることが出来るようになります!

02

 

見出しだけでもかなり印象が変わりますので、是非やってみてください!^^

 

カスタム方法 CSSはここをいじろう!

トップページの見出しは、cssデータのh2が割り振られていますので、

h2の表示を変えれば、必然的に変わるという事です。

 

【ダッシュボード】⇒【外観】⇒【テーマの編集】で編集画面を開きます。

その中から、【design.css】をクリックし

表示されるcssデータの中から、以下の文字列を探してください。

/*--------------------------------------------------------メインコンテンツ(本文)--------------------------------------------------------*/#main-contents{ font-size: 1.4em; }#main-contents .contents{margin-bottom: 3.5em;padding: 0 10px;}/*●H2タグ*/#main-contents h2{margin: 0 0 1.5em;padding: 0.5em 1em;border-bottom: 2px solid #b3d465;background: url(./images/title/bg-conts-h.gif) left top repeat-x #fff;font-size: 1.286em;font-weight: bold;}

この12行目の h2 以降の{ から }を全て、任意の見出しコードに差し替えればOKです!

 

因みに、サンプルで最初に表示させたコードはこちら!

↓↓↓こうなります!↓↓↓

03

/*●H2タグ*/#main-contents h2{margin: 0 0 1.5em;padding: 0.3em 0.5em;border-left: 28px solid #b92a2c;background: url(./images/common/bg-dot.png) #333;color: #fff;font-size: 1.429em;}

色味を変えるだけでもグッと変わりますよ♪

 

見出しカスタムで超お勧めサイトはこちら!

見出しを変えるうえで、デザインが欲しいと思うので

僕が参考にしているお勧めサイトをご紹介します!

 

見出しのデザインをCSS(スタイルシート)で変更する方法

WordPressの使い方。個人ブログの作り方 | WPナビ 様

 

画像を使わずコピペだけでWordPressの「見出し」タイトルがカッコよくなるデザイン9連発!

レンタルサーバー Staff Blog 様

 

CSSで作る見出しデザイン

Web’Notes 様

⇒WordPressの見出し(h1・h2・h3・・・)をCSSでデザインして見やすくしてみた

営業・集客のコツ・ノウハウがみるみるわかるブログ 様

 

他にもいろいろありますので、是非調べてみてください!

 

また、色味を変えたい場合は

こちらのサイトを参考にされると便利ですよ!

 

color-sample.com

 

原色大辞典

 

サムネイル画像の表示も変えると尚良くなりますよ!

最初にお見せした画像の様にカスタムをされるのであれば

こちらのサムネイルのカスタムを併せて行っていただければ出来ますよ♪

 

【賢威カスタム】トップページアイキャッチ画像の大きさ・レイアウトの変更方法

 

賢威万能だけど、そのままだと飽きてしまいますからね。

というよりは、カスタムしてナンボなので、使いこなすなら

是非カスタムしてみてください!

 

賢威はSEOに強いだけではなく、このようにさまざまなカスタムに対応していますので

オウンドメディア構築はもってこいのテーマです。

SEOに強いテーマ・柔軟なカスタムに対応できるテーマに興味のある方は、お勧めしますよ!


【賢威】

鉄板テーマです。
カスタム性・SEO対策抜群でダントツで人気のテーマです!
初心者でも導入しやすく、テンプレートも豊富なのでこれ一つで長く使うことが出来ます!

 

manual