賢威で作るメインサイト3:カスタマイズの実際

今回は「賢威」のWordPressテンプレートで作ったサイトのカスタマイズです。「賢威」がいかにSEO的に優れていても、あの画面だけは素っ気なさ過ぎますね。

ここで演習サイト(このサイト上部のナビ部をクリック)を題材にして、その作成手順をご紹介します。カスタマイズの参考にしてください。

カスタマイズを始める前にブラウザに付属している便利なツール、開発者ツールをご紹介しましょう。ご覧の画面上で右クリックするとメニューが開きます。

ブラウザがChromeなら「要素を検証」、IEは「要素の検査」、Firefoxなら「要素を調査」を選ぶと画面の下部に細かい文字の並んだ画面が開きます。キーボードからは「F12」のファンクションキーで開きます。

驚くことに左半分がHTMLで書かれたサイトのソースコード、右には画面の見栄えを左右する修飾用のスタイル(つまりCSS)が表示されています。

このツールの素晴らしさをいくつか紹介しましょう。

・表示されているサイト画面とそれを実現している裏の仕掛けが同時に見られる
・右サイドのCSSを変更するとその効果が即刻反映される
・お試しが過ぎて画面が崩れても元のファイルは無傷で、再読み込みすれば復旧する

開発者ツールはサイト制作に携わるものには必携のツールなので、この際使い方を是非覚えてください。

Chromeでの使い方を解説した下記サイトが見やすいかと思います。IEでもFirefoxでも使い方はほとんど同じです。なお、このツールには他にもいろんな機能が付いていますが、プロではない私たちは左にHTML、右にCSSの標準的な組み合わせだけで充分です。

参考リンク:「Google Chrome デベロッパーツール」の使い方

先ず、サイトの顔であるトップページを変えてみます。特別な指定をしなければこのトップページのデザインが投稿ページ始め他のページにも反映されます。なお、これからWordPressの構成ファイルの一部を変更していきますが、いくつか注意点があります。

・ファイルの操作には「メモ帳」ではなく「TeraPad」などのテキストエディタを使う。

・ファイルを間違って変更するとWordPress画面が真っ白くなって復旧不能となる場合がある(特にPHPファイル。)ファイル変更時には必ず変更前のファイルを保存しておく。

・カスタマイズには系統だったHTMLとCSSのガイドブックが必須です。私のお勧めは「HTML&スタイルシート:技術評論社」です。見やすく・わかり易く・携帯しやすいポケット版です。

サイト作成で初心者に頻発する記述の間違い、その多くは似て非なる HTMLの記述法とCSSの記述法の混同によるもの 。本書はHTMLとCSSの2部構成なので思い違い防止にも役立ちます。

カスタマイズの実際

画面の幅を調整する:layout.css

賢威の初期設定は950PXですが、演習サイトの幅は1000PXに設定しました。ダッシュボードから「外観」 → 「テーマの編集」へと進むと、右サイドにファイルが並んでいます。この列の下の方、「layout.css」をクリックすると中央のメイン画面にファイルが開きます。

行の中央から少し上に「2カラムレイアウト」というコメントがあります。そのブロックの一部を下記のように変更します。

.col2 #top-in,
.col2 #header-in,
.col2 #global-nav-in,
.col2 #main-in,
.col2 #main-image-in,
.col2 #footer-in,
.col2 .copyright p,
.col2r #top-in,
.col2r #header-in,
.col2r #global-nav-in,
.col2r #main-in,
.col2r #main-image-in,
.col2r #footer-in,
.col2r .copyright p{
	width: 950px;  → 1000px
	margin: auto;
}
.col2 #sidebar,
.col2r #sidebar{ width: 29%; } → 左右の比率を調整、合計は100%未満に
.col2 #main-and-sub,
.col2r #main-and-sub{ width: 68.8%; } → 同上

画面の最上部の帯部の背景色を変え、下にボーダーを追加する:design.css

最上部、「サイトマップ」と表示のある部分の背景色は最初は白なので、グレーに変えます。「テーマの編集」から「design.css」を開きます。「design.css」はボリュームがあるので探すのが大変、そこで「Ctrl」+「F」で検索窓を開き「#top」を探します。

下記記述のハイライト部分、4行目の色指定「#fff」を「#f3f3f3」に変えます*1。なお、色は通常6桁で指定しますが同じ文字が連続する場合は3桁でOKです。ボーダーを付けるには5行目をそっくり追加します。

#top{
	position: absolute;
	top: 0;
	background-color: #fff; → #f3f3f3
	border-bottom: 1px solid #a9a9a9;  → (この行を追加)
	font-size: 1.2em;
}

ヘッダー部の背景を変える:design.css

ヘッダー部とは「王道のネットビジネス研究所」と表示のある部分、でこれを薄い水色に変えます。

#header{
	background-color: #fff; → #f0f8ff
	font-size: 1.2em;        
}

なお、サイトタイトルである「王道のネットビジネス研究所」の大きさを変えたければ1ブロック下のヘッダーロゴの指定を変えます。

#header .header-logo{
	margin-bottom: 0.2em;
	font-size: 3em; → 大きさを変更
}

ヘッダーロゴ下のテキストを変える

ロゴの下にある「h1テキストが入ります」は「賢威の設定」 → 「トップページ」の設定画面から変更できます。h1見出しはとても重要なので、キーワードをちりばめよく考えて設定します。

投稿ページ ではページタイトルやあなたが設定したテキストが表示されますが、とても重要なテーマなのでページを改めて別途解説します。

ヘッダーロゴ下のテキストとナビ部分の間隔を狭める:design.css

少し間延びした感じがあるので、引き締めます。

#header h1{
	margin-bottom: 1em; → 0.5em
	font-size: 1.167em;
}

ナビ部分の項目を追加する

制作途上のあなたのサイトにはまだ「サンプルページ」しかありませんね。ここに賢威導入マニュアルの60ページ以降の解説に従って項目を増やします。WordPressではナビと言わずメニューという表現になっています。

演習サイトでは演習目的でナビ部分を表示するため、「TOP」以外は全部を固定ページで作りました。そのため、まず最初にタイトル名だけの固定ページを作り、本文なしで「公開」してしまいます。「公開」しないとナビ部分への表示がうまくいかないからです。

次に、導入マニュアルに従ってメニューを作ります。演習サイトではメニューの名前を「nav」、ナビ項目のTOPを「リンク」で、記事の一覧・無料講座・べんり帳・問い合わせを固定ページでメニューを作りました。そして「メニューを保存」をクリック。

以上であなたのサイトにナビが表示され、クリックでページが変わったはずです。メニュー作成時点で「固定ページ」ではなく、「リンク」を選択すれば外部サイトに自由自在にリンクを張れます。

このような機能があるために、WordPressは日記ブログの枠を超えて企業サイトとして活用する企業もますます増えています。

次はナビ部のデザインを変えてみましょう

ナビ部分のデザインを変える:design.css

◇ 下ボーダーの変更

#global-nav{
	background-color: #fff; → #f0f8ff
	border-bottom: 4px solid #000; → 1px #a9a9a9
} /*メニュー下のラインの設定*/

◇ 下マージンの縮小

#menu{
	padding-bottom: 5px; → 0
	font-size: 1.2em;
}

◇ ナビ項目にボーダー追加、色変更

#global-nav #menu li{
	position: relative;
	float: left;
	margin: 0;
	border-top:solid 1px #a9a9a9;/*上側のボーダーの色*/(この行追加)
	border-right: solid 1px #000; /*右側のボーダーの色*/ → #a9a9a9
	list-style: none;
	font-weight: bold;
}

◇ ナビ列左側ボーダーを他と整合

#global-nav #menu li.first{ border-left:solid 1px #000; } → #a9a9a9
} /*一番左のメニューだけに追加指示*/

◇ ナビボックス、上下スキマを縮小

#global-nav #menu li a{
	display: block;
	padding: 0.8em 2em; → padding: 0.5em 2em
	color: #333; /* メニューのフォントの色*/
	text-decoration: none;
}

メイン部分のデザインを変える:design.css

◇ 最上部のスペース微増・・・・・投稿ページではパンくずリストが挿入されるので・・・

#main-in{ padding-top: 1.5em; } → 3em

◇ 右側スペースを微増

#main-contents .contents{
	margin-bottom: 3.5em;
	padding: 0 10px; → 0 30px 0 10px

H2タグのデザインを変更

賢威WordPressはページタイトルにH1見出しではなくH2見出しを使っています。ちょっと変則なのでそれ自体は別途解説しますが、「賢威では本文の最上位見出しがH2である」ことをまず受け入れ、そのデザインを少し変えることにします。

#main-contents h2{
	margin: 0 0 1.5em;
	padding: 0.9em; → 0.5em 1em 0.3em 1em
	border-top: 3px solid #000; → (この行削除)
	border-bottom: 1px solid #a9a9a9; → (この行追加)
	border-left: 3px solid #ccc; → (この行追加)	
	background: url(./images/title/bg-conts-h2.gif) 
     left top repeat-x #eaeaea;
	font-size: 1.286em; → 1.6em
	font-weight: bold; → (この行削除)

サイドバーのデザインを変える:design.css

◇ 背景色を変更

sub-contents,
#sidebar,
#sidebar-in,
#sub-contents-in{
	margin: 0;
	padding: 0;
	background-color: #f3f3f3; → (この行追加)
}

◇ 見出しデザインを変更(サイドバーのH3見出し、メイン画面のH3とは別)

.sub-column h3{
	padding: 0.7em; → 0.5em
	border: 1px solid #959595; /*サイドバー見出しの枠線*/ → (この行削除)
	border-top: 3px solid #414141; /*見出しの上部の太線*/ → (この行削除)
	border-bottom: 1px solid #a9a9a9; → (この行追加)
	border-left: 2px solid #c0c0c0; → (この行追加)
	background: url(images/title/bg-conts-h2.gif) left top repeat-x; → (この行追加)      
	color: #454545; /*見出し文字の色*/
	font-weight: bold;
}
.sub-column .contents h3{
	margin: -0.5em;
	margin-bottom: 0.8em; → 0.3em
}

◇ 見出しの左にスペース追加

#sub-contents,
#sidebar,
#sidebar-in,
#sub-contents-in{
	margin: 0; → margin: 0 0 0 1em;
	padding: 0;
	background-color: #f3f3f3;
}

◇ サイドバーの検索窓を非表示にする:WordPress操作画面

画面の特等席に検索ボックスがあるのでとりあえずサイドバーの最下部に移動にします。必要と感じたら再移動も簡単です。

「外観」から「ウィジェット」を開きます。画面右側にサイドバーに表示している項目が並んでいるので、「検索」をクリックしながら一番下に移動すれば完了です。

コメント欄を削除する:comments.php

WordPressはブログソフトですから投稿記事にはコメント欄が表示されます。しかし王道サイトは通常コメント欄は利用しないでの、コメント欄自体を消してしまいます。

「テーマの編集」から「comments.php」を開きます。その全文をコメントアウトします(全文消去に相当)。下記のようにソースコードの最初と最後にコードを追加します。

<!--▼コメント欄削除--> → 追加
<?php if(0) { ?> → 追加
現在のソースコード
<?php } ?> → 追加
<!--▲コメント欄削除--> → 追加

上部ソーシャルボタンを削除する:single.php

賢威WordPressは全ページの上部と下部に「ツイート」などのソーシャルボタンが表示されます。王道サイトは記事優先のスッキリ画面にしたいので上部ボタンを削除し、下部ボタンだけにします。

「テーマの編集」から「single.php」を開き、上部ソーシャルボタンを指示している部分をコメントアウトします。

<!--▼上側ソーシャルボタン削除--> → 追加
<?php if(0) { ?> → 追加
<?php get_template_part('social-button'); ?>
<?php } ?> → 追加
<!--▲上側ソーシャルボタン削除--> → 追加

ソーシャルボタンを減らす:social-button.php

現在の「はてなブックマーク、Twitter、Facebook、Google+」から利用者の多い「Twitter、Facebook」の二つに絞ります。ページの表示速度が向上するとのうわさがありますので。

「テーマの編集」から「social-button.php」を開きます。該当部分をコメントアウトします。

<!--▼はてぶ&Gplus削除--> → 追加
<?php if(0) { ?> → 追加
<li class="sb-hatebu"></li>
<li class="sb-gplus"></li>
<?php } ?> → 追加
<!--▲はてぶ&Gplus削除--> → 追加

ページタイトル下の日付とカテゴリーを削除する:single.php

賢威WordPressでは投稿ページのページタイトルの上には「パンくずナビ」、下には「投稿日とカテゴリー」があって少しうるさい感じです。下の「投稿日とカテゴリー」を消します。

<!--▼ページタイトル下Time&Cat削除--> → 追加
<?php if(0) { ?> → 追加
<p class="post-meta"><span class="post-data"><?php the_time(get_option( 'date_format')); //the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>
<?php } ?> → 追加
<!--▲ページタイトル下Time&Cat削除--> → 追加

その他のデザイン調整

王道サイトは以上の他にもマイナーなスペース調整を何カ所かしています。必要とあらば、開発者ツールをどんどん使ってあなた好みの調整を加えてください。

次回はサイトの顔、表玄関であるトップページのデザインを絞り込んでいきます。

サブコンテンツ

このページの先頭へ