BizVektorをお使いの方はご存じのように投稿を一覧表示するときにアイキャッチ画像も表示することができます。

投稿一覧に付いてくるアイキャッチ画像

もう少し大きく表示したいと思った方のために、表示サイズを設定する方法を紹介します。

BizVektorのアイキャッチ画像とは

そもそも、BizVektorのアイキャッチ画像のサイズは幅200px、高さ200pxです。functions.phpに次のように定義されています。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 200, 200, true );

これにより、投稿にアイキャッチ画像を設定すると、wp-content/uploadsフォルダに「ABCDEFG-200x200.jpg」のようなファイルが作成されます。必ずしも正方形の画像をアップロードするとは限らないので、幅および高さは最大で200pxになるように縮小、トリミングされます。

投稿一覧で表示されたアイキャッチ画像を見ると、「ABCDEFG-200x200.jpg」という幅200px、高さ200pxの画像が表示されていることがわかります。

幅200px、高さ200pxのアイキャッチ画像が表示されている

また、HTMLソースを見ても幅200px、高さ200pxで表示するための属性が設定されています。

<img width="200" height="200" 

アイキャッチ画像が小さく見える理由と対策

ところが、BizVektorの記事一覧を見ると、幅200px、高さ200pxの画像が小さく見えます。これは気のせいではなく、CSSで次のように設定されているため実際に小さく表示されています。

#content .infoList .infoListBox div.thumbImage div.thumbImageInner img {
    width: 98px;
    height: auto;
    border: 1px solid #CCC;
}

「width: 98px;」によって、幅200pxの画像が幅98pxで表示されています。この部分を好きな数値に変更すれば、自由なサイズでアイキャッチ画像を表示することができます。上記のようにアイキャッチ画像は「幅200px、高さ200px」で作成されているので、200pxまではきれいに表示できるはずです。

#content .infoList .infoListBox div.thumbImage div.thumbImageInner img {
    width: 200px;
}

ただし、スマホ表示との兼ね合いにも注意してPCのみでの表示など、制限を付けておいた方が良いかもしれません。

@media (min-width: 770px) {
    #content .infoList .infoListBox div.thumbImage div.thumbImageInner img {
        width: 200px;
    }
}

表示結果は次のようになります。

アイキャッチ画像を幅200pxで表示

BizVektorの初期設定では投稿やお知らせはタイトル・抜粋・アイキャッチ画像という構成で上から下に一覧表示されますが、Grid Unitプラグイン（有料）を使うとグリッド表示（タイルを並べたようなレイアウト）することができます。

BizVektorでも投稿のグリッド表示が可能です

投稿・お知らせの一覧ページでグリッド表示に

投稿・お知らせを一覧表示するページやアーカイブでグリッド表示するには、対象の投稿タイプ（投稿・お知らせなど）を「外観」-「Grid Unit」メニューでチェックします。

グリッド表示する投稿タイプを選択

これにより、投稿・お知らせの一覧ページがグリッド表示になります。日付の表示／非表示も選択することができます。

ブログページにグリッド表示された投稿

トップページ（コンテンツエリア）でグリッド表示

トップページに投稿やお知らせをグリッド表示する場合は「外観」-「ウィジェット」メニューから「BizVektor Grid Unit」ウィジェットを「コンテンツエリア（トップページ）」に追加します。

「BizVektor Grid Unit」ウィジェットを「コンテンツエリア（トップページ）」に追加

トップページに投稿がグリッド表示されるようになります。

トップページに投稿をグリッド表示する

複数の「BizVektor Grid Unit」ウィジェットを配置できるので、「新着情報」と「お知らせ」を別々に表示したり、表示件数やタイトルの設定も自由にできます。

トップページに複数のグリッドを設置できる

トップページのサイドバーを非表示にすれば、グリッド表示の記事を前面に押し出すことができます。BizVektor標準の「3PRエリア」を拡張した「6PR」「9PR」のような使い方もイメージできます。

トップページのサイドバーを非表示にしてグリッド表示を前面に押し出す

Grid Unitプラグインで表示できるのは投稿やお知らせだけではありません。オリジナルで追加したカスタム投稿もウィジェットでチェックするだけでトップページに一覧表示できます。

カスタム投稿も簡単にトップページにグリッド表示できる

「新着物件」「おすすめショップ」「近日開催のイベント」など、好きなカスタム投稿をトップページにグリッド表示できます。

まとめ

以上、簡単にGrid Unitプラグインの活用例を紹介しました。作品集（ポートフォリオ）・制作実績などをお客様に紹介したり、開催されたイベントのレポートなどもグリッド表示によって躍動感のあるレイアウトで見せられるようになるでしょう。

強いて課題をあげれば、グリッド表示までに若干タイムラグが生じる場合があることでしょうが、サーバーなどの環境によるでしょうし、レンタルサーバーもドンドン高速化されているので、それほど気にする必要もないと思います。

画像付の投稿を効果的に見せる方法を模索している方や、物件紹介や作品・実績紹介サイトの見せ方を試行錯誤中の方は、ぜひ、ご利用ください。

記事をグリッド表示できる「BizVektor Grid Unit」の購入はこちらから

BizVektorのバージョン1.7ではCSS関連で大きな変更がありました。子テーマを使ってカスタマイズしていた場合、旧バージョンからアップデートするとレイアウトが崩れる場合があります。

原因は、テンプレートファイル（index.php、single.php、page.phpなど）の「id="content"」の部分です。

<div id="content">

BizVektor1.7以降は「class="content"」が追加されています。

<div id="content" class="content">

これまで「id="content"」（#content）に対して指定されていたスタイルが「class="content"」に対する指定に変更されている部分があります。

CSSの差分をチェックできる方はplain.cssなどを比較してみてください。以下、BizVektor 1.6.3とBizVektor 1.7.3のplain.cssから同じ部分を抜粋してみます。

#content { margin-bottom: 36px; text-align:left; display:block; overflow:visible; }
#content hr	{ clear:both; display:block; margin:1em 0; }
#content .post	{ padding-bottom:25px; }
#content .alert	{ color:#f00; }
#content .caption	{ font-size:11px; line-height:110%; }
#content .center{ text-align:center; }
#content .right	{ text-align:right; }
#content .nowrap	{ white-space:nowrap; }
#content .sectionBox	{ margin-bottom:30px; display:block; overflow:hidden; }
#content .entry-meta	{ margin-bottom:15px; font-size:11px; color:#666; }
#content .leadTxt { color:#333; }

BizVektor 1.7.3では次のようにセレクタが「#content」が「.content」に変更されています。セレクタがidからclassに変わったということです。

.content { margin-bottom: 36px; text-align:left; display:block; overflow:visible; }
.content hr	{ clear:both; display:block; margin:1em 0; }
.content .post	{ padding-bottom:25px; }
.content .alert	{ color:#f00; }
.content .caption	{ font-size:11px; line-height:110%; }
.content .center{ text-align:center; }
.content .right	{ text-align:right; }
.content .nowrap	{ white-space:nowrap; }
.content .sectionBox	{ margin-bottom:30px; display:block; overflow:hidden; }
.content .entry-meta	{ margin-bottom:15px; font-size:11px; color:#666; }
.content .leadTxt { color:#333; }

これを見てピンと来た方は、さっそく修正作業に取りかかってください。

よくわからない方のため、アップデート後にレイアウトが崩れる例を以下に紹介します。

たとえば、旧バージョン（1.7以前）のBizVektorをカスタマイズするため、子テーマフォルダ（例：biz-vektor-child）にindex.phpやsingle.phpなどのテンプレートをコピーしているとします。

子テーマフォルダにテンプレートをコピーしている例

BizVektor 1.6.3では問題なく表示されます。

問題なく表示されていたページ（BizVektor 1.6.3）

親テーマをバージョン1.7にアップデートすると、レイアウトが崩れます。

BizVektor 1.7にアップデート後、レイアウトが崩れる

子テーマフォルダにコピーした旧バージョンのテンプレートに「content」というclassが存在しないことが原因です。

念のため書きますが、アップデート後、必ずレイアウトが崩れるわけではありません。

上記のようなテンプレートファイルを子テーマフォルダにコピーしてカスタマイズしている場合に発生します。

対策は、旧バージョンのテンプレートファイルで「id="content"」が指定されたdivタグに「class="content"」を追加することです。

まずは、テンプレートファイルの先頭あたりから次のdivタグを見つけます。

<div id="content">

次のように「class="content"」を追加します。

<div id="content" class="content">

これで、レイアウトの崩れは解決するはずです。

崩れたレイアウトが元に戻る

次のファイルを子テーマフォルダにコピーしている場合は同じ修正が必要です。

• 404.php
• 503.php
• attachment.php
• how-to-use-and-customize.md
• index.php
• page.php
• search.php
• single.php
• single-info.php

詳しくは、以下のページをご覧ください。

▼BizVektor 1.7.0「子テーマでカスタマイズしている方はご注意ください」
http://bizvektor.com/info/v_1_7_0/

BizVektorでWordpress Related Postsプラグインを使うとスマホで表示した関連記事のタイトルが消えてしまう場合があるので、対策を紹介します。

そもそもBizVektor自体で関連記事を表示できるので気づいた方は少ないかもしれませんが、他のテーマでも同じことがあるかもしれないので紹介しておきます。

WordPress Related Postsプラグインで表示される関連記事のイメージは次のようになります。

WordPress Related Postsによる関連記事

スマホで表示するとタイトルが消える場合があります。

スマホで見るとタイトルが消える

原因は、BizVektorの場合はリンクのaタグに「overflow: hidden;」が指定されているためです。この部分に対して次のようなスタイルを指定すればタイトルが表示されるようになります。

/* 関連記事のタイトルを表示する */
a.wp_rp_title {
    overflow: visible;
}

関連記事のタイトルが表示されるようになる

BizVektor本体の関連記事ではなく、あくまでBizVektorでWordpress Related Postsプラグインを使ったときの関連記事なので、お間違いなく。

BizVektorではAll in One SEO Packプラグインを使うことは推奨されていません。大きな理由はmetaタグ（meta description・meta keywords）が重複することです。

meta descriptionとmeta keywordsが重複する

対処は簡単で、All in One SEO Packプラグインを使わない、または、BizVektorを使わない、どちらかの方法で解決できます。

とはいえ、どうしてもBizVektorとAll in One SEO Packプラグインを一緒に使いたいという方のために、metaタグの重複を取り除く方法を紹介します。

ただし、この記事では「こうすれば安全にBizVektorとAll in One SEO Packを一緒に使えますよ！」とおすすめするわけではありませんのでご注意ください。

あくまで、metaタグの重複を解消する方法を紹介するだけです。

以下、BizVektorで対処する方法と、All in One SEO Packで対処する方法を紹介します。

BizVektorで対処する場合

meta descriptionの削除

BizVektorが出力するmeta descriptionはheader.phpから次の行を消せば削除できます。

<meta name="description" content="<?php getHeadDescription(); ?>" />

meta keywordsの削除

BizVektorのmeta keywordsはheader.phpで実行されるwp_headの中で出力されるイメージです。wp_headに追加されたbiz_vektor_seo_set_HeadKeywordsフックによって出力されるので、そのフックを削除すればmeta keywordsを取り除くことができます。

具体的にはBizVektorの子テーマのfunctions.phpに次のコードを入力します。

/* BizVektorのmeta keywordsを削除 */
function remove_meta_keywords() {
	remove_action('wp_head', 'biz_vektor_seo_set_HeadKeywords', 1);
}
add_action( 'after_setup_theme', 'remove_meta_keywords', 100);

All in One SEO Packで対処する場合

meta descriptionの削除

All in One SEO Packが出力するmeta descriptionは次のコードをBizVektor子テーマのfunctions.phpに入力することで削除できます。

/* All in One SEO Packのmeta descriptionを削除 */
add_filter( 'aioseop_description', '__return_false', 100);

meta keywordsの削除

All in One SEO Packが出力するmeta keywordsは「All in One SEO」‐「General Settings」メニューで「Use Keywords」を「利用停止」にすることで出力しないように設定できます。

All in One SEO Packのmeta keywordsを出力しない

BizVektorのグローバルメニューのフォントサイズを変更する方法を紹介します。現在は次のようなイメージです。

BizVektorのグローバルメニュー

以下、メニュー全体のフォントサイズを設定する方法や個別のメニュー項目だけ微調整する方法を紹介します。

グローバルメニュー全体の文字サイズを大きく

メニュー項目のフォントサイズを設定するには、次のようなCSSでメニュー項目のliタグにスタイルを設定する方法があります。

/* グローバルメニュー全体のフォントサイズを設定 */
#gMenu .menu li {
    font-size: 16px;
}

表示結果は次のようになります。指定したサイズはグローバルメニュー全体に反映されます。

グローバルメニューの文字サイズが大きくなる

個別メニューのフォントサイズを微調整

上記で設定したフォントサイズによっては、一部のメニュー項目が2行になって見づらくなる場合があります。

文字数の多いメニューは2行になる場合も

調整方法はいくつかありますが、次の方法で個別メニューのCSSを調整することができます。

個別メニュー項目のIDを調べる

まずは、ブラウザの「要素の検証」（要素の調査）またはHTMLソース表示から、修正したいメニュー項目のidを調べます。

メニュー項目のidをチェック（要素を調査）

この例では「特別席（5階）のご予約」に対応するliタグは次のようになっています。

<li id="menu-item-235" …略…">…略…<strong>特別席（5階）のご予約 …略…</li>

このメニュー項目のIDは「menu-item-235」だとわかります。

調べたIDに対してCSSを指定する

修正対象のメニューID「menu-item-235」に対して次のCSSを指定すれば、このメニュー項目だけフォントサイズを調整できます。4行目まではグローバルメニュー全体のフォントサイズ設定です。

/* メニュー全体のフォントサイズ */
#gMenu .menu li {
    font-size: 16px;
}

/* 個別メニュー項目のフォントサイズ */
#gMenu #menu-item-235 {
    font-size: 14px;
}

/* 行間を調整 */
#gMenu #menu-item-235 a {
    line-height: 130%;
}

「特別席（5階）のご予約」のみフォントサイズが小さくなり、1行に収まります。ついでに行間も調整しています。

文字数の多いメニュー項目のフォントサイズを小さく

ドロップダウンメニューの子要素のフォントサイズがおかしいとき

フォントサイズをpxで指定する代わりに、相対指定の「%」や「em」を使うとうまくいかない場合があります。

#gMenu .menu li {
    font-size: 150%;
}

このCSSではドロップダウンメニューの子要素だけが大きくなってしまうかもしれません。親メニューのliタグに対して150%、それを基準に子メニューのliタグにも150%のサイズが適用されるためです。単純計算で150%の150%で225%になります。

親子でフォントサイズが違う（子要素が大きくなる）

この場合、「%」の代わりに「rem」で指定（例：font-size: 1.5rem;）するか、「すぐ下の子要素のみに」というCSSを指定します。以下に例を紹介します。

#gMenu .menu > li {
    font-size: 150%;
}

「.menu > li」は「.menu直下のli」という意味です。この設定は基本的には下階層のliタグにも引き継がれるため、親子のメニューが同じフォントサイズになります。

親子メニューが同じフォントサイズに

次のようにrem（ページのルート要素からの相対的なサイズ）を指定する方法もあります。

#gMenu .menu li {
    font-size: 1.5rem;
}

この例のグローバルメニューは全体のフォントサイズ16pxの1.5倍の24pxになります。

グローバルメニューのフォントサイズを1.5remに設定した結果

あくまでBizVektorの対応例です。他のテーマではうまくいかない場合があります。「%」の代わりに「rem」を使う方法などもお試しください。

BizVektorのフッターに背景画像を入れる方法を紹介します。次のような感じに仕上げることができます。検証したバージョンはBizVektor 1.7.8／Defaultデザインスキンです。

BizVektorのフッターに背景画像を入れたイメージ

ふわっと仕上げなので、アイデア次第でカスタマイズしたり違和感のある部分は微調整してください。Defaultデザインスキン以外では、おそらく調整が必要です。

現在のBizVektorのフッターは次のようになっています。

BizVektorのフッター（Defaultデザインスキン）

Defaultデザインスキンの例ですが、サイトによってはフッターが真っ黒になるのも寂しいので、ちょっとした画像を入れる方法をおさえておくと良いかもしれません。

フッターに背景画像を表示する

次のCSSでBizVektorのフッターに背景画像を入れることができます。

/* フッターに背景画像を入れる */
#footerSection {
    background: url(http://背景画像.gif) repeat;
}

#footer,
#siteBottom {
    background: transparent;
    border: none;
}

「http://背景画像.gif」を実際に表示したい背景画像のURLに変更してください。メディアライブラリにアップロードした画像の「URL」をコピーするのが定番です。

ここでは、つなぎ目が目立たない背景用の画像を使う前提で、小さい背景画像を繰り返し表示する「repeat」を指定しています。大きな写真を1枚表示するパターンは後で紹介します。

フッターに「背景用の」画像を入れた例（Defaultデザインスキン）

Defaultデザインスキンの例です。他のデザインスキンでも大丈夫ですが、NEATでは中央が真っ白になるので、後で説明する「NEATのときに追加」を追加で入力してみてください。

背景画像に加えて飾り罫線を表示する

背景全体に表示される画像に加えて、最下部に飾り罫線の画像を表示することもできます。次のようなイメージになります。

フッターに背景画像を2つ入れる（背景画像＋飾り罫線）

CSSは次のようになります。2つの背景画像のURLを変更してください。

/* フッターに背景画像を2つ入れる */
#footerSection {
    background: url(http://背景画像1.gif) repeat;
}

#footer,
#siteBottom {
    background: transparent;
    border: none;
}

#siteBottom {
    background: url(http://背景画像2.gif) repeat-x;
    background-size: auto 30px;
    background-position: left 90%;
}

「http://背景画像2.gif」は次のような細長い飾り罫線の画像です。実際に使う画像のURLに変更してください。

飾り罫線の画像の例

この画像は罫線・飾り罫ライン素材 FREE LINE DESIGNからダウンロードして使わせていただきました。ありがとうございます！

1枚の大きな写真画像を入れる

背景用の画像ではなく写真などをフッターに表示する場合、スマホ表示も意識するなら画像サイズを調整する必要があります。以下の例は唯一の正解ではないので、みなさんのアイデアで微調整とカスタマイズをお願いします。

たとえば、次のような画像を素材サイトからダウンロードしてサイズを幅2000px、高さ1000pxにトリミングしました。

幅2000px、高さ1000pxの画像を準備

この画像は食材・料理のフリー写真素材 無料画像のフード・フォトからダウンロードさせていただきました。ありがとうございます！

次のようなCSSを入力します。1枚の写真（背景画像1）は繰り返し表示する必要がないので「no-repeat」を指定して、背景画像のサイズを100%に設定しています。

/* フッターに背景画像を2つ入れる */
#footerSection {
    background: url(http://背景画像1.jpg) no-repeat;
    background-size: 100%;
    width: 100%;
}

#footer,
#siteBottom {
    background: transparent;
    border: none;
    color: #000;
}

#siteBottom {
    background: url(http://背景画像2.jpg) repeat-x;
    background-size: auto 30px;
    background-position: left 90%;
    color: #000;
}

#siteBottom a {
    color: #000;
}

今回準備した写真のURLは「http://背景画像1.jpg」と置き換えてください。「http://背景画像2.jpg」は画面最下部の飾り罫線です。

フッターの背景に写真を表示する

スマホでは次のようなイメージです。フッターエリアの縦横比が違うので、完璧には仕上がらないかもしれません。あとは、フッターサイトマップメニューの有無などによって微調整が必要です。

スマホでの表示イメージ

Defaultデザインスキン以外では微調整が必要です。特にNEATではコンテンツ部分の背景色が白に設定されていて背景画像が見えないので、次のCSSを追加してみてください。

NEATのときに追加するCSS

/* NEATのときに追加 */
#pagetopInner.innerBox,
#footer .innerBox,
#siteBottomInner.innerBox,
#footMenu #footMenuInner.innerBox {
    background: transparent;
}

NEATのフッターに背景画像を表示する

細かい話ですが背景画像にある横線を消したい場合は次のCSSを入力してください。

/* NEATフッターの横線を消す */
#footMenu .menu,
#siteBottomInner.innerBox #copy {
    border: none;
}

表示結果は次のようになります。

NEATフッターの横線を消す

ふわっと仕上げなので、あとは自由に微調整してください。

「BizVektorのフッターからコピーライトを削除したい」は、BizVektorのカスタマイズでも人気上位の要件です。

BizVektorのコピーライトを削除したい

さっそくこの記事で方法を紹介しようと思いましたが、やめておきます。

なぜなら、コピーライトを削除するプラグイン「BizVektor FooterPoweredDelete」が販売されているからです。消し方をブログで公開するのは申し訳ないですよね。

というわけで私も購入させていただきました。買う前に自力で消したので必要なかったのですが、これまでBizVektorという素晴らしいテーマを使わせていただきながら何のお礼もしていないので、せめてもの恩返しのつもりで購入しました。

コピーライトを消したい方はもちろんですが、BizVektorに何か恩返ししたい方も、購入してみてはいかがでしょうか。

FooterPoweredDeleteの使い方

FooterPoweredDeleteプラグインを購入してからコピーライトが削除されるまでの流れを紹介します。

1. コピーライトを消したいWordPressサイトの管理画面を開いて、「プラグイン」‐「新規追加」メニューを選択します。
   

   「プラグイン」‐「新規追加」を開く

2. 画面上部の「プラグインのアップロード」をクリックします。
   

   「プラグインのアップロード」をクリック

3. 「参照」ボタンをクリックして、ダウンロードしたFooterPoweredDeleteプラグインのファイル（例：biz-vektor-footerPowerdDelete_v010.zip）を選択します。
   

   「参照」ボタンをクリックしてプラグインファイルを選択

   
   ※ダウンロードしたファイルが見つからないときは「ダウンロード」フォルダなどを探してみてください。
4. プラグインを選択後、「いますぐインストール」をクリックします。
   

   プラグインをインストール

5. インストールが完了したら、「プラグインを有効化」をクリックします。
   

   「プラグインを有効化」をクリック

6. これで完了です。特別な設定をしなくてもフッターのコピーライトが消えます。
   

   フッターのコピーライトが消える

   見なくなっただけではなくHTMLソースから「powerd」というdivブロック自体がスッキリと消えます。

脱・初心者を目指す方にも参考になるFooterPoweredDelete

FooterPoweredDeleteプラグインは、脱・初心者を目指す方にも参考になります。

脱・初心者を目指すときに課題になるのは「PHPを使ったカスタマイズ」です。テーマのカスタマイズにはCSSだけでなく、PHPを使う方法もあります。

PHPを使ったカスタマイズで役立つのが「フック」という仕組みで、主にfunctions.phpなどにPHPスクリプトを入力することになります。

このフックという仕組みでコピーライトを消しているのがFooterPoweredDeleteです。「コピーライトを消す」だけでコードがシンプルなので、自分でオリジナルのフックを作るときの参考にもなります。

BizVektorにはフッターのコピーライト以外にもフックを使って外側からカスタマイズできる項目がいくつもあります。脱・初心者を目指す方はフックを掘り下げてみると楽しくBizVektorをカスタマイズできるようになるでしょう。

その意味で、「PHPを使ってテーマのカスタマイズにチャレンジしたい！」と考えている脱・初心者を目指す方もFooterPoweredDeleteプラグインをインストールしておいて損はないです。ぜひ、ご利用ください。

コピーライトを消す「FooterPoweredDelete」の購入はこちらから

WordPressのサイト制作時に「グローバルメニューにアイコンを付けたい」とか、「サイドバーにアイコンを入れたい」という要望をよく聞きます。そこでBizVektorを例にヘッダーや電話番号、3PRエリア、サイドバーなどにアイコンを入れる例を紹介します。

BizVektorではバージョン1.7からアイコンフォント「Font Awesome」が使用可能になっています。ライブラリをインストールしなくても、この記事で紹介したCSSやHTMLタグを入力するだけでアイコンが表示されるようになるはずです。

BizVektorのヘッダー・グローバルメニュー・サイドバーなどにアイコンを入れた例

実際のサイトはこちらです。

▼BizVektorにアイコンを入れたサンプルサイト
http://cook1st.com/fontawesome/

CSSは異なりますがBizVektor以外でも同じようなことができると思います。参考にしてください。

アイコンフォントについてピンとこない方は以下のページから読んでみてください。

アイコンを手軽に表示できる「Font Awesome」

サイト名の前後にアイコンを表示

サイト名はロゴ画像に変更できますが、ロゴ画像ができるまでの間、サイト名だけでは殺風景だと感じたらアイコンでも入れておくと良いかもしれません。

ヘッダーのサイト名の前後に入れたアイコン

CSSは次のようになります。

/* ヘッダーサイト名の前にアイコンを付加 */
#header #site-title a:before {
    content: '\f0f4'; /* サイト名の前（コーヒーカップ） */
    font-family: FontAwesome;
    font-size: 36px;
    padding-right: 5px;
}

/* ヘッダーサイト名の後にアイコンを付加 */
#header #site-title a:after {
    content: '\f0ac'; /* サイト名の後（地球） */
    font-family: FontAwesome;
    font-size: 36px;
    padding-left: 15px;
}

/* サイト名リンクの色設定 */
#header #site-title a {
    color: #060;
}

上記のコードでハイライトしている部分で実際のアイコンフォントを呼び出しています。たとえば、「\f0f4」はコーヒーカップです。好きなアイコンに変更してお使いください。

使いたいアイコンのコードはFont Awesomeのサイトで調べることができます。「Unicode」に表示されるコード（例：f0f4）をコピーして上記のCSSを置き換えれば大丈夫です。

アイコンのコードを調べる

アイコン検索ページはこちらです。

Font Awesome Icons

電話番号の「TEL」をアイコンに変更

通常、画面右上に表示される連絡先の電話番号の前には「TEL」の文字が付加されますが受話器アイコンに変更することもできます。

電話番号に受話器のアイコンを付加

たとえば、functions.phpに次のようなコードを入力します。

add_filter('headContactCustom','do_head_contact_custom2');
function do_head_contact_custom2($headContact){
    $options = biz_vektor_get_theme_options();
    $contact_txt = $options['contact_txt'];
    $tel_number = $options['tel_number'];
    $contact_time = nl2br($options['contact_time']);

    $headContact = '<div id="headContact"><div id="headContactInner">' . PHP_EOL;
    if ($contact_txt) {
        $headContact .= '<div id="headContactTxt">' . $contact_txt.'</div>' . PHP_EOL;
    }

    if ($tel_number) {
        $headContact .= '<div id="headContactTel">' . PHP_EOL;
        if ( function_exists('wp_is_mobile') && wp_is_mobile() ) {
            $headContact .= '<a href="tel:' . $tel_number . '">
            <i class="fa fa-phone-square"></i>' . $options['tel_number'] . '</a>' . PHP_EOL;
        } else {
            $headContact .= '<i class="fa fa-phone-square"></i>' . $tel_number . PHP_EOL;
        }
        $headContact .= '</div>' . PHP_EOL;

    }

    if ($contact_time) {
        $headContact .= '<div id="headContactTime">' . $contact_time . '</div>' . PHP_EOL;
    }
    $headContact .= '</div></div>';

    return $headContact;
}

このコードは以下のサイトを参考にさせていただきました。上記のハイライト部分の「fa-phone-square」が受話器のアイコンです。自由に変更してください。

ヘッダーの電話番号周りのカスタマイズ方法

CSSは次のようになります。

/* 連絡先の設定 */
#header #headContact #headContactInner {}

#header #headContact #headContactTxt {}

#header #headContact #headContactTel {
    font-family: Lato;
    font-size: 30px;
    color: #c00;
}

#header #headContact #headContactTel i {
    padding-right: 5px;
}

#header #headContact #headContactTime {}

連絡先の3パーツ「お問い合わせメッセージ」「電話番号」「受付時間」のHTMLのIDはそれぞれ、「headContactTxt」「headContactTel」「headContactTime」になります。ここでは電話番号のデザインのみ使っていますが、カスタマイズに使えるように他のパーツのセレクタも入れておきました。

グローバルメニュー

グローバルメニューにアイコンを追加しておくと、文字だけのメニューより多少は目を引く効果があるでしょう。

グローバルメニューの項目にアイコンを付加

CSSは次のようになります。

/* グローバルメニューにアイコンを付加 */
#gMenu .menu > li > a:before {
    content: '\f0f4';
    font-family: FontAwesome;
    margin-right: 5px;
    font-size: 12px;
}

フッターナビゲーション（項目ごとにアイコンを変える）

フッターナビゲーションにもアイコンを入れることができます。考え方はグローバルメニューと同じです。ここでは、項目ごとに別々のアイコンを入れてみます。

フッターナビゲーションの項目ごとに別々のアイコンを付加

CSSは次のようになります。

/* フッターナビゲーション */
#footMenu .menu li a {
    background: none;
    padding-left: 5px;
}

/* フッターナビゲーション項目1 */
#menu-item-235:before {
    content: '\f003';
    font-family: FontAwesome;
    color: #fff;
}

/* フッターナビゲーション項目2 */
#menu-item-236:before {
    content: '\f12a';
    font-family: FontAwesome;
    color: #fff;
}

/* フッターナビゲーション項目3 */
#menu-item-247:before {
    content: '\f059';
    font-family: FontAwesome;
    color: #fff;
    padding-right: 5px;
}

グローバルメニューの例のように「li > a」の:before疑似要素に対してアイコンを付加すれば、メニュー全体で共通のアイコンが付加されます。

このフッターナビゲーションの例のように個別のメニュー項目（例：#menu-item-247）の:before疑似要素にアイコンを付加すれば、メニュー項目ごとに別々のアイコンを表示することができます。

個別のメニュー項目のIDはHTMLソースなどを見て調べることができます。

箇条書き項目（liタグ）のIDを調べる

サイドバーのリストマークをアイコンに変更

サイドバーのリストマークもアイコンに変更できます。すべて同じにしたり、項目ごとに変える方法は上記のグローバルメニューやフッターナビゲーションと同じ考え方なので、ここでは1行ごとにアイコンを切り替えてみます。

1行ごとにアイコンを変える

CSSは次のようになります。

/* サイドバー項目のアイコン（奇数） */
.sideTower .sideWidget li:nth-child(odd) a:before {
    content: '\f0f3';
    font-family: FontAwesome;
    padding-right: 5px;
}

/* サイドバー項目のアイコン（偶数） */
.sideTower .sideWidget li:nth-child(even) a:before {
    content: '\f0a2';
    font-family: FontAwesome;
    padding-right: 5px;
}

奇数行目、偶数行目の箇条書きアイテム（liタグ）に対してスタイルを指定するため、次のような疑似要素を使っています。

• li:nth-child(odd) --- 奇数行目のli
• li:nth-child(even) --- 偶数行目のli

すべてのサイドバー項目について1行ごとにアイコンを切り替えるだけでは面白くなければ、項目ごとにアイコンを変えることもできます。たとえば、「最近の投稿」は1行ごとにアイコンを切り替え、「カテゴリーメニュー」は項目ごとに個別のアイコンを指定してみます。

特定のメニューのみ項目ごとのアイコンを付加

CSSの考え方は上記で説明したフッターナビゲーションと同じです。個別の項目IDを調べてアイコンを指定します。

/* サイドバー個別項目1 */
.sideTower .sideWidget #menu-item-256 a:before {
    content: '\f14a';
    font-family: FontAwesome;
    padding-right: 5px;
}

/* サイドバー個別項目2 */
.sideTower .sideWidget #menu-item-255 a:before {
    content: '\f133';
    font-family: FontAwesome;
    padding-right: 5px;
}

/* サイドバー個別項目3 */
.sideTower .sideWidget #menu-item-253 a:before {
    content: '\f1ae';
    font-family: FontAwesome;
    padding-right: 5px;
}

/* サイドバー個別項目4 */
.sideTower .sideWidget #menu-item-254 a:before {
    content: '\f0e5';
    font-family: FontAwesome;
    padding-right: 5px;
}

3PRエリアの見出し

3PRエリアの見出しにアイコンを付加すれば、宣伝効果も上がることでしょう。

3PRエリアの見出しにアイコンを付加

CSSは次のようになります。

/* 3PRエリアの見出しにアイコンを付加 */
#topPr .topPrInner h3:before {
    content: '\f087';
    font-family: FontAwesome;
    margin-right: 5px;
}

#topPr .topPrInner h3 {
    border: none;
    padding-left: 0px;
    text-align: center;
}

ブログ・お知らせ一覧

地味ですが、ブログ記事やお知らせ一覧のタイトルにもアイコンを付加できます。

一覧するブログ記事のタイトルにアイコンを付加

CSSは次のようになります。

/* ブログリスト・お知らせリストにアイコンを付加 */
.entryTxtBox h4.entryTitle:before {
    content: '\f0a4';
    font-family: FontAwesome;
    margin-right: 5px;
}

記事タイトル

個別記事のタイトルにもアイコンを表示できます。すでに見出しが枠囲みで装飾されているので不要かもしれませんが。

記事タイトルにアイコンを付加

CSSは次のようになります。

/* ページタイトルのアイコン */
#content h1.entryPostTitle:before {
    content: '\f130';
    font-family: FontAwesome;
    padding-right: 10px;
    color: #c00;
}

アーカイブタイトル

一覧表示する記事のタイトル（カテゴリーなど）も見出しと同じです。

アーカイブタイトルにアイコンを付加

CSSは次のようになります。

/* アーカイブタイトルのアイコン */
#content h1.contentTitle:before {
    content: '\f130';
    font-family: FontAwesome;
    padding-right: 10px;
    color: #c00;
}

まとめ

このように、BizVektorのあちこちにアイコンを表示することができます。すべて表示する必要もないと思いますが、画面で特に強調したいパーツや役立ちそうなアイコンがあれば参考にしてください。

BizVektorではデザインスキンを何パターンか選べますが、グローバルメニューとヘッダー画像を入れ替えてみるとさらにデザインパターンが増えたような感じがしてワクワクするのは私だけでしょうか？

「グローバルメニューとヘッダー画像の入れ替え」と聞くとheader.phpの編集が必要に思えるかもしれませんが、ここでは、PHPを変更せずにCSSを使って実現する方法を紹介します。

仕上げるとヘッダー画像が上、その下にグローバルメニューが表示されます。

ヘッダー画像とグローバルメニューを入れ替えた例

現在は次のように「サイト名（ロゴ画像）」「グローバルメニュー」「ヘッダー画像」の順に構成されています。

初期設定ではグローバルメニューの下にヘッダー画像

ヘッダー画像を消す

まずは、「外観」-「ヘッダー」メニューで「画像を非表示」をクリックしてヘッダー画像を消します。

ヘッダー画像を消す

ロゴ画像を表示する

続いて、「外観」-「テーマオプション」メニューでヘッダー画像として使っていた画像をヘッダーロゴに設定します。

ヘッダーロゴを選択

サイトを確認すると小さいロゴ画像が表示されるはずです。

ロゴ画像が表示される

ロゴ画像のサイズを設定

初期設定ではロゴ画像の高さは最大で60pxに縮小されます。このロゴ画像を画面いっぱいに広げてヘッダー画像のように見せる作戦です。そのため、次のようなCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力します。

/* ★ロゴ画像の幅を画面いっぱいに */
#header #site-title a img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 500px;
    margin-top: 0;
}

/* ★ヘッダー幅を画面いっぱいに */
#header #site-title,
#headerInner {
    width: 100%;
}

/* グローバルメニューの下線 */
#gMenu {
    border-bottom: 2px solid #C30000;
}

/* キャッチフレーズを消す */
#headerTop {
    display: none;
}

/* ヘッダー上の余白を消す */
#header {
    padding-top: 0;
}

/* ヘッダー内部の余白を消す */
#headerInner {
    margin: 0;
}

@media (min-width: 770px) {
    /* サイトタイトル下の余白を消す */
    #header #site-title {
        padding-bottom: 0px;
    }

    /* 連絡先の位置の調整 */
    #header {
        position: relative;
    }

    #header #headContact {
        width: auto;
        padding: 10px;
        background-color: #fef4f4;
        position: absolute;
        bottom: 5%;
        right: 2%;
    }
}

/* 連絡先の位置の微調整 */
#header #headContact {
    margin: 5px;
}

ヘッダー画像自体のスタイルは★が付いている最初の2ブロックだけです。それ以降は連絡先など関連パーツのスタイル調整です。

表示結果は次のようになります。

ヘッダー画像とグローバルメニューを入れ替えた例

BizVektor Vastもおすすめ

メイン画像を画面いっぱいに広げたいなら、BizVektorの拡張プラグイン「BizVektor Vast」もご活用ください。フルスクリーンレイアウト対応です。

BizVektor Vastの購入はこちら

BizVektor NEATでグローバルメニューのアイコンの色を変更する方法を紹介します。メニューで設定できる「キーカラー」はアイコンだけでなくサイト全体に反映されてしまうため、工夫が必要です。気になる方は参考にしてください。

BizVektor NEATでグローバルメニューのアイコン色だけを変更する

BizVektor NEATのアイコンの色はサイトのキーカラーと共通

BizVektorの拡張デザインスキン「NEAT」では、グローバルメニューにアイコンを付加できます。

BizVektor NEATのグローバルメニューのアイコン

アイコンの色は「外観」-「カスタマイズ」メニューの「NEAT 設定」‐「キーカラー」で変更できます。

グローバルメニューのアイコンの色は変更できるが…

ただし、この設定はアイコンの色だけでなくサイト全体のキーカラー（テーマカラー）にも反映されるので注意が必要です。

選択したキーカラーはサイト全体に反映される

「アイコンの色だけ」を変更するには

サイト全体のキーカラーに影響を与えずアイコンの色だけを変更したい場合は、次のようなCSSを使う方法があります。

/* グローバルメニューのアイコン色を変更 */
#gMenu .menu li a strong::before {
    color: #b7282e;
}

「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力してください。

「外観」-「CSSカスタマイズ」メニューに入力した例

表示結果は次のようになります。

グローバルメニューのアイコン色だけを変更

「color: #b7282e;」の「#b7282e」が色の設定（カラーコード）です。インターネットで検索してカラーコードを調べていただき、好きな色に変更してください。

アイコンの色を2色で交互に切り替える

アイコン色を2つ使って「赤」「青」「赤」「青」のように交互に切り替えるには、次のようなCSSを使います。

/* グローバルメニューのアイコン色（奇数） */
#gMenu .menu li:nth-child(odd) a strong::before {
    color: #b7282e;
}

/* グローバルメニューのアイコン色（偶数） */
#gMenu .menu li:nth-child(even) a strong::before {
    color: #c7dc68;
}

「color:」に指定してある「#b7282e」と「#c7dc68」が2色のアイコン色になります。好きな色に変更してください。

箇条書きのliに対して1,3,5…番目（奇数）と、2,4,6…番目（偶数）で使う色を切り替える仕組みです。たとえば、「li:nth-child(even)」は「偶数番目の子要素」という意味です。liがulの子要素だということを利用して順番などを指定することで一括でスタイルを設定できます。

表示結果は次のようになります。

アイコンの色を2色で交互に切り替える

あとは、いろいろとお試しください。

BizVektorのヘッダー画像の上に別の画像を重ねて表示する方法を紹介します。「申し込みはこちら」や「こちらからクーポンをGet」のようなボタンやバナー画像を表示するのが定番の活用例です。たとえば、こんな感じです。

BizVektorのヘッダー画像の上にバナーを表示する

BizVektorの特徴的なヘッダー画像を活かしてトップページに機能性を持たせたりユーザーの導線を作るのに役立ちます。

BizVektorならバナーを準備しなくてもボタン風リンクを簡単に表示できます。たとえば、こんな感じです。

ヘッダー画像の上に申し込みページへのリンクボタンを表示した例

以下、手順を簡単に説明します。

ヘッダー画像の上に表示するボタンを作成

さっそくですが、子テーマのfunctions.phpに次のようなコードを入力すれば、ヘッダー画像の上に表示する要素を作成できます。

function my_biz_vektor_header_image_front($value) {
$temp =  <<<EOM
<div class="headButton">
<a href="#"><img src="http://….png" width="180" height="80" /></a>
</div>
EOM;

    $value2 = preg_replace('/<div class="slideFrame">/',
        '<div class="slideFrame">' . $temp, $value);

    return $value2;
}
add_filter('biz_vektor_header_image_front',
    'my_biz_vektor_header_image_front');

ハイライトした部分がヘッダー画像に重ねるパーツです。ここでは画像リンクにしていますが、ただの画像でもリンクでもバナーでも自由にカスタマイズしてください。

カスタマイズするときは「EOM;」に注意が必要です。これは行頭に置く必要があります。つまり、次のようにタブなどを入れてインデントすると画面が真っ白になります。ご注意ください。

function my_biz_vektor_header_image_front($value) {
    $temp =  <<<EOM
    <div class="headButton">
    <a href="#" class="btn btnL">お得なクーポンはこちら！</a>
    </div>
    EOM;
…略…

無事に画面が真っ白にならなかった方は、続いてCSSを記述しましょう。

追加した要素をヘッダー画像の上に表示

次のCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力すると、追加したボタンやバナーがヘッダー画像の上に表示されるようになります。

/* ヘッダー画像の上にアイテムを表示 */
.headButton {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
    z-index: 999;
}

/* ヘッダー画像に乗せる画像のサイズ調整 */
#topMainBnr .headButton img {
    width: auto !important;
    height: auto;
}

「left」「right」「bottom」は、ヘッダー画像からの相対的な位置指定です。数字を変更して表示結果を調整してください。省略していますが「top」を使うとヘッダー画像の上からの相対位置を指定することができます。

ここまで、functions.phpとstyle.cssを修正しました。表示結果は次のようになります。

BizVektorのヘッダー画像に別の画像を重ねて表示する

リンクボタンを表示する場合

バナーを作成するのが面倒な場合や、単純にリンクボタンを表示したい場合は、上記で紹介したfunctions.phpに記述するコードのうち、ハイライトした部分を次のように変更します。

<a href="#" class="btn btnL">お得なクーポンはこちら！</a>

「#」は具体的なリンク先のURL（例：http://example.com/coupon）に修正してください。「お得なクーポンはこちら！」も自由に直してください。

表示結果は次のようになります。

ヘッダー画像の上にリンクボタンを表示

以上です。スマホ表示には最適化していません。いろいろと試行錯誤してみてください。

BizVektor Global EditionにBizVektorの子テーマのサンプルでダウンロードした子テーマのたたき台をインストールすると、次のようにエラーメッセージが表示されるかもしれません。

BizVektorの子テーマのインストールでエラーになる

これはBizVektor Global Editionのフォルダ名が子テーマの指定と異なるためです。

• 子テーマの指定 --- biz-vektor
• 実際のフォルダ --- bizvektor-global-edition

対応は簡単で、有効化に失敗した子テーマのstyle.cssを開き、次の「Template」の行を修正するだけです。

@charset "utf-8";
/*
Theme Name: ★BizVektor子テーマサンプル★
Theme URI: http://bizvektor.com
Template: biz-vektor
Description: 
Author: ★あなた ｍ９っ・ｗ・）ｂ★
Tags: 
Version: 0.1.0
*/

修正後は次のようになります。

@charset "utf-8";
/*
Theme Name: ★BizVektor子テーマサンプル★
Theme URI: http://bizvektor.com
Template: bizvektor-global-edition
Description: 
Author: ★あなた ｍ９っ・ｗ・）ｂ★
Tags: 
Version: 0.1.0
*/

「外観」-「テーマ編集」メニューから修正する場合は、画面右上の「編集するテーマを選択」から「BizVektor子テーマ」を選んで「選択」ボタンをクリックします。

BizVektorの子テーマを選択

「このテーマは壊れています。」と表示されますが、気にする必要はありません。

このメッセージは気にしなくて大丈夫

編集画面に表示されたコードから「Template」の「biz-vektor」を「bizvektor-global-edition」に修正しましょう。

BizVektorのフォルダ設定を修正

「ファイルを更新」ボタンをクリックすると、「このテーマは壊れています。」のメッセージが消えるはずです。

エラーメッセージが消える

これでBizVektorの子テーマが使用可能になったので、「外観」-「テーマ」メニューを開いて、子テーマを有効化しましょう。

BizVektorの子テーマを有効化

BizVektorの子テーマが有効化されます。

BizVektor（Global Edition）の子テーマが有効に

あとは自由にカスタマイズしていけば大丈夫です。

BizVektorの拡張デザインスキン「BizVektor Vast」は画面最上部に表示されるグローバルメニューが特徴的です。

BizVektor Vastのグローバルメニュー

このグローバルメニューを透過（半透明に）したり、スクロール時に色を変える方法を紹介します。サンプルサイトはこちらです。

谷根千散歩.com

通常のグローバルメニューの色

BizVektor Vastのグローバルメニューの色は「外観」-「カスタマイズ」メニューの「Vast 設定」-「メニュー背景色」で設定できます。

メニュー背景色の設定

選択した色がグローバルメニューに反映されます。

選択した色がグローバルメニューに反映される

グローバルメニューの背景を透過させる

グローバルメニューの背景を透過させて半透明にしたい場合は、次のようなCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力します。

/* グローバルメニューの背景を透過 */
#header {
    opacity: 0.7;
}

グローバルメニューが半透明になって背景が透けます。

グローバルメニューを半透明に

スクロールが始まってから半透明にする

上記のように常に半透明にせず、最初は不透明の状態でスクロールが始まってから半透明にする場合は、上記のCSSを削除してベタ塗りの状態に戻して、代わりに次のようなPHPを子テーマのfunctions.phpに入力します。

/* スクロール時に背景を透過 */
function my_wp_footer(){ 
?>
<script>
jQuery(function() {
    var header = jQuery('#header');
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 0) {
            header.css('opacity', '0.6');
        } else {
            header.css('opacity', '1');
        }
    });
});
</script>
<?php
}
add_action('wp_footer', 'my_wp_footer');

最初はグローバルメニューに背景色がそのまま設定されますが、下にスクロールすると透過されます。

スクロール時のみ背景を透過

ある程度スクロールしてから透過させる

上記のPHPでハイライトした行の「0」を好きな数字（サイズ：px）に変更すれば、「ある程度スクロールしてから」透過させることができます。例を以下に紹介します。

/* スクロール時に背景色を透過 */
function my_wp_footer(){ 
?>
<script>
jQuery(function() {
    var header = jQuery('#header');
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 400) {
            header.css('opacity', '0.6');
        } else {
            header.css('opacity', '1');
        }
    });
});
</script>
<?php
}
add_action('wp_footer', 'my_wp_footer');

スクロール時にグローバルメニューの背景色を変更する

スクロール時に透過させるだけでなく背景色も変えたい場合は、上記のPHPをfunctions.phpから削除して、代わりに次のPHPをfunctions.phpに入力します。スクロール時のグローバルメニューにclass名を付加するコードです。

/* スクロール時のヘッダーclass名を制御 */
function my_wp_footer(){ 
?>
<script>
jQuery(function() {
    var header = jQuery('#header');
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 0) {
            header.addClass('header-extra-css');
        } else {
            header.removeClass('header-extra-css');
        }
    });
});
</script>
<?php
}
add_action('wp_footer', 'my_wp_footer');

あとは、「header-extra-css」というclassに好きなスタイルを定義すれば、スクロール時に反映されます。CSSの例を紹介します。

/* スクロール時のグローバルメニュースタイル */
#header.header-extra-css {
    background-color: #f0908d;
    opacity: 0.7;
}

これで、スクロール時にグローバルメニューの背景色が切り替わり、半透明にもなります。

スクロール時のみメニュー背景色を変更する

BizVektorで記事をグリッド表示できる拡張プラグイン「BizVektor Grid Unit」をカスタマイズする例を紹介します。たとえば、3列構成を4列に変更したり、記事の抜粋を表示したり、画像サイズを変更する方法などです。

BizVektor Grid Unitのカスタマイズ例（4列表示・抜粋追加・画像サイズ変更）

サンプルサイトはこちらです。

谷根千散歩.com

まだBizVektor Grid Unitをお持ちでない方は購入が必要です。
記事やページをグリッド表示したい方はお試しください。

以下、BizVektor Grid Unitバージョン 1.4.0で検証しています。

BizVektor Grid Unitの購入はこちらから

初期設定のBizVektor Grid Unit

初期設定のGrid Unitでは次のようにグリッド表示されます。

BizVektor Grid Unitの表示イメージ

3列から4列に変更

初期設定では3列構成です。グリッドの幅を狭くすることで4列に変更することができます。具体的には、現在のグリッド幅は31%（＋左右の余白が1%＝33%で全体の3分の1）になっています。この幅を狭く（たとえば23%に）すれば4列などに変更できます。

4列表示に変更するCSSの例を紹介します。「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力してください。

/* グリッド幅の調整（4列表示に） */
.bv-grid-unit-item {
    width: 23%;
}

これで、グリッドが4列表示になります。

グリッドが4カラムになる

グリッドに記事の抜粋を表示する

現在のグリッドには記事のタイトルが表示されています。その下に記事の抜粋を表示する方法を紹介します。

アーカイブや投稿トップに表示されるグリッドの修正

アーカイブや投稿トップに表示されるグリッドに記事のタイトルを表示している部分はbiz-vektor-grid-unit/views/loop.phpの50行目あたりです。

<p class="bv-grid-unit-title">…略…<?php the_title(); ?>…略…</p>

この下あたりで、抜粋を表示するthe_excerptを実行すれば大丈夫です。具体的には以下にハイライトしたような1行を追加します。

<p class="bv-grid-unit-title">…略…<?php the_title(); ?>…略…</p>
<p style="font-size:11px;"><?php the_excerpt(); ?></p>

これで、グリッドの記事タイトルの下に抜粋が表示されるようになります。

グリッドに記事の抜粋を追加

ウィジェット用グリッドの修正も忘れずに！

上記のグリッド表示はアーカイブや投稿のトップページに表示されるグリッド部分でしたが、必要に応じてウィジェット用のプログラムも修正する必要があります。

具体的には「外観」-「ウィジェット」メニューで「コンテンツエリア（トップページ）」などに組み込む「BizVektor_Grid Unit」ウィジェットに対応するプログラムです。

これはbiz-vektor-grid-unit/views/widget.phpで表示されています。40行目あたりに、グリッド表示のタイトル部分が見つかります。

<p class="bv-grid-unit-title">
    <a href="<?php echo get_permalink() ?>" …略…
        <?php the_title(); ?>
    </a>
</p>

この下あたりでthe_excerptを呼び出せばタイトルの下に抜粋が表示されます。

<p class="bv-grid-unit-title">
    <a href="<?php echo get_permalink() ?>"…略…
        <?php the_title(); ?>
    </a>
</p>
<p style="font-size:11px;"><?php the_excerpt(); ?></p>

コンテンツエリア（トップページ）のグリッドにも抜粋が追加されます。

トップページのグリッドにも抜粋が表示される

画像の表示サイズを変更する

上記のようにアーカイブとウィジェットで別のプログラムを使っていることを利用して、トップページとアーカイブでアイキャッチ画像のサイズを変えてみます。

アイキャッチ画像はthe_post_thumbnailという命令で表示されています。

アーカイブおよびウィジェットのプログラムでは次の場所で実行されています。

• アーカイブ：biz-vektor-grid-unit/views/loop.phpの38行目
• ウィジェット：biz-vektor-grid-unit/views/widget.phpの27行目

どちらも次のように画像サイズは「medium」（中サイズ画像）が指定されています。

the_post_thumbnail('medium');

この1行は実際にはPHPの終了タグ「?>」で終了しています。コードを修正するときは、この終了タグを消さないように注意してください。

the_post_thumbnail('medium'); ?>

この「medium」を「thumbnail」「large」「full」などに変更すれば、中サイズではなくサムネイル、大サイズ、フルサイズの画像を表示することができます。

その他、the_post_thumbnailについて詳しくは、以下のページをご覧ください。

the_post_thumbnail（WordPressリファレンス）

ここでは、「トップページはグリッドの画像をサムネイルにしてグリッドをコンパクトに表示したい」と考えたとします。

その場合、the_post_thumbnailの「medium」を「thumbnail」に変更します。コンテンツエリア（トップページ）のみを想定しているのでviews/widget.phpのみを修正します。

views/widget.phpの27行目は次のようになります。

the_post_thumbnail('thumbnail'); ?>

トップページのグリッドで画像サイズがサムネイルになります。

トップページのグリッドの画像サイズをサムネイルに

まとめ

以上、BizVektor Grid Unitのカスタマイズ例を紹介しました。プラグイン本体の修正について「お試し」は厳禁ですが、こんなこともできるのだとイメージできれば、いつか役立つかもしれません。お試しできる環境で修正してみてください。

1人で作業するのが不安な方はWordPress個別サポートをご利用ください。

BizVektorに親しんだ方にはおなじみのカスタマイズです。

BizVektorの画面右上の連絡先に画像を表示する

ヘッダーの電話番号周りのカスタマイズ方法にあるコードを子テーマのfunctions.phpに入力すれば連絡先に好きな画像や文章を表示することができます。

それで良ければ話は終わりです。

ただし、問題は「また画像を変更することになったらスムーズに作業できますか？」ということです。

functions.phpを修正するのは緊張しますよね。

それを、もう一度行うとすれば…

慣れていない方は気が重くなるかもしれませんね。

まして、お客様に納品するときに「画像を修正したければfunctions.phpというファイルを開いて…」とか「テーマの編集というメニューから直すときは注意してください」という説明で通用するのか微妙です。

そもそも、納品先のお客様がPHPの編集に慣れているのであればサイト制作を外部に発注しないかもしれませんね。BizVektorで簡単に組み立てられるはずなので。

そんなわけで、連絡先に表示した画像を変更するのに毎回、functions.phpを修正しないで済むように、連絡先をウィジェット（ウィジェットエリア）にしておくのはどうでしょうか、というのが今回の趣旨です。

仕上がりイメージは次のようになります。「外観」-「ウィジェット」メニューにオリジナルのウィジェットエリア「連絡先ウィジェット」が追加されます。

オリジナルのウィジェットエリアが追加される

以下、連絡先の部分をウィジェット対応にして、画像を表示するまでの手順を紹介します。

「連絡先ウィジェット」の作成

まずは、「外観」-「ウィジェット」メニューで使えるウィジェットエリア「連絡先ウィジェット」を作成します。名前は自由ですが、ひとまず「連絡先ウィジェット」にしておきます。

コードを紹介する前に少しまわりくどい話をします。

好きなウィジェットエリア（多くはサイドバー）を作成するにはregister_sidebarという命令を使います。BizVektorのfunctions.phpにもregister_sidebarを使ってサイドバーが作成されているので参考になると思います。

自分でオリジナルのウィジェットエリアを追加したければ、使用中のテーマの記述にならってregister_sidebarで作成すれば大丈夫です。

ここでは次のコードを作成しました。これを子テーマのfunctions.phpにペーストします。

/* 「連絡先ウィジェット」の作成 */
add_action('init', 'my_register_sidebar');
function my_register_sidebar() {
    register_sidebar(array(
        'name' => '連絡先ウィジェット',
        'id' => 'contact-widget-area',
        'description' => '画面右上に表示されるウィジェットです。',
    ));
}

register_sidebarの他にも命令が使われていますが、その目的はウィジェットの表示順を最後にすることです。

子テーマでウィジェットエリアを追加すると、最初から存在するウィジェットエリアより先に表示される場合があります。次のようなイメージです。

新たに追加したウィジェットが先に表示されてしまう

これにより、既存のウィジェットエリアの順番が変わってしまい問題が起きる場合があります。たとえば、テンプレートに「2番目のウィジェットの内容を表示してください」と書かれていた場合、ウィジェットの順番がずれることで間違った内容が表示されてしまいます。

BizVektorでは大丈夫なので単純に子テーマでregister_sidebarだけを使ってウィジェットを作成しても良いと思いますが、順番が変わることで不安になる方のために念のため最後にウィジェットが追加されるようにしています。

具体的にはinitフックを利用して、親テーマのウィジェット作成が終わってから子テーマのウィジェット作成を行うようにしています。

話が長くなりましたが、上記のコードを入力すればウィジェットエリアは完成です。「外観」-「ウィジェット」メニューを開くと、最後のウィジェットエリアとして「連絡先ウィジェット」が追加されているはずです。

「連絡先ウィジェット」が最後に追加される

ウィジェットは使用可能になっているので、「テキスト」ウィジェットを追加して、表示したい画像のURLを入力しておきましょう。

テキストウィジェットに画像のURLを入力する方法がわからなければ、以下のページも参考にしてください。

サイドバーに画像を追加する方法

連絡先のテキストウィジェットに画像を追加

続いて、この内容を画面に表示しましょう。

「連絡先」の代わりにウィジェットの内容を表示

作成したウィジェットをBizVektorの画面右上の「連絡先」に表示するため、次のようなコードを子テーマのfunctions.phpに入力します。

/* 連絡先にウィジェットを表示 */
add_filter('headContactCustom','my_headContactCustom');
function my_headContactCustom(){
    ob_start();
    echo '<div id="headContact"><div id="headContactInner">';

    if (is_active_sidebar('contact-widget-area')) {
        dynamic_sidebar('contact-widget-area');
    }

    echo '</div></div>';

    return ob_get_clean();
}

これで、画面右上に連絡先の代わりに「連絡先ウィジェット」の内容が表示されるようになります。

連絡先の代わりにウィジェットの内容が表示される

連絡先のウィジェット化は完了です。まだ使いやすくする方法もあるでしょうが、ここまで加工しておけば、「画像を変更しようと思ってfunctions.phpを間違って直して画面が真っ白に！」の恐れもなくなります。ここからの連絡先エリアのメンテナンスはメニューでウィジェットを操作するだけです。

あとは連絡先ウィジェットにいろいろとパーツを組み込んでみてください。

画像を表示する以外の使い方

サイズの都合で使えるパーツは限られるとは思いますが、実用性はともかくとして、次のようにMTS Simple Bookingの予約カレンダーも表示できます。

ウィジェットなので、こんな使い方もできます

BizVektor特有の「お問い合わせはこちら」ボタンもウィジェットパーツなので簡単に表示できます。

「お問い合わせはこちら」ボタンもウィジェットのドラッグアンドドロップで表示可能

おそらくCSSの修正が必要だと思いますが、話が長くなるのでここでは説明しません。興味がある方はWordPress個別サポートにご相談ください。

まとめ

このように、「ウィジェットの作成」と「ウィジェットの表示」という2種類のコードを記述すると、好きな場所にウィジェットを作成することができます。今回はBizVektorの画面右上の連絡先をウィジェットエリアに加工する例で紹介しましたが、フッターエリアや個別記事の本文下などにも同じ手法でウィジェットエリアを作成できます。

ウィジェットにしておけば、お客様に納品するサイトも簡単にメンテナンスしてもらうことができます。いろいろとお試しください。

BizVektorで作成するスマホサイトのフッターにフローティングメニューを作るときに、右端は「上に戻る」ボタンにしたい場合があります。

スマホのフローティングメニュー（右端が「上に戻る」）

「TOP」のリンク先を「#」にすれば単純に画面の最上部に移動するリンクとして機能しますが、せっかくなので、BizVektorの「上に戻る」に相乗りさせてもらいましょう。クリック時にスムーズに上にスクロールされるようになります。

BizVektorの「上に戻る」ボタン

BizVektorの「上に戻る」に相乗りするには次のように設定します。

• 「上に戻る」のリンク先を「#wrap」にする
• そのリンクを「id="back-top"」のdivタグで囲む

たとえば、次のようなHTMLになります。

<div id="back-top">
<a href="#wrap"><i class="fa fa-arrow-circle-o-up"></i><br />
TOP</a>
</div>

「fa-arrow-circle-o-up」はアイコンフォントFont Awesomeの上矢印アイコンです。

これをフローティングメニューの右端などに追加すれば、「上に戻る」アイコンが表示されます。クリックすると、スムーズに画面最上部までスクロールされるはずです。

ただし、スタイルを設定する必要があります。BizVektor組み込みの「上に戻る」ボタンには「position: fixed;」などが指定してあり、常に画面右下に固定表示されるようになっているからです。

フローティングメニューの「上に戻る」用のサンプルCSSを紹介します。

#back-top a {
    position: relative;
    bottom: 0;
    right: 0;
}

これで、「上に戻る」がフローティングメニューになじんで表示されるようになります。

フローティングメニューの右端に「上に戻る」を表示

あとはいろいろとお試しください。

ゼロからフローティングメニューの設置をご希望の方はWordPress個別サポートで承ります。

BizVektorの拡張デザインスキン「BizVektor Attract」は画面幅いっぱいに広がるヘッダー画像が特徴的です。その他、フッターなどの色を細かく設定できたり、ページタイトルに背景画像を表示できるなど、無料版のBizVektorにはない機能が組み込まれています。

BizVektor Attractの画面イメージ

普通の企業サイトにも

ブライダル系サイトにも

サンプルブライダル

レストランにも

 
なにより、パッと見てわかるようにベージュ系のデザインで幅広い業種のサイトですぐに使えそうな仕上がりです。カスタマイズせず初期設定のままでも十分に雰囲気のあるサイトが立ち上がりそうな点がおすすめポイントです。

細かい話で恐縮ですが、フッターの色をメニューで変更できるようになっているのが特におすすめです。無料版のBizVektorでは黒いフッターの色を変えるのは結構面倒でしたが、BizVektor Attractでは貴社のイメージカラーに合わせてフッターを好きな色に変更できます。

ここでは、BizVektor Attract固有の機能（「外観」-「カスタマイズ」メニュー）を中心に、カスタマイズに役立つCSSを合わせて紹介します。BizVektorでサイトを作っている方は参考にしてください。

画面いっぱいに広がるヘッダー画像

BizVektor Attractで特徴的なのが画面いっぱいに広がるヘッダー画像です。サイトの雰囲気を伝えるには十分の効果があると思います。

画面いっぱいのヘッダー画像でサイトを印象づけましょう

ヘッダー画像の推奨サイズは幅2000px、高さ680pxです。これでも十分な高さですが、さらに高さのある画像を使いたい場合は、幅2000pxの画像（例：幅2000px、高さ1500px）をアップロードしてみましょう。「切り抜かない」メニューが現れ、そのままのサイズでヘッダー画像を使うことができます。

幅2000pxの画像をアップロードすれば切り抜かないオプションも選択可能

背景画像（ページおよびサイト全体）

ページタイトルの背景画像

「外観」-「カスタマイズ」メニューの「Attract設定」にある「ページタイトル背景画像URL」からページタイトルの背景に画像を入れることができます。

ページタイトルの背景画像

この画像はサイト全体で共通ですが、どうしてもページごとに背景画像を切り替えたければ、そのページのbodyタグに付加されたクラス名を活用しましょう。以下、ページIDが8のページの背景画像を変えるCSSの例を紹介します。

/* 個別ページのタイトルの背景画像 */
.page-id-8 #pageTitBnr #pageTitInner {
    background: transparent url("http://…略….jpg") no-repeat scroll left 50%;
}

表示結果は次のようになります。

特定のページのみ背景画像を変える

サイト全体の背景画像

「外観」-「背景」メニューからサイト全体に背景画像を入れる場合は、初期設定のベージュの背景色を透明にする必要があります。たとえば、次のようなCSSを使います。

/* 背景色を透明に（背景画像を使うため） */
#header, #gMenu, #main, #panList, #pagetop {
    background-color: transparent;
}

背景画像が使えるようになります。

背景画像が使えるようになる

ついでに、ページタイトルの背景色も透過すると次のようなイメージになります。

ページタイトルの背景色を透明に

使ったCSSは次のとおりです。

/* ページタイトルの背景色を透明に */
#pageTitBnr {
    background-color: transparent;
    box-shadow: none;
}

ページタイトルの背景画像の幅を画面いっぱいに広げると次のようなイメージになります。

ページタイトルの幅を画面いっぱいに広げたイメージ

使ったCSSは次のとおりです。

/* ページタイトルの背景画像を幅100%に */
#pageTitBnr .innerBox {
    width: 100%;
}

ヘッダーロゴと連絡先

従来のデザインスキンではヘッダーロゴと連絡先が横並びのパターンが多かったため、ヘッダーロゴのサイズが微妙な感じだったかもしれませんが、BizVektor Attractでは電話アイコンをクリックして連絡先を開くようになっています。そのため、ロゴブロックの幅が広くなり、横長のロゴを使えるようになっています。

横長のヘッダーロゴも表示可能に

ヘッダーロゴを表示しない場合は次のようにサイト名が表示されます。

ヘッダーロゴを表示しない場合

ヘッダーロゴの高さは60pxですが、CSSをカスタマイズすればもう少し高さのあるロゴも表示できるようになります。

CSSをカスタマイズすれば高さ60pxを超えるロゴも表示可能

使ったCSSは次のとおりです。

@media (min-width: 950px) {
    /* ヘッダーロゴの高さ調整 */
    #header #site-title a img {
        max-height: 250px;
    }
}

連絡先は電話アイコンをクリックすると表示されます。

電話アイコンをクリックすると連絡先が表示される仕組みに

電話アイコンを表示せずにヘッダーロゴとグローバルメニューをスッキリ見せたい場合は、「外観」-「テーマオプション」メニューの「連絡先」で電話番号を消せば大丈夫です。

電話番号が未入力の場合は電話アイコンは非表示に

ロゴを透過画像にすると次のようなイメージになります。

ロゴを透過画像にしたイメージ

色の設定

BizVektor Attractのサイト全体の配色はカスタマイズしなくても十分なくらいに仕上がっていますが、カスタマイズしたい場合は「外観」-「カスタマイズ」メニューの「Attract設定」から各種パーツの色を設定することができます。

BizVektor Attractの色設定（Attract設定）

以下、それぞれの色が使われている場所を簡単にまとめておきます。

• キーカラー（初期設定：#3f3d22） --- フッター、メニュータイトル、サイドバーのウィジェットタイトル、カテゴリーリンクのマウスオーバー時など

  フッターの色は「キーカラー」で変更可能

• キーカラー(明)（初期設定：#AFAE8D） --- 横の罫線、カテゴリーリンク背景色、RSSボタン背景色など

  カテゴリーリンクの背景色は「キーカラー（明）」で変更可能

• キーカラー(薄)（初期設定：#e6e5c1） --- 投稿、固定ページ、トップページの「ブログ」「お知らせ」のタイトル、メニューのマウスオーバー時、ページタイトルの背景色など

  「キーカラー（薄）」の例

• メニューのボーダーカラー（初期設定：#D1D0A6） --- グローバルメニューの縦の罫線

  メニューのボーダーカラー

• アクセントカラー（初期設定：#c11313） --- 「お問い合わせはこちら」、フォームの送信ボタン、リンクのマウスオーバー時、「詳しくはこちら」のアイコン、トップページ投稿一覧の投稿日時など

  「お問い合わせはこちら」はアクセントカラーとアクセントカラー（明）でグラデーション

• アクセントカラー(明)（初期設定：#cd3f3f） --- アクセントカラーと合わせてボタンのグラデーションに
• 背景色（初期設定：#fefcf2） --- 文字通りサイト全体の背景色

  背景色は幅広い業種に合うベージュ系です

まとめ

以上、BizVektor Attractで使える機能を紹介してきました。画像でサイトを印象づけたり細かく色設定できるのもうれしいですが、初期設定で仕上がっている印象なので、カスタマイズしなくても雰囲気のあるサイトを立ち上げられそうな点もうれしいですね。

BizVektorで雰囲気のあるサイト作りを目指す方に、BizVektor Attractをおすすめします！

WordPressに慣れてくると気づくのが「CSSを使えば自由にデザインをカスタマイズできる」ということです。たとえば、「グローバルメニューを画像に置き換えたい」も、CSSをカスタマイズして実現することができます。

メニュー項目の画像置き換えもCSSカスタマイズで可能

CSSカスタマイズの手法はさまざまですが、テーマのstyle.cssを開いて修正する方法は効率的ではありません。

なぜなら、修正したいデザイン（スタイル）はテーマのstyle.cssに書かれているとは限らないからです。複数のCSSファイルを持つテーマもありますし、プラグインのCSSが反映されている場合もあります。

ページのデザインをカスタマイズしたい場合、テーマのCSSを開いて修正するのではなく、現在表示中のページに適用されているCSSを知ることが重要です。そのCSSを何らかの形で上書きしなければ、いつまでたっても「自分で作成したCSSが反映されない」というモヤモヤから解放されません。

現在表示中のページに適用されているCSSを調査できるツールが「インスペクタ」です。インスペクタはブラウザに組み込まれているツールで、HTMLやCSSを調べるだけでなく、CSS変更のシミュレーションなどもできる強力なツールです。以下の画面はFireFoxの例です。

CSSカスタマイズを強力にサポートするツール「インスペクタ」

FireFox以外のブラウザでは名称が異なりますがインスペクタと同様のツールを使うことができます。

ここでは、インスペクタを使ってサイトのデザインをカスタマイズ（CSSカスタマイズ）する方法を説明していきます。前半はインスペクタの使い方を中心に説明し、後半はケーススタディとして定番のCSSカスタマイズ事例に取り組んでいきます。

作業にあたってCSSの知識があれば理想的ですが、知識がなくても読めるように、できるだけ簡単に説明しています。CSSの記述経験がない方も読んでみてください。

テーマにBizVektor（ビズベクトル）、ブラウザにFireFoxを使う例で説明しますが、他のテーマやブラウザでも考え方は同じなので参考にしてください。

インスペクタの使い方（電話番号の色設定を例に）

まずは、画面の右上に表示された電話番号の色を変更する例でインスペクタの使い方を見ていきましょう。

BizVektorの電話番号周辺のデザインをカスタマイズしたい

CSS調査ツール「インスペクタ」を表示する

デザインをカスタマイズする部分のHTMLやCSSを特定するため、インスペクタを開きます。それには、カスタマイズしたいパーツあたり（ここでは、電話番号）でブラウザ画面を右クリックして「要素を調査」（FireFoxの場合）メニューを選択します。

ブラウザ画面を右クリックして「要素を調査」メニューを選択

ここでは、FireFoxを使って説明を進めていきますが、その他の主なブラウザでは以下のメニューからFireFoxのインスペクタに該当する機能を使うことができます。参考にしてください。

• Google Chrome --- 「検証」メニュー
• Internet Explorer --- 「要素の検査」メニュー
• Safari --- 「要素の詳細を表示」メニュー

「要素を調査」メニューをクリックすると、画面が上下に分割されます。画面下部に開いたウィンドウが「インスペクタ」です。

ブラウザ画面のHTMLやCSSを解析できる「インスペクタ」

インスペクタには現在表示中の画面のHTMLとCSSが表示されます。画面の左側(1)がHTML、右側(2)がCSSです。これらのコードを参考にしながらCSSを記述してデザインをカスタマイズすることができます。

ブラウザ画面に対応するHTMLとCSSの確認

ブラウザに表示されている電話番号(1)に該当するHTMLタグ(2)がハイライトされ、そのHTMLに適用されているCSS(3)が表示されます。

現在表示中の画面のHTMLとCSSが表示される

目的のHTMLやCSSが表示されていない場合は、HTMLウィンドウで任意の場所(1)をクリックしてみましょう。ブラウザ画面に点線(2)が表示され、目的の場所を正しく選択できたか確認することができます。

HTMLをクリックしてブラウザ上の要素を確認

または、HTMLウィンドウの上にある要素選択ボタン(1)をクリックして、ブラウザ画面で調べたい場所をクリック(2)します。

要素選択ボタンをクリックしてからブラウザ画面を選択することもできる

すると、ブラウザ画面でクリックした要素のHTMLがハイライトされます。

クリックした要素のHTMLがハイライトされる（そのスタイルは右側に表示される）

ブラウザ画面のHTMLとCSSをインスペクタで表示する仕組みが理解できたら、CSSのカスタマイズを始めていきましょう。

カスタマイズしたい要素のCSSを調べる

修正したい要素（ここでは電話番号）あたりを右クリックして「要素の調査」メニューからインスペクタを開いて右側のCSSウィンドウ（「ルール」タブ）に注目してください。

修正したい要素のスタイルを確認

電話番号に対して設定されているスタイルが表示されていますが、このウィンドウはかなり下までスクロールできるくらい多くのCSSが記述されています。

多くのCSSが記述されているのは、同じようなスタイルが何度も記述されていることが1つの原因です。たとえば、CSSウィンドウをよく見ると、何度もフォントサイズ（font-size）が指定されていることに気づきます。

フォントサイズを指定するCSSが何度も記述されている

ここがWordPressのCSSカスタマイズのツボです。次の点を頭に入れておきましょう。

• 同じ要素にいくつもCSSが指定されている場合がある
• そのうち最も優先度が高いスタイルが適用される

同じ要素にいくつもCSSが指定されているのは、テーマだけでなくプラグインにもCSSが含まれていたり、テーマのCSSの中でもスマホ用のCSS、タブレット用のCSS、PC用のCSSなど、同じ要素に対して複数のスタイルが定義されているためです。

いくつものスタイルが指定されている場合、最も優先度が高いスタイルが適用されます。たとえば、次の例ではフォントの種類が2回指定(1)(2)されていますが、優先度の高い(1)が適用され、(2)は打ち消し線で消されています。この打ち消し線は、優先度が低いのでスタイルが反映されないことを示しています。

優先度の低いスタイルは打ち消される

この要素のスタイルをカスタマイズするには、現在適用されているスタイル（打ち消されていないスタイル）を探して上書きする必要があります。

ただし、「上書き」とは実際にstyle.cssを開いて既存のコードを修正することではありません。既存のコードを打ち消すために優先度の高いCSSを作成するということです。具体的な作業はこれから説明していきます。

スタイルの変更とプレビュー

電話番号の色を変更したいので、もう一度、現在の設定を確認しましょう。

現在の電話番号の色設定

インスペクタを使うメリットは、画面上でCSSの変更をシミュレーションできることです。スタイル変更後のイメージをプレビュー（実際に変更せずにイメージを確認）することができます。

試しにCSSの色設定の部分（ここでは、#006600）をクリックしてみてください。設定を編集できるようになるはずです。

色設定が編集可能になる

変更したい色の名前またはカラーコードを入力します。ここでは、「red」と入力しましたが、他の色でも大丈夫です。

色設定を「red」に変更する

CSS(1)が変更され、その内容がブラウザ画面(2)に反映されます。

CSSの変更がブラウザ画面に反映される

うまくいかない場合は入力ミスがないかチェックしてください。基本的に記号も含めてCSSは半角で入力する必要があります。次のように「ｒｅｄ」(1)と全角で入力するとうまくいきません。その場合、入力が間違っていることを示すアイコン(2)が表示されます。ご注意ください。

CSSの入力ミスで警告アイコンが表示される

CSSを変更して電話番号が赤く変わりました。ただし、これは変更のシミュレーションです。実際のファイルは変更していないので、お試しで変更イメージを確認したい方も安心して作業できます。

修正中のCSSは左端に緑の目印が付いています。

カスタマイズ中のCSSを示す目印

オリジナルのCSSに戻すにはブラウザ画面を更新します。

変更したスタイルを反映させる

上記のCSSカスタマイズは、あくまでシミュレーションなので、作成したCSSをどこかに保存する必要があります。

子テーマのstyle.cssに入力するのが定番ですが、BizVektorでは「外観」-「CSSカスタマイズ」メニューを使うこともできます。子テーマを使わなくてもCSSカスタマイズにチャレンジできるので便利です。

ここでは、「外観」-「CSSカスタマイズ」メニューを使う方法で説明しますが、子テーマのstyle.cssでも考え方は同じです。

早速、作成したCSSを保存しましょう。それには、インスペクタのCSSウィンドウでCSSをコピーします。「#header」から「}」の行までしっかりコピーしましょう。コピー漏れが原因のWordPressトラブルが多いのでご注意ください。

カスタマイズしたCSSをコピー

「外観」-「CSSカスタマイズ」メニュー（または子テーマのstyle.css）を開いて、コピーしたCSSをペースト(1)します。問題なければ「CSSを更新」ボタン(2)をクリックしてCSSを保存しましょう。

「外観」-「CSSカスタマイズ」にCSSをペースト

サイトを表示してブラウザ画面を更新し、もう一度インスペクタを開いてみましょう。修正前のオリジナルCSS(1)に打ち消し線が引かれています。上記のステップで入力した新たなCSS(2)が優先されているためです。結果として、電話番号の色(3)が緑から赤に変わります。

新たなCSSが優先され既存のCSSが打ち消される

これで、インスペクタを使ったCSSカスタマイズは完了です。その他の要素についても基本的には同じ手順でカスタマイズすることができます。

インスペクタの使い方のまとめ

ここまで、インスペクタの使い方を簡単に説明してきました。CSSカスタマイズの手順をまとめておきます。

• カスタマイズしたいパーツあたりでインスペクタを開く
• カスタマイズしたいパーツのHTMLとCSSを確認する
• CSSを修正してブラウザ画面のプレビューを確認する
• 問題なければCSSを「CSSカスタマイズ」メニューなどにコピーペーストする
• コピーペーストしたCSSから不要な行を削除して保存する

続いて、WordPressの個別サポートでも相談が多い定番のCSSカスタマイズ事例について、インスペクタを使って解決してみましょう。

ケーススタディ1：ヘッダーロゴのサイズを変更する

BizVektorではヘッダーロゴ画像を表示できますが、大きい画像は高さが60pxに縮小表示されます。

高さが60pxに縮小表示されるロゴ画像

もう少し大きいロゴ画像は縮小せずに表示したい場合もあります。「ロゴの表示サイズを大きくしたい」は、WordPressの個別サポートでも人気の相談です。

ここでは、高さが150pxのロゴ画像を表示する例で説明しますが、実際に使いたい画像に合わせて作業して大丈夫です。

幅600px、高さ150pxのロゴ画像を縮小せずに表示したい

ロゴの表示サイズを変更する

まずは、ロゴ画像あたりを右クリックしてインスペクタを開きます。

ロゴを右クリックしてインスペクタを開く

ブラウザ画面(1)を形成しているHTML(2)とCSS(3)を確認しましょう。

インスペクタを開いてHTMLとCSSを確認

CSSウィンドウに注目すると、都合の良いことにロゴ画像の高さ制限（max-height）が指定されているのが見えます。

ロゴ画像の高さ制限が指定されている

この制限を緩めれば、大きいロゴ画像を縮小せずに表示できるようになります。さっそく、サイズ制限の「60px」の部分をクリックして「150px」などに変更してみましょう。

プレビュー用にサイズ指定を変更する

ロゴ画像の表示サイズが大きくなり、オリジナルの画像を表示できるようになります。

CSSのカスタマイズ結果のプレビュー

これで大丈夫そうであれば、ひとまずカスタマイズしたCSSをコピーします。

カスタマイズしたCSSをコピー

「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにペーストします。

インスペクタからCSSをコピーペースト

このうち、今回のカスタマイズに不要な部分を削除します。具体的には、「margin-top: 3px;」は今回のカスタマイズには関係ないので削除しましょう。

不要なCSSを削除してカスタマイズ完了

完了したら「CSSを更新」ボタンをクリックして、サイトを確認しましょう。

「デザインが崩れた！」に対処する

ロゴが大きくなり、カスタマイズが完了したように見えるかもしれませんが、油断は禁物です。修正したパーツだけに注目せず、他に影響が出ていないか確認してください。ここでも、ロゴ画像の幅が広すぎたせいで、右側の電話番号が下に落ちてしまいました。

ロゴの高さ調整はうまくいったが電話番号が下に落ちた

「レイアウトが崩れた！」と騒ぎたくなるかもしれませんが、落ち着いて原因を調べましょう。それには、電話番号あたりで右クリックしてインスペクタを開きます。

レイアウト崩れの原因調査のため電話番号あたりでインスペクタを開く

開いたインスペクタで電話番号あたりのHTML(1)をクリックしてみると、ブラウザ画面に表示された要素(2)の幅が広すぎてロゴ画像(3)と横並びにできないように見えます。

電話番号(2)とロゴ画像(3)が横並びにならないことを確認

そこで、どこかに広い幅が指定されていないか、CSSウィンドウをチェックしていきます。現在の要素（id="headContactTel"）に幅の指定が見当たらなければ、HTMLウィンドウで周辺の要素をクリックして、現在の要素の内側や外側に幅指定がないかチェックしていきます。

すると、以下のHTML要素(1)（「id="headContact"」のdivタグ）で「width: 50%;」というスタイル指定(2)が見つかり、ブラウザ画面では幅の広い電話番号エリア(3)が作成されていることを確認できます。

電話番号の幅を指定している要素が見つかる

これが原因なのか確定はできませんが、ひとまず「width: 50%;」の部分を修正してみましょう。

幅の広い電話番号のスタイル定義

「width: 50%;」の「50%;」をクリックすると編集可能な状態になるので適当な値に変更してみましょう。たとえば、「30%」に変更してみます。

電話番号の幅を30%に変更する

ブラウザ画面のプレビューを見ると、ロゴと電話番号が横並び可能になったのを確認できます。また、HTMLウィンドウで電話番号の要素(1)をクリックしてブラウザ画面を確認すると、確かに点線で囲まれた電話番号の幅(2)が狭くなっていることがわかります。

電話番号の幅が狭くなりロゴと横並び可能になった

これで問題なさそうなので、プレビューに使ったCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにコピーペーストします。

カスタマイズしたCSSをコピー

コピーしたCSSをペーストして保存（「CSSを更新」ボタンをクリック）します。

カスタマイズしたCSSをコピーペースト

完了後、サイトを表示してロゴ画像と電話番号が横並びになったことを確認しましょう。

ロゴ画像と電話番号が横並びになったことを確認

これで、「ロゴの表示サイズを大きくしたい」のカスタマイズは完了です。このケースで学ぶのはインスペクタの使い方だけではありません。カスタマイズで発生した他のパーツの問題にも対処が必要だということです。

1つのパーツをカスタマイズしたときは他のパーツに影響が出ていないか十分に確認しましょう。その場で気づかないと、ある日突然、「何もしていないのにデザインが崩れた！」という"WordPressの超常現象"を目にすることになります。

"WordPressの超常現象"のほとんどは、何らかの作業をしたときの確認漏れです。その場で発生していた問題の確認を忘れると、数日後に「何もしていないのに急にトラブルが起きた！」となるのです。ご注意ください。

ケーススタディ2：記事本文のフォントサイズを大きくする

「ブログ記事の文字サイズ（フォントサイズ）は大きくできないのですか？」

よくある質問ですが、これもインスペクタを使ってCSSを調整すれば大丈夫です。

記事本文のフォントサイズを大きくしたい

フォントサイズを変更する

ここまでと同じように記事本文でインスペクタを開いて手がかりをつかみましょう。

記事本文あたりでインスペクタを開く

CSSウィンドウを下にスクロールしていくと、フォントサイズに関するスタイル指定が見つかります。

フォントサイズに関するCSS

そこで、「font-size: 100%;」を「font-size: 110%;」や「font-size: 16px;」などに変更してみても、今ひとつスッキリ仕上がりません。たとえば、「font-size: 16px;」に変更すると、記事本文だけでなくパンくずリストやサイドバーなどの文字も大きくなってしまいます。

必要ない部分のフォントサイズも大きくなってしまう

うまくいかない原因は、CSSウィンドウで見つけたフォントサイズの指定がページ全体（*）に対する設定になっているためです。もう少し工夫が必要なようです。

CSSの適用範囲を限定する

そこで、ページ全体にスタイルを適用せずに、「記事本文のみに」のように範囲を限定してスタイルを指定します。たとえば、CSSウィンドウを上にスクロールしていくと、「.content p」（コンテンツエリアの段落＝記事本文の段落）というCSSセレクタが見つかります。ここにフォントサイズを指定したらどうだろうと考え、既存のスタイルの下をクリックして新たなCSSを入力できるようにします。

記事本文の段落に新たなスタイルを入力する

ここに「font-size: 16px;」と入力してみます。

フォントサイズ指定を追加

プレビューを見ると、今度は記事本文(1)（.content p）のみのフォントサイズが変更されています。パンくずリスト(2)のフォントサイズは小さいままです。

記事本文のフォントサイズのみが変更される

問題がなさそうであれば、このCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにコピーペーストします。このコードに含まれる「line-height: 170%;」は不要なので削除しておきましょう。

記事本文のフォントサイズ指定を追加

「CSSを更新」ボタンをクリックして完了です。サイトを表示して問題がないか確認しましょう。

記事本文のフォントサイズが大きくなる

このケースから学ぶのは「試行錯誤」です。ここにCSSを入力して、だめなら別の場所に入力してみる。論理的にCSSを組み込むプロのデザイナーさんから見れば邪道なアプローチかもしれませんが、ゼロからCSSカスタマイズに取り組む方には効率的な方法です。試行錯誤の気持ちでCSSカスタマイズにチャレンジしていきましょう。

ケーススタディ3：サイドバーのアイコン画像を変更する

「サイドバーのメニューのアイコン画像を変更したい」にもチャレンジしてみましょう。仕上がりイメージは次のようになります。

サイドバーの箇条書きのアイコンを変更したい

まずは、アイコンとして使いたい画像を「メディア」‐「新規追加」メニューからアップロードします。

使いたいアイコン画像をアップロード

アップロードの完了後、「編集」をクリックします。

アップロードの完了後に画像の編集メニューを開く

画面右側の「ファイルのURL」をメモ帳などにコピーします。または、後のステップでアイコン画像のURLをコピーペーストするときに、この画面を開いてURLをコピーペーストしても大丈夫です。

アイコン画像のURLをメモ帳などにコピー

箇条書きリンクのアイコンを変更する

サイトを表示して、インスペクタを開きます。今回はサイドバーの箇条書きをカスタマイズしたいので、箇条書き項目のいずれかを右クリックして「要素を調査」をクリックします。

箇条書き項目のインスペクタを開く

CSSウィンドウを見ると、箇条書きのリンク（li a）に対する背景画像のスタイル指定（background: url）が見つかるので、backgroundのプロパティをクリックして編集できるようにします。画像のパス「images/icon_arrow1_gray.gif」の部分をクリックすると画像が開いてしまうので注意してください。

アイコン画像のURLを編集可能に

編集状態にしたプロパティの「url」の中身を、アップロードしておいた新たなアイコンのURLに置き換えます。

新たなアイコンのURLに置き換える

変更イメージは次のようになります。

アイコン画像のURLを変更（urlの中身だけを変更）

URLを書き換えるとブラウザ画面のアイコンが置き換わります。アイコンのサイズや位置など多少の違和感は気にしないで大丈夫です。

アイコン画像が置き換わる

ひとまず、このCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにコピーペーストして微調整しましょう。

CSSをコピーする

コピーしたCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにペーストします。

コピーしたCSSをペースト

今回はbackgroundをカスタマイズしただけなので、「background」のみを残して他のプロパティは削除しておきましょう。

background以外のプロパティを削除する

「CSSを更新」ボタンをクリックしてサイトを確認します。

サイドバーの箇条書きアイコンが変更される

アイコンの表示位置を調整したい場合

アイコンの位置やサイズに違和感があれば、微調整しましょう。上記のCSSでURLの後に指定された「10px 50%」は背景画像の表示位置を示し、「左から10px・上から50%の位置に表示」という意味です。この値を修正しても良いですし、CSSに慣れている方はbackground-positionなどのCSSを使っても良いでしょう。

たとえば、アイコンを箇条書きブロックの中で左寄せ、上ピッタリに表示する場合は「10px 50%」を「left top」にします。表示結果は次のようになります。

アイコンを左寄せ・上ピッタリにした場合

「5px 12px」と指定すると左から5px、上から12pxに表示されます。

左から5px・上から12pxに表示した場合

あとは自由に調整してください。

アイコンのサイズを調整したい場合

アイコンのサイズは「background-size」で調整することができます。書式は次のようになります。

background-size: 幅 高さ;

たとえば、次のように記述します。

background-size: 8px 8px;

アイコン画像を指定した「background」と合わせて記述する例は次のようになります。

.sideTower .sideWidget li a {
    background: url(…略…) 10px 50% no-repeat;
    background-size: 8px 8px;
}

表示結果は次のようになります。

アイコンの表示サイズを変更した例

サイズの指定パターンは他にいくつもあるので興味があればインターネットでbackground-sizeについて調べてみてください。

ケーススタディ4：グローバルメニューを画像に置き換える

「文字ベースのグローバルメニューを画像に置き換えたい」

これもよくある相談です。グローバルメニューを画像に置き換えると、場合によってはSEO的に影響があるので要注意ですが、ここではデザインのカスタマイズがメインテーマなので紹介することにします。SEO最優先の方はご注意ください。

仕上がりイメージは次のようになります。

メニュー項目を画像に置き換える

事前に、メニュー項目に使う画像を「メディア」‐「新規追加」メニューでアップロードしておいてください。

ここでは、次のような画像を使います。

メニュー項目を画像に置き換える

グローバルメニューのCSSを調べるため、任意のメニュー項目を右クリックしてインスペクタを開きます。

メニュー項目のインスペクタを開く

カスタマイズしたいのはメニュー項目の作成に使われている「箇条書きのリンク」（li a）です。HTMLウィンドウ(1)でリンクのaタグをクリックして、ブラウザ画面(2)でメニュー項目がハイライトされ、CSSウィンドウ(3)にもaタグに関するスタイルが表示されていることを確認しましょう。

カスタマイズするメニュー項目のHTML・ブラウザ画面・CSSを確認

メニュー項目には画像が入っていないので、新たにbackgroundを使って画像を表示します。さらに、「text-indent: -9999px;」を使ってメニュー項目の文字を画面の外に飛ばします。CSSの例は次のようになります。

background: url(http:// …略… /service.png) no-repeat center;
text-indent: -9999px;

これをCSSウィンドウの「#gMenu .menu > li > a」の中に入力します。

メニュー項目を画像に置き換えるCSSを追加

入力後にブラウザ画面を見ると、メニュー項目の文字が消えて、代わりに画像が表示されるようになります。

メニュー項目に画像は表示されたが…

ただし、気づいたかと思いますが、すべてのメニューに同じ画像が表示されてしまいます。対処が必要ですが、ひとまず画像の表示まではうまくいっているので、ここまでのCSSをコピーして「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにペーストしておきましょう。

CSSウィンドウからCSSをコピーする

「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにペーストし、今回のカスタマイズに関係ない部分は削除して保存（CSSを更新）しましょう。

コピーペーストしたCSSを編集して保存

すべてのメニュー項目が同じ画像ですが、ここから修正するので大丈夫です。

メニュー項目の画像化までは問題なし

マウスオーバー時の問題に対処する

CSSに限りませんがWordPressのカスタマイズ作業では、とにかく確認が必要です。この例では「すべてのメニュー項目に同じ画像が表示される」の他にも問題があります。たとえば、メニューにマウスオーバーすると、「画像が表示されない！」に気づくはずです。

マウスオーバーしたら画像が消えた！

ここからはCSSの知識が必要になるので経験がない方は簡単に解決できないかもしれませんが、これはマウスオーバー時のスタイルを設定することで解決できます。さきほど更新したCSSを見直して、マウスオーバー時のCSSセレクタを追加します。

マウスオーバー時も同じ画像を表示するように変更

変更前後のCSSセレクタをまとめておきます。

#gMenu .menu > li > a {
…略…
}

#gMenu .menu > li > a,
#gMenu .menu > li > a:hover {
…略…
}

これで、マウスオーバー時も同じ画像が表示されるようになります。

マウスオーバー時も同じ画像が表示される

マウスオーバー時に別の画像を表示する

マウスオーバー時に別の画像（例：service2.png）を表示するには、上記のようにまとめたCSSセレクタを別々にすれば大丈夫です。たとえば、次のようなCSSになります。

/* 通常の画像 */
#gMenu .menu > li > a {
    background: url(http:// …略… /service.png) no-repeat center;
    text-indent: -9999px;
}

/* マウスオーバー時の画像 */
#gMenu .menu > li > a:hover {
    background: url(http:// …略… /service2.png) no-repeat center;
    text-indent: -9999px;
}

表示結果は次のようになります。

マウスオーバー時に違う画像を表示する

メニュー項目ごとに別の画像を表示する

あとは、メニュー項目ごとに別々の画像を表示できれば完了です。それを解決するため、任意のメニュー項目を選んでもう一度インスペクタを開きましょう。

メニュー項目のインスペクタを開く

HTMLウィンドウを見て、メニュー項目の箇条書きタグ（li）に注目してください。たとえば、「サービス紹介」メニューのliタグ(1)を見ると「menu-item-146」という固有のIDが割り振られています。

メニュー項目には固有のIDが付いている

他のメニュー項目のliタグ(2)も同じように固有のIDが付いていることに気づきます。

この固有のIDを活用すれば、メニュー全体の箇条書きリンクを示す「#gMenu .menu > li > a」というCSSセレクタを修正して特定のメニュー項目の箇条書きリンクとして機能させることができます。

つまり、

#gMenu .menu > li > a

は、すべてのメニュー項目で共通のCSSセレクタですが、メニュー項目固有のIDを付加して

#gMenu .menu > li#menu-item-146 > a

とすれば良いのです。

さっそくCSSを変更してみましょう。

特定のメニュー項目のみに画像を表示するようにCSSを変更

これで、特定のメニュー項目（例：ここでは「サービス紹介」）のみに画像が表示されるようになります。

特定のメニューのみに画像が表示される

あとは、他のメニュー項目についても固有のIDを付けて、個別の画像を指定すれば大丈夫です。CSSの例を以下に紹介します。

#gMenu .menu > li#menu-item-146 > a,
#gMenu .menu > li#menu-item-146 > a:hover {
    background: url(http:// …略… /service.png) no-repeat center;
    text-indent: -9999px;
}

#gMenu .menu > li#menu-item-149 > a,
#gMenu .menu > li#menu-item-149 > a:hover {
    background: url(http:// …略… /howto.png) no-repeat center;
    text-indent: -9999px;
}

#gMenu .menu > li#menu-item-148 > a,
#gMenu .menu > li#menu-item-148 > a:hover {
    background: url(http:// …略… /company.png) no-repeat center;
    text-indent: -9999px;
}

#gMenu .menu > li#menu-item-147 > a,
#gMenu .menu > li#menu-item-147 > a:hover {
    background: url(http:// …略… /blog.png) no-repeat center;
    text-indent: -9999px;
}

#gMenu .menu > li#menu-item-154 > a,
#gMenu .menu > li#menu-item-154 > a:hover {
    background: url(http:// …略… /booking.png) no-repeat center;
    text-indent: -9999px;
}

コードが増えたので混乱しないようにまとめておきますが、メニュー項目ごとに異なるのはIDと画像のファイル名（以下の赤い部分）だけです。

#gMenu .menu > li#menu-item-154 > a,
#gMenu .menu > li#menu-item-154 > a:hover {
background: url(http:// …略… /booking.png) no-repeat center;
text-indent: -9999px;
}

また、言うまでもありまんが上記のIDはサンプルサイトのものです。あなたのサイトではIDが異なるので、インスペクタでしっかり確認してCSSを作成してください。

これで、メニュー項目ごとに別々の画像が表示されます。

メニュー項目ごとに別々の画像が表示される

最後まで油断は禁物！スマホで確認すると…

これでグローバルメニューが画像になって安心しているかもしれませんが、油断は禁物です。このサイトをスマホで見てみましょう。

スマホで見たグローバルメニュー

見え方に違和感があれば対処が必要です。その方法はいくつもありますが、スマホやタブレットでは画像置き換えをしないパターンが簡単かもしれません。

上記の各メニューに関するCSSに「画面幅が広い端末の場合は」という条件を設定すれば、画面幅が狭いスマホやタブレットでは画像メニューではなく文字のグローバルメニューが表示されるようになります。

たとえば、上記のCSSを@media (min-width: 970px) {　}で囲みます。これにより、幅が970px以上の端末のみにCSSが適用されるようになります。

@media (min-width: 970px) {
    #gMenu .menu > li#menu-item-146 > a,
    #gMenu .menu > li#menu-item-146 > a:hover {
        background: url(http://hp555.net/wp-content/uploads/2016/02/service.png) no-repeat center;
        text-indent: -9999px;
    }
…途中省略…
}

表示結果は次のようになります。

スマホには文字メニュー・PCには画像メニューを表示する

まだカスタマイズしたいポイントがあるかもしれませんが、ひとまず、グローバルメニューの画像置き換えは完了とします。

このケースから学ぶのは「どこまでのカスタマイズをCSSで実現できるか」です。WordPressのカスタマイズというと、すぐにPHPの修正を考える方がいます。抜本的にはPHPを修正した方が良い場面もありますが、未経験の方には現実的ではありません。むしろCSSだけでどこまでカスタマイズできるのかを掘り下げるのが現実的です。

グローバルメニューの画像置き換えもCSSだけで実現できることが理解できれば、もう少し難しそうなカスタマイズもCSSで対処できるのではないか、という希望を持っていただけると思います。

まとめ

このように、ブラウザに組み込まれたインスペクタを使うとサイトのデザインを効率的にカスタマイズできるようになります。CSSの変更をプレビューしながら試行錯誤でカスタマイズできるインスペクタは最高のツールです。そんなインスペクタを使いこなして、自由自在にCSSをカスタマイズしていきましょう。

ここで紹介したケーススタディについてもデザインを仕上げたわけではありません。いくつか取りこぼしがあると思います。あとはみなさんのセンスにお任せします。発展学習として取り組んでいただければと思います。

BizVektorのトップページで使える「3PRエリア」は自由な内容を3つの列に並べられるので非常に便利です。便利すぎて、「3PRエリアをもっと増やせませんか？」というご相談を多くいただきます。たとえば、4PRエリアや6PRエリアを作りたい方が多いようです。

3PRエリア自体を拡張するのはPHPの修正が必要で非常に危険なのでおすすめしませんが、プラグインを使えば、同じようなことができます。仕上がりイメージは次のようになります。

オリジナルの6PRエリアの完成イメージ

プラグインを使えば安全に、4PRや6PR、8PRなど好きな数だけ、好きな内容のブロックを作成できます。以下、手順を紹介します。

プラグインのインストール

当サイトでも何度か紹介した非常に役立つプラグイン「Page Builder by SiteOrigin」と「SiteOrigin Widgets Bundle」を「プラグイン」‐「新規追加」メニューからインストール、有効化します。

Page Builder by SiteOriginプラグインのインストール

SiteOrigin Widgets Bundleプラグインのインストール

トップページにLayout builderを追加

続いて、トップページに6PRエリアや4PRエリアを作成します。そのため、「外観」-「ウィジェット」メニューを開いて画面左側の「Layout builder」ウィジェットを「コンテンツエリア（トップページ）」に追加します。

Layout Builderをコンテンツエリア（トップページ）に追加

3列や4列のレイアウトを作成するため、「Open Builder」をクリックしてLayout builderを開きます。

Layout Builderを開く

オリジナル3PRエリアの作成

3PRエリアを作る「行」（row）を追加

まずは、1行を追加して3列や4列のブロックを作成します。それがオリジナルの3PRエリアや4PRエリアになります。そのため、「Add Row」または「Row」をクリックします。

「Add Row」または「Row」をクリック

作成する列の数（Set row layout）から、4PRを作成する場合は「4」を選択し、3PRや6PR（3PR×2）を作成する場合は「3」を選択します。

追加する列数を選択

列のイメージを確認して「Insert」をクリックします。

列を追加

Page Builder画面に3列または4列（または2列など）が追加されます。6PRエリアや4PRエリアを作っていくベースのイメージはできたでしょうか。

空の3列が追加される

3PRエリアの最初の列の作成

1列ずつ作成していけば、この行に3PRエリアや4PRエリアが完成します。列にパーツを追加するため、左端の列(1)をクリックして「Add Widget」(2)を選択します。

左端の列にパーツを追加

選択可能なウィジェットの中から「SiteOrigin Editor」を選択します。

「SiteOrigin Editor」を選択

Page Builder画面に「SiteOrigin Editor」が追加されます。

「SiteOrigin Editor」が追加される

列の内容を編集するため、「SiteOrigin Editor」にマウスオーバーして「Edit」をクリックします。

「SiteOrigin Editor」の「Edit」をクリック

見慣れたビジュアルエディタ（またはテキストエディタ）が開きます。列ブロックの内容をエディタで編集できるということです。

ビジュアルエディタ（またはテキストエディタ）が開く

あとは、エディタを使って6PRエリアや4PRエリアの1項目をレイアウトすれば良いです。いつも投稿や固定ページの本文をレイアウトしている作業と同じです。ここでは表示確認のつもりで「見出し＋画像」（＋説明文）など、テスト用のレイアウト(1)を簡単に作成しておきましょう。完成後、右下の「Done」ボタン(2)をクリックしてPage Builder画面に戻ります。

1列分のレイアウトを作成

パーツをコピーしてたたき台レイアウトを作成

まずは1列のレイアウトができました。作成したパーツをコピーして3列や4列のたたき台を作りましょう。それには、パーツにマウスオーバーして「Duplicate」をクリックします。

パーツのコピー

コピーしたパーツをドラッグアンドドロップして隣の列に移動します。

コピーしたパーツを隣の列に移動

同じように右端の列にもパーツを埋めるため、「Duplicate」をクリックします。

もう一度パーツをコピー

コピーしたパーツを右端の列にドラッグアンドドロップします。

コピーしたパーツを右端の列に移動

3列や4列がパーツで埋まって、6PRエリアや4PRエリアのたたき台が完成しつつあります。

3列がパーツで埋まる

3PRエリアの行をコピーして6PRに

4PRを作成する場合は、この1行の4列をパーツで埋めれば完成です。3列×2行の6PRの場合は、行もコピーして2行にしましょう。それには、列のツールメニューにマウスオーバーして「Duplicate Row」をクリックします。

行をコピー

3PRエリアの列がコピーされて「6PR」になります。完成イメージが見えてきたでしょうか。4列×2行の8PRでも同じ考え方です。

6PRのベースが完成

画面右下の「Done」をクリックして「外観」-「ウィジェット」メニューに戻ります。

作業を完了して「外観」-「ウィジェット」メニューに戻る

Layout Builderの「保存」をクリックします。

Layout Builderの保存

サイトを確認すると、トップページに6PRのたたき台が表示されているはずです。

6PRエリアのたたき台が表示される

6PRエリアの完成

あとは、個々のパーツを1つずつ編集していけば、4PRや6PR、8PRエリアの完成です。

完成した6PRエリア

行や列の削除

個別の列のレイアウトを変更したい場合は、行や個別のパーツを削除して1列のレイアウトからやり直した方が早いです。

行の削除

行を削除するには、行ツールメニューの「Delete Row」をクリックします。

行の削除

確認メッセージ「Are you sure?」（本当に削除して良いですか？）をクリックすると、その行が削除されます。

行の削除確認

個別パーツの削除

個別パーツを削除するには、パーツにマウスオーバーして「Delete」をクリックします。確認メッセージは表示されないのでお試し厳禁です。

個別パーツの削除

まとめ

このように、Page Builder by SiteOriginプラグインとSiteOrigin Widgets Bundleプラグインを使うと、BizVektorにオリジナルの4PRエリアや6PRエリアを作成することができます。もちろん、BizVektor以外のテーマでも大丈夫です。あとは、あなたのアイデア次第です。いろいろと試行錯誤してみましょう。

作業がうまくいかないときはWordPress個別サポートにご相談ください。