賢威のSEO効果を最大限に活かすにはカスタマイズは最小限に

スポンサーリンク

SEOテンプレート賢威の特徴などをお伝えするページです。

賢威７の「keni71_wp_cool_black」に基づいてカスタマイズの方法などをお伝えしますが、カスタマイズの前にまずディフォルトのテンプレートを確認してみましょう。

  1. テンプレート賢威バージョン７の特徴とカスタマイズ
    1. テンプレートファイルの中味は
    2. サムネイル画像やアイキャッチ画像が標準のテンプレート
  2. 賢威のカスタマイズは最低限に
    1. 背景色やアンカーテキスト色の変更
      1. つづいてアンカーテキストの変更です
      2. 子テーマの「style.css」を変更する件

テンプレート賢威バージョン７の特徴とカスタマイズ

テンプレートはダウンロードページからダウンロードします。
「HTML版」と「WordPress版」があります。

賢威

テンプレートファイルの中味は

ファイルが格納されたフォルダは次のようになっています。

賢威

賢威

HTML版はサブディレクトリ用のフォルダそれぞれに「index.html」が用意されています。フォルダの名前は自由に変えてもかまいませんが、内部リンクのURLの変更は忘れないで下さい。

WordPress版は親テーマと子テーマを一緒にインストールした方がよいと思います。
子テーマのインストールの際には「style.css」に変更を加えなければなりませんが、それは後ほど説明します。



サムネイル画像やアイキャッチ画像が標準のテンプレート

ウェブページ閲覧の半分はスマートフォンで行われている現代、アイキャッチ画像は必須のアイテムになっています。

HTML版のトップページはこんな感じです。

賢威

新着記事はサムネイル画像付きで表示されます。
左サイドにもサムネイル画像付きの記事メニューが並びます。
WordPress版はディフォルトだとHTML版と同じような感じになりますが、プラグインの「Page Builder」を使ったりしてもっと自由なデザインも可能です。

個別の記事ページはサムネイル画像にも使われるアイキャッチが配置されたり、ライター同士が会話している対話形式風のコンテンツにする“吹き出し”なども作ることができます。

賢威

賢威のカスタマイズは最低限に

賢威はSEOとユーザーファーストを考えて作られたテンプレートです。

  • フォント
  • 文字サイズ
  • 見出しサイズ
  • 文字間隔
  • 要素間隔
  • 内部リンク構造

かなり細かな部分を考え抜いて作られたテンプレートですので、カスタマイズは最低限に抑えた方が賢威のいい面を活かせると思います。

そうは言っても“色”関係は好みがあるので、自分らしいテンプレートにしたいということもあるでしょう。

ここでは、“色”に係わるスタイルシートの変更について説明します。

背景色やアンカーテキスト色の変更

背景色リンクの文字色は「base.css」を変更するのですが、親テーマのファイルを修正するとバージョンアップした時に、修正箇所が元に戻ってしまいます。
“子テーマ”の「base.css」に書込んでも親テーマが優先されるので反映されません。

賢威７では管理画面から「base.css」の上書きを出来るようになっています。

[外観] → [カスタマイズ] → [追加CSS]の画面を表示させます。

ディフォルトCSSでは

body{
font-family: Verdana, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
background:#f1f1f1;
}

のようにグレーになっていますので、背景色を“白”に変えます。

[追加CSS]にbodyの背景色だけ指定します。

body{
	background:#ffffff;
}

次にトップページのメイン画像の背景色も同様にグレーに指定されています。

.main-image{
z-index: 100;
position: relative;
border-bottom:#f1f1f1 solid 2em;
border-top:#222 solid 3px;
margin-bottom:-3px;
margin-top:-3px;
background:#f1f1f1;
}

ここは下の部分だけを“白”に変えます。

.main-image{
  border-bottom:#ffffff;
	background:#ffffff;
}

つづいてアンカーテキストの変更です

アンカーテキストは本文の文字色と同じ濃いグレーでアンダーラインが付いています。マウスカーソルが上に乗った時には、少し青っぽい色に変わるようになっています。

a{
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
color: #444;
}
a:hover,
a:active,
a:focus{
color: #5077A2;
}

リンク色を好きな色に変えます。

a{
	color: #好きな色;
}
a:hover,
a:active,
a:focus{
	color: #好きな色;
}

色のコードはWEB色見本で確認して下さい。

賢威はフォーラムが充実しているので、分からないことなどあっても大体解決できるので、使っていて困ることは正直ありません。
また、WordPress版は頻繁にバージョンアップがされているので、セキュリティ的にも安心して使えるテンプレートです。

検討されている方はこちらの記事も参考になると思います。

WordPressテンプレート「賢威」のレビューとカスタマイズの実例
SEOテンプレート「賢威」。HTMLサイトのファイルシステムとして誕生しましたが、今ではワードプレス用テンプレートとして多くのユーザーに使われています。カスタマイズのしやすさと充実したフォーラムが導入後の疑問点も解決してくれ、ウェブサイトを自由自在に構築できる使いやすさが評判です。の実績と2万人を超えるユーザーに支持されている「賢威」。HTML5に対応したバージョン７につづいて次バージョンンの開発も行われています。
www.webmaster-guide.com
2018.08.04

子テーマの「style.css」を変更する件

子テーマをインストールする場合は、子テーマフォルダに入っている「style.css」にコードを追加しないと、子テーマが有効になりません。

/*
Theme Name: 賢威7（子テーマ）
Template: keni7_wp
*/ 

/*
Theme Name: 賢威7（子テーマ） 
Template: keni71_wp_cool_black_*********
*/

Template: keni71_wpの後にインストールする賢威のフォルダ名を記入します。

》》》 2万人を超えるユーザーが選んだSEOテンプレート【賢威】

》》》 お名前.comのレンタルサーバーと同時なら賢威がお安く

コメント

ホーム
トップ