賢威をカスタマイズする場合、子テーマのstyle.cssにCSSを入力しても初期設定では反映されません。

賢威ではheader.phpなどで親テーマのstyle.cssを読み込んでいないので、子テーマを作成してもstyle.cssが読み込まれないからです。

対処方法はいくつかあります。

単純にCSSを使って賢威のデザインをカスタマイズしたいだけならば、子テーマにこだわる必要はありません。Simple Custom CSSのようなプラグインを使ってCSSカスタマイズ用のメニュー（例：Custom CSS）からCSSを入力してデザインをカスタマイズすることができます。

子テーマを使わずに賢威をカスタマイズする

子テーマを作成してカスタマイズしたい場合、style.cssに入力したCSSを反映させるには、賢威で子テーマのstyle.cssを読み込ませる必要があります。

これもいくつか方法がありますが、たとえば、子テーマのfunctions.phpに次の1行を追加すれば、子テーマのstyle.cssが読み込まれるようになります。

/* 使用中のテーマのstyle.cssを読み込む */
wp_enqueue_style( 'keni-child-style', get_stylesheet_uri() );

表示されたサイトのHTMLを確認すると、親テーマのCSS一式が読み込まれた後に、子テーマのstyle.cssが読み込まれています。

子テーマのstyle.cssが読み込まれる

あとはカスタマイズしたいCSSを自由に子テーマのstyle.cssに入力すれば大丈夫です。

定番の子テーマのように「@import」によって親テーマのstyle.cssを読み込む必要はありません。

賢威のグローバルメニューは次のようにサイト名の下に表示されます。

賢威のグローバルメニュー（クール版の例）

グローバルメニューの各項目のフォントサイズは次のように「1.2em」に設定されています。

#global-nav #menu {
    font-size: 1.2em;
}

「1.2em」を任意のサイズに変更すればグローバルメニューのフォントサイズを変更できます。フォントサイズを大きくする場合は、必要に応じてメニュー項目の左右の余白を狭くした方が良いかもしれません。以下にCSSの例を紹介します。

/* グローバルメニューのフォントサイズを設定 */
#global-nav #menu {
    font-size: 1.6em;
}

/* メニュー項目の左右の余白を設定 */
#global-nav #menu li a {
  padding-left: 1.3em;
  padding-right: 0.8em;
}

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

グローバルメニューのフォントサイズを大きく

クール版のメニュー項目に付加されるアイコンを変更するには次のようなCSSを入力します。

/* メニュー項目のアイコンを設定 */
#global-nav #menu li a {
    background: url("images/square.gif") no-repeat 0.3em center;
}

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

メニュー項目のアイコンを変更する

メニュー項目にマウスオーバーしたときの色は「#757575」に設定されています。この色はリンクのhover疑似クラスに対して次のようなCSSを記述して変更できます。

/* メニュー項目マウスオーバー時の色を設定 */
#global-nav #menu li a:hover {
    background-color: #cca6bf;
}

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

メニュー項目マウスオーバー時の色を変更する

このセレクタには「opacity: 0.7;」という透明度が指定されています。この値を1に近づければ透明度が下がりハッキリ見える状態になります。0に近づけるとより透明になります。たとえば、「opacity: 0.2;」に設定してみると、次のようにほぼ透明の状態になります。

メニュー項目がほぼ透明に（opacity: 0.2;）

賢威で作成するサイトで個別記事の下にアドセンス広告を表示させる方法を紹介します。テンプレートファイルの修正が必要ですが、それほど難しくありません。

事前にGoogleアドセンスのサイトから広告のタグをコピーしておきましょう。

アドセンスのタグをコピーする

次に、賢威の個別記事用のテンプレート（単一記事の投稿／single.php）を開いてアドセンスの表示場所を検討しましょう。single.phpをダウンロードしてテキストエディタで編集するのが理想的ですが、「外観」‐「テーマの編集」（またはエディタ）メニューから開いても大丈夫です。

「外観」‐「テーマの編集」メニューで個別記事のテンプレート「single.php」を開く

アドセンス広告の表示場所は記事のすぐ下、またはソーシャルボタンの下が定番です。

アドセンス広告の表示場所を検討する

single.phpから次のようなコードを見つけましょう。「the_content」が記事の本文を表示する命令です。

<!--本文-->
<?php the_content(); ?>
<!--/本文-->

すぐ下にアドセンスのタグをペーストして「ファイルを更新」ボタンをクリックします。

本文のすぐ下に広告タグをペースト

本文のすぐ下に広告が表示されるようになります。

本文のすぐ下に広告が表示される

single.phpから次のコードを見つけましょう。上記の本文表示の少し下にあります。このコードでソーシャルボタンを表示しています。

<?php get_template_part('social-button'); ?>

この下にアドセンスのタグをペーストして「ファイルを更新」ボタンをクリックします。

ソーシャルボタンの下に広告タグをペースト

ソーシャルボタンの下に広告が表示されるようになります。

ソーシャルボタンの下に広告が表示される

広告を左寄せではなく中央に表示する場合は、広告タグを次のdivタグで囲む方法があります。

<div align="center">
広告タグ
</div>

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

広告を中央に表示する

アドセンス以外のアフィリエイトタグなどと合わせて2つの広告を横に並べたいこともあります。その方法はいくつかありますが、次のようにdivタグで2つのブロックを作成して横に並べる方法があります。

<div style="float:left;width:300px;">
広告タグ1
</div>
<div style="float:left;width:300px;margin-left:10px;">
広告タグ2
</div>
<div style="clear:both;"></div>

ここでは、幅300pxのブロックを2つ作成して「float:left;」で横に並べています。ブロックの間隔は10px空けています。唯一の正解ではないので、いろいろと試行錯誤してみてください。たとえば、2つ目のブロックを「float:right;」にして自動で余白を入れる方法もあります。

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

2つの広告を横並びで表示する

以上、簡単にですが賢威の記事下にアドセンスを表示する方法を紹介してきました。アドセンスのタグをペーストする位置や組み合わせるdivタグをアレンジして自分なりに見た目などを調整してみてください。

賢威のトップページのテンプレート（index.php）やCSSをカスタマイズしてデザインを変更する例を紹介します。検証したバージョンは賢威6.2クール版です。

トップページのメイン画像の上にはキャッチコピーが表示されます。文字の色が白いので画像によってはキャッチコピーが見づらくなります。

メイン画像によってはキャッチコピーが見えづらくなる

次のCSSを子テーマのstyle.cssなどに記述すると、キャッチコピーの背景色を設定して文字の色も変更できます。

/* キャッチコピーの背景色を設定 */
#main-image .catch-copy {
    background: #fff;
    color: #000;
    padding:10px;
    opacity: 0.9;
}

背景色を白に、文字を黒に、余白を10pxに設定しています。opacityは透過です。裏の画像が透けて見えます。

キャッチコピーの背景色を設定

トップページに表示されるメイン画像のPCでの表示幅は950pxに設定されています。

トップページのメイン画像（幅950px）

次のCSSを入力すればメイン画像の幅を画面いっぱいに広げることができます。

/* メイン画像の幅を100%に設定 */
.col2 #main-image-in {
    width: 100%;
}

/* メイン画像の余白を削除 */
#main-image-in {
    padding: 0;
}

「.col2」は2カラムデザイン用のセレクタです。必要に応じて「.col3」などに修正してください。

メイン画像の幅を画面いっぱいに

トップページのブログ記事の一覧（最新情報）には抜粋も表示されますが、この抜粋を削除することもできます。

index.phpを修正した方がスッキリしますが、CSSで対応したい方は次のようなコードで消すことができます。

/* 最新情報の抜粋を消す */
#main-contents dl.news dd div {
    display: none;
}

抜粋を非表示にした結果は次のようになります。

最新情報から抜粋を消す

テンプレートのPHPを修正してスッキリと抜粋を消すにはindex.phpを編集します。

最新情報を表示している命令は63行目のnewposts_keniです。

newposts_keni($new_info_rows,1,1,"year",0,the_keni('new_info')); ?>

この(　)に指定された3番目のパラメータが「抜粋を表示するか」です。「1」は抜粋を表示、「0」は抜粋を表示しない設定なので、「0」に変更します。

newposts_keni($new_info_rows,1,0,"year",0,the_keni('new_info'));

これで抜粋が削除されます。HTMLソースからも消えます。

index.phpを修正して抜粋を消す

「やっぱり抜粋を表示したい」と気が変わったときは上記の「0」を「1」に戻してください。それだけで元に戻ります。

「賢威の設定」‐「トップページ」メニューの「新着情報の表示」で「タイプ1」「タイプ2」いずれを選んだ場合でも、この命令で抜粋の表示／非表示を切り替えることができます。

賢威のトップページの記事一覧は2回表示されるので、最初の最新情報には「お知らせ」カテゴリーのみを表示したいことがあるかもしれません。

その場合も上記のindex.phpでnewposts_keniを呼び出すときのパラメータで制御できます。5番目のパラメータ（初期設定は0）にカテゴリーIDを指定すれば、そのカテゴリーの投稿のみが表示されるようになります。

newposts_keni($new_info_rows,1,0,"year",0,the_keni('new_info'));

たとえば、「お知らせ」カテゴリーのIDが12なら、次のように指定すれば最新情報にはお知らせカテゴリーのみが表示されます。

newposts_keni($new_info_rows,1,0,"year",12,the_keni('new_info')); ?></dl>

最新情報にお知らせカテゴリーのみを表示した結果は次のようになります。

最新情報にお知らせカテゴリーのみを表示する

最新情報を特定カテゴリーのみに絞ったなら、「最新情報」のラベルも変更したいところです。「最新情報」のラベルはindex.phpの51行目で表示されています。

<h2><?php _e('Latest Info','keni') ;?></h2>

h2タグで囲まれた部分を「お知らせ」などに変更すれば自由にラベルを修正できます。

<h2>お知らせ</h2>

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

「最新情報」を「お知らせ」に変更

賢威のヘッダーやフッターの背景色はダウンロード前にテンプレートメーカーで設定できますが、使い始めてからカスタマイズしたくなることもあるでしょう。

ここではCSSを使って賢威のヘッダーやフッターの背景色を変更したり背景画像やロゴ画像を表示する方法を紹介します。コーポレート版を使います。

賢威のヘッダー周り（コーポレート版：カスタマイズ後）

ヘッダーに背景画像を表示する

ヘッダー部分に表示したい背景画像を「メディア」‐「新規追加」メニューからアップロードします。画像は自由ですが、つなぎ目が見えないように、素材集などで提供されている「背景用」の画像を使うのが無難です。

アップロードした背景用の画像

アップロードした画像をメディアライブラリでクリックしたときに開く「添付ファイルの詳細」からURLをコピーします。

アップロードした画像のURLをコピー

カスタマイズに使うCSSファイルに次のCSSを入力します。「http:// --- .gif」の部分は、上記でコピーした画像のURLに置き換えてください。

#top,
#header {
    background: url(http:// --- .gif);
}

これでヘッダー部分に背景画像が表示されます。

賢威のヘッダー部分に背景画像を表示

ヘッダーロゴを表示する

ヘッダーのサイト名の代わりにロゴを表示するには、header.phpに書かれた「header-logo」の部分を修正します。

ヘッダーのサイト名はheader.phpの「▼ヘッダー」の目印付近にある次のコードで表示されています。

<p class="header-logo">
<a href="<?php bloginfo('url'); ?>">
<?php bloginfo('name'); ?></a></p>

※便宜上、改行しています。

リンクの中でサイト名（bloginfo('name')）が文字で表示されているので、imgタグに置き換えて画像を表示するように変更します。

<p class="header-logo">
<a href="<?php bloginfo('url'); ?>">
<img src="http:// --- .png" alt="<?php bloginfo('name'); ?>"></a></p>

※便宜上、改行していますが1行で大丈夫です。

imgタグの「http:// --- .png」の部分を前述のヘッダー用の背景画像と同じようにメディアライブラリにアップロードした画像のURLに置き換えれば完了です。画像のalt属性にはサイト名を出力しています。

これで、サイト名の代わりにロゴ画像が表示されます。

サイト名の代わりにロゴ画像を表示する

フッターの背景色を変更する

フッターの背景色は次のCSSで変更することができます。「#006600」は好きな色の名前やカラーコードに変更してください。

#footer {
    background-color: #006600;
}

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

フッターの背景色を変更する

フッターのコピーライト行も含めて色を変更するにはCSSセレクタに「.copyright」を追加します。また、文字の色も統一しておいた方が良いかもしれません。

.copyright,
#footer {
    background-color: #006600;
    color: #fff;
}

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

コピーライトを含めて背景色を設定

フッターに背景画像を表示するには次のように記述します。

#footer {
    background: url(http:// --- .gif);
}

「http:// --- .gif」はメディアライブラリにアップロードした画像のURLに変更してください。表示結果は次のようになります。

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

「このページの先頭へ」の色を変更する

フッターをカスタマイズしたついでに画面右下に表示される「このページの先頭へ」の色も変更したくなるかもしれません。

「このページの先頭へ」リンク

「このページの先頭へ」の通常時とマウスオーバー時の文字色と背景色を設定するCSSをまとめておきます。それぞれ、好きな色に変更してお使いください。

/* 「このページの先頭へ」の色 */
.page-top a,
.page-top a:link,
.page-top a:visited {
    background-color: red;
    color: white;
}

/* 「このページの先頭へ」マウスオーバー時の色 */
.page-top a:hover {
    background-color: orange;
    color: white;
}

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

「このページの先頭へ」の色をカスタマイズ

「SEOに強い」で有名なテンプレート「賢威」ですが「デザイン的にはどうなの？」が気になっている方もいると思います。そこで、賢威7のテンプレートのイメージを紹介します。執筆時点では25種類あります。

バリエーションが豊富な賢威のテンプレート

企業サイト向きのコーポレート版、美容系のビューティ版、女性サイト向けのプリティ版、幅広い業種向きのクール版など、用途に応じてカラーバリエーションが用意されています。

ピンときたパターンがあれば、賢威を購入してさっそくダウンロードしていただくことをおすすめします。

テンプレートパターンと合わせて、サイトを彩るデザインパーツをいくつか紹介します。たとえば、ランキング、お客様の声、画像上のリンクなどです。参考にしてください。

コーポレート版テンプレート

コーポレート版テンプレートは企業、団体、個人事業、士業などに合うデザインです。ベースカラーはBLACKやBLUEの落ち着いた色だけでなくORANGEやPINKも選べるので柔らかいイメージの会社や幼稚園、保育園、学校、料理教室などにも合うと思います。

ヘッダー画像にキャッチフレーズを表示可能

上記のサンプルでは、ヘッダー画像にキャッチフレーズを表示していませんが、従来の賢威と同じようにヘッダー画像の中にキャッチフレーズを表示することもできます。

ヘッダー画像にキャッチフレーズを表示できる

ビューティ版テンプレート

ビューティ版テンプレートはサロン、美容系、エステなどに合う華やかなデザインです。重厚感のあるGOLDやWINEから、さわやか系のAQUAまで選べるので、さまざまなお店の雰囲気に合うテンプレートが見つかると思います。

予約カレンダーの設置イメージ

ちなみに、サロン系サイトによくある予約カレンダー（MTS Simple Booking Cで作成）を設置したイメージは次のようになります。エステや治療院の予約システムを作りたい方は参考にしてください。

予約カレンダー

丸印を画像に置き換えた場合

プリティ版テンプレート

プリティ版テンプレートは女性向けサイトやアフィリエイトにも合いそうな色使いです。派手すぎず地味すぎずバランスの良い色合いになっているので普通の会社のサイトにも使えると思います。

クール版テンプレート

クール版は幅広い業種に合うテンプレートです。色選びに迷ったらNAVYあたりが無難かもしれません。

スタンダード版テンプレート

ゼロから自分でデザインをカスタマイズしたい方はスタンダード版が便利です。

スタイル定義済みのデザインパーツ

賢威ではテンプレートのデザインを選べるだけでなく、カスタマイズに役立つ定義済みのスタイルがいくつも用意されています。HTMLにclassを付加すれば各種デザインパーツを組み込むことができます。

アフィリエイトに役立つランキングパーツ

ランキング形式のレイアウトを簡単に作成できるようになっています。アフィリエイトの商材や貴社の人気サービスなどを紹介するときに役立つでしょう。

アフィリエイトにも役立つランキングパーツ

FAQなどに使えるQAパーツ

FAQ（よくある質問）などのコーナーで使えるQAパーツも用意されています。ビューティ版テンプレートでは次のようになります。

QAパーツ（ビューティ版テンプレートの場合）

コーポレート版テンプレートでは次のようなイメージです。

QAパーツ（コーポレート版テンプレートの場合）

お客様の声などに役立つ「画像＋吹き出し」

画像と吹き出しのレイアウトを使えばお客様の声なども簡単に作成できます。写真の角を丸くしたり吹き出しに背景色を付けることができるので、あとは貴社サイトの雰囲気に合ったスタイルを選べばアイデア次第でサイトが華やかになっていくでしょう。

お客様の声に役立つ「画像＋吹き出し」（プリティ版テンプレートの例）

商材ダウンロードに役立つ各種アイコン

ダウンロードベースの商材やマニュアルを配布するのに役立つアイコンもそろっています。

賢威で使えるアイコンの例

商品ページへの誘導に役立つ「画像上のリンク」

商品やサービスページにうまく誘導するために「画像の上に文字やリンクを乗せたい」もニーズの多い要件です。賢威では次のように画像の上にリンクや文章をのせることができます。商品ページへのナビゲートに役立つでしょう。

画像の上にリンクを表示

画像を背景に設定して、その上に文章をのせることもできます。

背景画像の上に文章をのせる（プリティ版テンプレートの場合）

クリックしたくなるコンバージョンボタン

「お申し込みはこちら」や「資料請求」「お問い合わせはこちら」など、成約につなげるボタンは、色や大きさが重要です。そんなボタンのスタイルに悩まなくても賢威なら、こんなボタンを使うことができます。

コンバージョンボタン（クール版テンプレートの例）

テンプレートによってボタンのイメージも違うので、いろいろなテンプレートを試してみると良いかもしれません。以下はコーポレート版テンプレートの例です。

コンバージョンボタン（コーポレート版テンプレートの例）

以下はプリティ版テンプレートのコンバージョンボタンです。

コンバージョンボタン（プリティ版テンプレートの例）

以下はビューティ版テンプレートのコンバージョンボタンです。

コンバージョンボタン（ビューティ版テンプレートの例）

いかがでしょうか。ボタンのバリエーションだけ見ていてもサイト制作が楽しくなりそうな気がするのは私だけでしょうか。

賢威には、ここでは紹介しきれないほどデザインパーツが充実しています。ダウンロードしたテンプレートにデザインパーツを組み込んで、貴社サイトのイメージに合うかどうか吟味していけば、サイトの完成形が見えてくることでしょう。

SEOに強いと評判のWordPressテーマ「賢威」ですが、2万円を超える金額なので、なかなか手が出ないかもしれません。そこで、賢威を少しでも安く購入する方法を紹介します。

賢威を安く購入できる「お名前.com」

少しでも安く賢威を購入したい場合、お名前.comで購入する方法があります。

賢威7パッケージプランでは、21%OFFの18,000円（税込19,440円）になります。従来の24,800円からおよそ5,000円の割引です。

• 賢威7は買い取りです。月額ではなく初回に全額支払って購入完了です。
• サイト制作に役立つ賢威のサポートフォーラムも使用可能になります。
• さらに、サーバー初期費用無料＋月額最大2ヶ月分無料です。

購入したテーマは他のレンタルサーバーでも使えます。裏技ではありませんが、参考までに。たとえば、しばらくお名前.comのレンタルサーバーを使ってみて、他社に乗り換えたとしても賢威7はそのまま使用可能です。

これは執筆時点の情報なのでサービス内容や料金は変更される可能性があります。「賢威を安く買いたい！」と思っていた方、今がチャンスです。

21%OFFの賢威の購入はこちらから

賢威 7ではフッターを自由に編集できるようになっていますが、3列とか4列に分かれていれば、いろいろなパーツを差し込めて便利だという声を聞きます。そこで、フッターを3列にする方法を紹介します。こんなイメージです。

フッターを3列にして使いたい

3列にはGoogleマップ、最近の投稿、YouTube動画を入れていますが、あくまでサンプルなので使い方は自由、あなたのアイデア次第です。以下、手順を紹介します。

賢威 7のフッターとは

自由に入力できるのは便利、でも…

賢威 7では、フッターエリアを自由に編集できるようになっています。具体的には「賢威の設定」‐「フッター」メニューを開いて「自由記述欄」に文字通り好きな内容を入力できます。

自由に入力できる賢威 7のフッター

とはいえ、この広いエリアに1つだけパーツを入れるのはもったいないかもしれません。たとえば、Googleマップを表示するとしても次のようなレイアウトでは少し違和感があるでしょう。

フッターにGoogleマップだけを表示したイメージ

2列や3列にした方が使いやすいかもしれません。こんな感じです。

フッターを3列にして使いたい

フッターを2列や3列にするための戦略

自由記述欄を2列や3列にするといっても、その方法が問題です。divタグやtableタグを駆使して横並びのレイアウトを作成したとしても問題はレスポンシブ対応です。相当な時間がかかって止めたくなるかもしれません。

そんなときに役立つのがShortcodes Ultimateプラグインです。さまざまなパーツをショートコードで追加できる非常に便利なプラグインです。今回の要件の2列や3列のエリア（マルチカラム）やGoogleマップ、YouTube動画などもショートコードで差し込むことができます。

Shortcodes Ultimateプラグインについて詳しくは以下のページも参考にしてください。

これは便利！「地図・動画・枠線もショートコードで」のShortcodes Ultimateプラグイン

以下、Shortcodes Ultimateプラグインを使って賢威 7のフッターを3列にして好きなパーツを3つ入れるまでの手順を紹介します。

Shortcodes Ultimateのインストール

フッターを3列にするためShortcodes Ultimateプラグインをインストールします。

Shortcodes Ultimateプラグインのインストール

フッターを3列にする

賢威 7のフッターを3列にするため、「賢威の設定」‐「フッター」メニューを開いて「ショートコードを挿入」ボタンをクリックします。

フッターにショートコードを挿入

Shortcodes Ultimateプラグインで使用可能な膨大なパーツアイコンのうち、右から2列目にある「行」をクリックします。マルチカラムを作成できるパーツ（ショートコード）です。

マルチカラム用のパーツ「行」をクリック

追加するショートコード（コンテンツ）(1)を確認して、「ショートコードを挿入」ボタン(2)をクリックします。

ショートコードを確認して追加

次のようにマルチカラムのショートコードが追加されます。

マルチカラムのショートコードが追加される

ひとまず保存して、サイトを確認してみましょう。

フッターが3列になる

なんとなくフッターが3列になりそうなイメージは持っていただけると思います。あとは、「コンテンツ」の文字を好きな内容に置き換えれば完成です。

フッターの編集

上記の3列のショートコードは改行されていないので見づらいかもしれません。編集しやすいように次のように整形しても大丈夫です。

3列を編集しやすいように改行する

ただし、この状態で保存すると意図しない場所に改行が入るなどしてレイアウトが崩れる場合があります。レイアウトがうまくいかない場合は保存する前に次のように改行を削除してみてください。

レイアウトが崩れる場合はショートコードの改行を削除して保存

3列フッターの活用例

あとは自由に3列にパーツを追加していけば大丈夫です。ここでは次のようなコンテンツを入れてみます。すべてShortcodes Ultimateプラグインのショートコードだけで完成します。

• Googleマップ
• 最近の投稿（新着情報）
• YouTube動画

3つのパーツはショートコードのsu_columnの開始と終了の間に入力します。次の赤い部分です。

3列用のショートコードを追加する位置

カーソルを上記の位置に移動してから、以下のパーツを追加してください。

Googleマップを追加

フッターの編集画面で「ショートコードを挿入」ボタンをクリックして「Googleマップ」を選択します。

Googleマップを選択

「マーカー」(1)に住所を入力して「ショートコードを挿入」ボタン(2)をクリックします。

Googleマップのショートコードを挿入

Googleマップのショートコードが追加されます。

Googleマップのショートコードが追加される

必要に応じて、保存してサイトを確認してください。フッターにGoogleマップが表示されます。

フッターにGoogleマップが表示される

最近の投稿（新着情報）を追加

フッターの編集画面で「ショートコードを挿入」ボタンをクリックして「投稿」を選択します。

投稿一覧を追加

「テンプレート」から「記事のタイトルとリスト」（templates/list-loop.php）をクリックします。これにより、記事のタイトルが一覧表示されます。

投稿一覧のテンプレートを選択

「ページあたりの投稿数」（表示件数）を「5」くらいに設定しておきます。

投稿の表示件数を設定

その他、さまざまな設定が可能ですが、ひとまず初期設定のまま進めます。画面を下にスクロールして「ショートコードを挿入」ボタンをクリックすると設定完了です。

「ショートコードを挿入」ボタンをクリック

投稿一覧のショートコードが追加されます。

投稿一覧のショートコードが追加される

必要に応じて、保存してサイトを確認してください。フッターに最近の投稿表示されます。

フッターに投稿一覧が追加される

YouTubeの追加

フッターの編集画面で「ショートコードを挿入」ボタンをクリックして「YouTube」を選択します。

YouTubeを追加

表示したい動画のURLを入力します。

動画のURLを入力

その他、オプションを指定可能ですが、ここでは初期設定のまま進みます。画面を下にスクロールして「ショートコードを挿入」ボタンをクリックすると設定完了です。

「ショートコードを挿入」ボタンをクリック

YouTubeのショートコードが追加されます。

YouTubeのショートコードが追加される

必要に応じて、保存してサイトを確認してください。フッターにYouTube動画が追加されます。

YouTube動画が追加される

レイアウトの修正

3つのパーツは作成できましたが、予想通りレイアウトが崩れています。このようになった場合は、ショートコードの改行を削除して保存してみましょう。

ショートコードの改行を削除して保存

コードが見づらくなりましたがサイトを確認すると、3列にレイアウトされているはずです。

3列のフッターが完成

まとめ

これで賢威 7のフッターを3列にする作業は完了です。あとは、2列や4列にしたり、各列の内容を変更するなど試行錯誤してみてください。3列の内容は必ずしもショートコードにする必要はありません。自由に入力して大丈夫です。

賢威で子テーマを作るとデザインが崩れたり、おかしなことが起きるような気がして二の足を踏んでいた方。賢威 7のサポートページに子テーマのサンプルがアップされたので、子テーマの作成が簡単になりました。

ただし、インストールするだけでなく一部を修正する必要があるので、以下、賢威 7で子テーマを作る手順を説明します。

賢威 7の子テーマの作り方

賢威 7のインストール

すでにインストール済みとは思いますが、事前準備として賢威 7をインストールします。

ダウンロードページは次のとおりです。

賢威7 テンプレートダウンロード

ここではコーポレート版をダウンロードしました。「HTML版」ではなく「WordPress版」をダウンロードしましょう。

賢威 7コーポレート版（blue）をダウンロード

「外観」-「テーマ」の「新規追加」から「テーマのアップロード」を選択し、ファイルを選択して「今すぐインストール」をクリックします。

賢威 7のインストール

子テーマをインストールするので有効化してもしなくても構いません。

子テーマのインストール

続いて、以下のページから子テーマをダウンロードしましょう。

賢威7WordPress版子テーマのダウンロード | 賢威サポートページ

賢威 7の子テーマをダウンロード

ダウンロードできたら、親テーマと同じように「外観」-「テーマ」の「新規追加」から「テーマのアップロード」を選択し、ファイルを選択して「今すぐインストール」をクリックします。

賢威 7の子テーマをインストール

さあ有効化して、と思ったら「親テーマが見つかりませんでした。この子テーマを利用する前に、親テーマkeni70_wp をインストールしてください。」のようなメッセージが表示されますが、これから修正するので焦る必要はありません。

子テーマのインストールが完了

子テーマの修正

「外観」-「テーマの編集」メニューを開きます。

「外観」-「テーマの編集」を開く

画面右上の「編集するテーマを選択」から「賢威7.0 スタンダード版 カスタマイズ版（子テーマ）」を選んで「選択」ボタンをクリックします。

子テーマを選択

開いたstyle.cssに「このテーマは壊れています。」(1)と表示されますが問題ありません。設定されているテンプレート名「keni70_wp」(2)の部分を見つけてください。ここを修正します。

子テーマのstyle.cssを確認

修正するため、最初にダウンロードした親テーマのファイルを見てください。このファイル名から拡張子「.zip」を除いた部分（ここでは「keni70_wp_corp_blue_201709202205」）をコピーします。

親テーマのファイル名をコピー

コピーしたファイル名を、子テーマの「keni70_wp」と置き換えます。置き換えた結果は次のようになります。

テンプレート名を置き換える

画面を下にスクロールして「ファイルを更新」ボタンをクリックすると設定完了です。正しく設定できていれば、「このテーマは壊れています。」のメッセージが消えます。

「このテーマは壊れています。」が消える

子テーマの有効化

「外観」-「テーマ」を開いて、賢威 7の子テーマ（賢威7.0 スタンダード版 カスタマイズ版）を有効化しましょう。

賢威 7の子テーマを有効化

これで設定完了です。サイトを表示して画面デザインが崩れたりしていないかチェックしましょう。

賢威 7のサイトを確認

子テーマの動作確認

子テーマが動作しているかチェックしてみましょう。たとえば、「外観」-「テーマの編集」メニューからbase.cssを開いて次のようなCSSを入力します。

.site-title {
    font-size: 1em;
}

入力したイメージは次のようになります。

子テーマにサンプルCSSを入力

「ファイルを更新」ボタンをクリックしてサイトを確認しましょう。入力したCSSが反映され、サイト名が小さくなります。子テーマが機能しているということです。

子テーマに入力したCSSが反映される

これで子テーマの作成は終わりです。あとは自由に子テーマを使ってカスタマイズしてください。

画面右上の連絡先をカスタマイズできるテーマもいくつかありますが、ここでは、賢威 7の画面右上に連絡先画像を表示する方法を紹介します。仕上がりイメージは次のようになります。header.phpとCSSの編集が必要ですが、それほど難しくないので、賢威 7で連絡先を表示できないか模索している方はチャレンジしてみてください。

賢威 7の画面右上に連絡先画像を表示する

連絡先画像ブロックの作成

連絡先として表示するブロックのHTMLを準備します。用途は「お問い合わせはこちら」画像に限りませんが、次のような簡単なコードブロックで大丈夫です。

<div id="header-contact">
<img src="http://-----.jpg">
</div>

「http://-----.jpg」の部分は実際に使う画像に置き換えてください。

このHTMLを賢威 7のheader.phpにコピーペーストします。子テーマが理想ですが、親テーマでも構いません。コピーペーストする位置が重要で、場所的にはグローバルナビの上あたりに設置したいです。

グローバルナビの上あたりに差し込みたい

そこで、header.phpを開いて「▼グローバルナビ」という文字を探しましょう。検証しているテンプレートでは115行目あたりですが、バージョンによって違う可能性があるので注意してください。

「▼グローバルナビ」を目印に、その上にコピーペースト場所を定めます。ヘッダーブロックの「class="site-header-conts"」の中に入れたいので、「▼グローバルナビ」の上にあるdivタグの終了を探して、その上に差し込みます。

header.phpで連絡先画像ブロックを差し込む位置

検証した賢威 7では109行目と110行目の間に差し込めばうまくいきますが、具体的な行番号はバージョンによって異なる可能性があるのでご注意ください。

連絡先画像のHTMLブロックをコピーペーストしたイメージは次のようになります。

連絡先画像ブロックを差し込んだイメージ

連絡先画像が表示されます。

連絡先画像が表示される

連絡先画像ブロックのスタイル設定

あとはCSSを使ってレイアウトを整えれば大丈夫です。たとえば、次のようなCSSをbase.cssに入力します。

/* 連絡先を右寄せに */
#header-contact {
    float: right;
}

/* 連絡先画像の高さ制限 */
#header-contact img {
    max-height: 100px;
}

/* サイト名を上に寄せる */
.site-title {
    vertical-align: top;
}

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

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

ここまでのコードは、以下のテンプレートで検証しました。

• ビューティ版（AQUA）
• プリティ版（BLUE）
• コーポレート版（Blue）
• スタンダード版（Blue）

クール版ではサイト名を左寄せに

クール版ではサイト名がセンタリングされているため、右に連絡先画像を表示するにはサイト名を左寄せにする必要があります。たとえば、次のようなCSSをbase.cssに追加してください。

/* サイト名を左寄せに（クール版） */
.site-title {
    text-align: left;
    float: left;
}

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

クール版のカスタマイズ結果

スマホでClick to Callに

連絡先画像をClick to Call（スマホでタップして電話できる）にするには、連絡先画像ブロックを次のコードに入れ替えます。

<div id="header-contact">
<?php if(wp_is_mobile()) : ?>
    <a href="tel:0399999999"><img src="http://-----.jpg"></a>
<?php else : ?>
    <img src="http://-----.jpg">
<?php endif; ?>
</div>

電話番号（0399999999）は修正してください。

これで、PC以外のスマホやタブレットでは電話番号をタップすると電話できるようになります。

賢威 7の投稿一覧は上から下への表示ですが、これをグリッド形式の2列表示に変更する方法を紹介します。仕上がりイメージは次のようになります。

賢威 7の投稿一覧をグリッド表示に

検証に使ったのは賢威7.1コーポレート版（青バージョン7.1.0.9です。

現状の投稿一覧で1件の表示ブロックはこんな感じです。

現状の投稿一覧のブロック

ここから抜粋や「続きを読む」リンクを削除して、横2列に並べてみようかという作戦です。以下、手順を紹介します。子テーマでの作業が理想です。

抜粋および「続きを読む」リンクの削除

投稿一覧から抜粋および「続きを読む」リンクを削除するため、賢威 7のフォルダにあるcont.phpを子テーマフォルダにコピーして（または親テーマを直接）開きます。

cont.phpは賢威 7で投稿一覧を担当するファイルです。これを修正することで、投稿一覧のレイアウトを変更することができます。

ここでは32行目あたりにある次の段落2つを削除します。

<p><?php echo strip_tags(get_the_excerpt()); ?></p>
<p class="link-next">…略…<?php _e('see more', 'keni'); ?></a></p>

削除した結果は次のようになります。なんとなくすき間が空いて横2列に並びそうな雰囲気になりました。

抜粋および「続きを読む」リンクの削除後

投稿ブロックを横並びに

あとは、1件の投稿ブロックを横に並べれば完成です。それには次のようなCSSをbase.css（親テーマ・子テーマどちらでも）に入力します。

/* 投稿グリッド表示 */
@media (min-width: 500px) {
    .blog .main-conts .section-wrap,
    .archive .main-conts .section-wrap {
        margin-bottom: 10px;
        padding: 10px;
        width: 49%;
        float: left;
        margin-right: 1%;
    }

    .blog .section-wrap:nth-of-type(2n+1),
    .archive .section-wrap:nth-of-type(2n+1) {
        clear: both;
    }

    .blog .section-wrap .section-title,
    .archive .section-wrap .section-title {
        line-height: 150%;
        margin: 0 0 0.5em;
        font-size: 1.2em !important;
    }

    .float-area {
        clear: both;
    }
}

細かい説明は省略しますが、ザックリ言うと投稿ページやアーカイブで一覧表示される投稿ブロックの幅を狭くして横2列にして、ついでにフォントサイズや余白を調整しています。

スマホなど幅が狭い端末では2列表示は厳しいので、500px以上の幅に限定しています。

これにより、投稿ブロックが横並びになります。

投稿一覧がグリッド表示になる

アイキャッチ画像のサイズ変更

必須ではありませんが、グリッド表示されているアイキャッチ画像はサムネイルなので、もう少し大きい画像を使いたければcont.phpの31行目の最後あたりにあるget_the_post_thumbnailでサイズを指定する方法があります。

たとえば、中サイズの画像を表示する場合は次のように変更します。

get_the_post_thumbnail($post->ID, 'medium')

または具体的なサイズを指定したい場合は、次のように記述します。

get_the_post_thumbnail($post->ID, array(360, 240))

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

アイキャッチ画像のサイズを変更

まとめ

このように賢威 7のcont.phpやCSSをカスタマイズすることで、投稿一覧をグリッド表示することもできます。あとは自由に修正してください。不具合や違和感があればコッソリ教えてください。

賢威 7ではフッターを自由に編集できるようになっていますが、3列とか4列に分かれていれば、いろいろなパーツを差し込めて便利だという声を聞きます。そこで、フッターを3列にする方法を紹介します。こんなイメージです。

3列にはGoogleマップ、最近の投稿、YouTube動画を入れていますが、あくまでサンプルなので使い方は自由、あなたのアイデア次第です。以下、手順を紹介します。

賢威 7のフッターとは

自由に入力できるのは便利、でも…

賢威 7では、フッターエリアを自由に編集できるようになっています。具体的には「賢威の設定」‐「フッター」メニューを開いて「自由記述欄」に文字通り好きな内容を入力できます。

とはいえ、この広いエリアに1つだけパーツを入れるのはもったいないかもしれません。たとえば、Googleマップを表示するとしても次のようなレイアウトでは少し違和感があるでしょう。

2列や3列にした方が使いやすいかもしれません。こんな感じです。

フッターを2列や3列にするための戦略

自由記述欄を2列や3列にするといっても、その方法が問題です。divタグやtableタグを駆使して横並びのレイアウトを作成したとしても問題はレスポンシブ対応です。相当な時間がかかって止めたくなるかもしれません。

そんなときに役立つのがShortcodes Ultimateプラグインです。さまざまなパーツをショートコードで追加できる非常に便利なプラグインです。今回の要件の2列や3列のエリア（マルチカラム）やGoogleマップ、YouTube動画などもショートコードで差し込むことができます。

Shortcodes Ultimateプラグインについて詳しくは以下のページも参考にしてください。

これは便利！「地図・動画・枠線もショートコードで」のShortcodes Ultimateプラグイン

以下、Shortcodes Ultimateプラグインを使って賢威 7のフッターを3列にして好きなパーツを3つ入れるまでの手順を紹介します。

Shortcodes Ultimateのインストール

フッターを3列にするためShortcodes Ultimateプラグインをインストールします。

フッターを3列にする

賢威 7のフッターを3列にするため、「賢威の設定」‐「フッター」メニューを開いて「ショートコードを挿入」ボタンをクリックします。

Shortcodes Ultimateプラグインで使用可能な膨大なパーツアイコンのうち、右から2列目にある「行」をクリックします。マルチカラムを作成できるパーツ（ショートコード）です。

追加するショートコード（コンテンツ）(1)を確認して、「ショートコードを挿入」ボタン(2)をクリックします。

次のようにマルチカラムのショートコードが追加されます。

ひとまず保存して、サイトを確認してみましょう。

なんとなくフッターが3列になりそうなイメージは持っていただけると思います。あとは、「コンテンツ」の文字を好きな内容に置き換えれば完成です。

フッターの編集

上記の3列のショートコードは改行されていないので見づらいかもしれません。編集しやすいように次のように整形しても大丈夫です。

ただし、この状態で保存すると意図しない場所に改行が入るなどしてレイアウトが崩れる場合があります。レイアウトがうまくいかない場合は保存する前に次のように改行を削除してみてください。

3列フッターの活用例

あとは自由に3列にパーツを追加していけば大丈夫です。ここでは次のようなコンテンツを入れてみます。すべてShortcodes Ultimateプラグインのショートコードだけで完成します。

• Googleマップ
• 最近の投稿（新着情報）
• YouTube動画

3つのパーツはショートコードのsu_columnの開始と終了の間に入力します。次の赤い部分です。

カーソルを上記の位置に移動してから、以下のパーツを追加してください。

Googleマップを追加

フッターの編集画面で「ショートコードを挿入」ボタンをクリックして「Googleマップ」を選択します。

「マーカー」(1)に住所を入力して「ショートコードを挿入」ボタン(2)をクリックします。

Googleマップのショートコードが追加されます。

必要に応じて、保存してサイトを確認してください。フッターにGoogleマップが表示されます。

最近の投稿（新着情報）を追加

フッターの編集画面で「ショートコードを挿入」ボタンをクリックして「投稿」を選択します。

「テンプレート」から「記事のタイトルとリスト」（templates/list-loop.php）をクリックします。これにより、記事のタイトルが一覧表示されます。

「ページあたりの投稿数」（表示件数）を「5」くらいに設定しておきます。

その他、さまざまな設定が可能ですが、ひとまず初期設定のまま進めます。画面を下にスクロールして「ショートコードを挿入」ボタンをクリックすると設定完了です。

投稿一覧のショートコードが追加されます。

必要に応じて、保存してサイトを確認してください。フッターに最近の投稿表示されます。

YouTubeの追加

フッターの編集画面で「ショートコードを挿入」ボタンをクリックして「YouTube」を選択します。

表示したい動画のURLを入力します。

その他、オプションを指定可能ですが、ここでは初期設定のまま進みます。画面を下にスクロールして「ショートコードを挿入」ボタンをクリックすると設定完了です。

YouTubeのショートコードが追加されます。

必要に応じて、保存してサイトを確認してください。フッターにYouTube動画が追加されます。

レイアウトの修正

3つのパーツは作成できましたが、予想通りレイアウトが崩れています。このようになった場合は、ショートコードの改行を削除して保存してみましょう。

コードが見づらくなりましたがサイトを確認すると、3列にレイアウトされているはずです。

まとめ

これで賢威 7のフッターを3列にする作業は完了です。あとは、2列や4列にしたり、各列の内容を変更するなど試行錯誤してみてください。3列の内容は必ずしもショートコードにする必要はありません。自由に入力して大丈夫です。

投稿 賢威 7のフッターを3列にする方法 は 西沢直木のIT講座 に最初に表示されました。

賢威で子テーマを作るとデザインが崩れたり、おかしなことが起きるような気がして二の足を踏んでいた方。賢威 7のサポートページに子テーマのサンプルがアップされたので、子テーマの作成が簡単になりました。

ただし、インストールするだけでなく一部を修正する必要があるので、以下、賢威 7で子テーマを作る手順を説明します。

賢威 7の子テーマの作り方

賢威 7のインストール

すでにインストール済みとは思いますが、事前準備として賢威 7をインストールします。

ダウンロードページは次のとおりです。

賢威7 テンプレートダウンロード

ここではコーポレート版をダウンロードしました。「HTML版」ではなく「WordPress版」をダウンロードしましょう。

「外観」-「テーマ」の「新規追加」から「テーマのアップロード」を選択し、ファイルを選択して「今すぐインストール」をクリックします。

子テーマをインストールするので有効化してもしなくても構いません。

子テーマのインストール

続いて、以下のページから子テーマをダウンロードしましょう。

賢威7WordPress版子テーマのダウンロード | 賢威サポートページ

ダウンロードできたら、親テーマと同じように「外観」-「テーマ」の「新規追加」から「テーマのアップロード」を選択し、ファイルを選択して「今すぐインストール」をクリックします。

さあ有効化して、と思ったら「親テーマが見つかりませんでした。この子テーマを利用する前に、親テーマkeni70_wp をインストールしてください。」のようなメッセージが表示されますが、これから修正するので焦る必要はありません。

子テーマの修正

「外観」-「テーマの編集」メニューを開きます。

画面右上の「編集するテーマを選択」から「賢威7.0 スタンダード版 カスタマイズ版（子テーマ）」を選んで「選択」ボタンをクリックします。

開いたstyle.cssに「このテーマは壊れています。」(1)と表示されますが問題ありません。設定されているテンプレート名「keni70_wp」(2)の部分を見つけてください。ここを修正します。

修正するため、最初にダウンロードした親テーマのファイルを見てください。このファイル名から拡張子「.zip」を除いた部分（ここでは「keni70_wp_corp_blue_201709202205」）をコピーします。

コピーしたファイル名を、子テーマの「keni70_wp」と置き換えます。置き換えた結果は次のようになります。

画面を下にスクロールして「ファイルを更新」ボタンをクリックすると設定完了です。正しく設定できていれば、「このテーマは壊れています。」のメッセージが消えます。

子テーマの有効化

「外観」-「テーマ」を開いて、賢威 7の子テーマ（賢威7.0 スタンダード版 カスタマイズ版）を有効化しましょう。

これで設定完了です。サイトを表示して画面デザインが崩れたりしていないかチェックしましょう。

子テーマの動作確認

子テーマが動作しているかチェックしてみましょう。たとえば、「外観」-「テーマの編集」メニューからbase.cssを開いて次のようなCSSを入力します。

.site-title {
    font-size: 1em;
}

入力したイメージは次のようになります。

「ファイルを更新」ボタンをクリックしてサイトを確認しましょう。入力したCSSが反映され、サイト名が小さくなります。子テーマが機能しているということです。

これで子テーマの作成は終わりです。あとは自由に子テーマを使ってカスタマイズしてください。

投稿 賢威 7の子テーマ作成が簡単になりました は 西沢直木のIT講座 に最初に表示されました。

画面右上の連絡先をカスタマイズできるテーマもいくつかありますが、ここでは、賢威 7の画面右上に連絡先画像を表示する方法を紹介します。仕上がりイメージは次のようになります。header.phpとCSSの編集が必要ですが、それほど難しくないので、賢威 7で連絡先を表示できないか模索している方はチャレンジしてみてください。

連絡先画像ブロックの作成

連絡先として表示するブロックのHTMLを準備します。用途は「お問い合わせはこちら」画像に限りませんが、次のような簡単なコードブロックで大丈夫です。

<div id="header-contact">
<img src="http://-----.jpg">
</div>

「http://-----.jpg」の部分は実際に使う画像に置き換えてください。

このHTMLを賢威 7のheader.phpにコピーペーストします。子テーマが理想ですが、親テーマでも構いません。コピーペーストする位置が重要で、場所的にはグローバルナビの上あたりに設置したいです。

そこで、header.phpを開いて「▼グローバルナビ」という文字を探しましょう。検証しているテンプレートでは115行目あたりですが、バージョンによって違う可能性があるので注意してください。

「▼グローバルナビ」を目印に、その上にコピーペースト場所を定めます。ヘッダーブロックの「class="site-header-conts"」の中に入れたいので、「▼グローバルナビ」の上にあるdivタグの終了を探して、その上に差し込みます。

検証した賢威 7では109行目と110行目の間に差し込めばうまくいきますが、具体的な行番号はバージョンによって異なる可能性があるのでご注意ください。

連絡先画像のHTMLブロックをコピーペーストしたイメージは次のようになります。

連絡先画像が表示されます。

連絡先画像ブロックのスタイル設定

あとはCSSを使ってレイアウトを整えれば大丈夫です。たとえば、次のようなCSSをbase.cssに入力します。

/* 連絡先を右寄せに */
#header-contact {
    float: right;
}

/* 連絡先画像の高さ制限 */
#header-contact img {
    max-height: 100px;
}

/* サイト名を上に寄せる */
.site-title {
    vertical-align: top;
}

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

ここまでのコードは、以下のテンプレートで検証しました。

• ビューティ版（AQUA）
• プリティ版（BLUE）
• コーポレート版（Blue）
• スタンダード版（Blue）

クール版ではサイト名を左寄せに

クール版ではサイト名がセンタリングされているため、右に連絡先画像を表示するにはサイト名を左寄せにする必要があります。たとえば、次のようなCSSをbase.cssに追加してください。

/* サイト名を左寄せに（クール版） */
.site-title {
    text-align: left;
    float: left;
}

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

スマホでClick to Callに

連絡先画像をClick to Call（スマホでタップして電話できる）にするには、連絡先画像ブロックを次のコードに入れ替えます。

<div id="header-contact">
<?php if(wp_is_mobile()) : ?>
    <a href="tel:0399999999"><img src="http://-----.jpg"></a>
<?php else : ?>
    <img src="http://-----.jpg">
<?php endif; ?>
</div>

電話番号（0399999999）は修正してください。

これで、PC以外のスマホやタブレットでは電話番号をタップすると電話できるようになります。

投稿 賢威 7の画面右上に連絡先画像を表示する は 西沢直木のIT講座 に最初に表示されました。

賢威 7の投稿一覧は上から下への表示ですが、これをグリッド形式の2列表示に変更する方法を紹介します。仕上がりイメージは次のようになります。

検証に使ったのは賢威7.1コーポレート版（青バージョン7.1.0.9です。

現状の投稿一覧で1件の表示ブロックはこんな感じです。

ここから抜粋や「続きを読む」リンクを削除して、横2列に並べてみようかという作戦です。以下、手順を紹介します。子テーマでの作業が理想です。

抜粋および「続きを読む」リンクの削除

投稿一覧から抜粋および「続きを読む」リンクを削除するため、賢威 7のフォルダにあるcont.phpを子テーマフォルダにコピーして（または親テーマを直接）開きます。

cont.phpは賢威 7で投稿一覧を担当するファイルです。これを修正することで、投稿一覧のレイアウトを変更することができます。

ここでは32行目あたりにある次の段落2つを削除します。

<p><?php echo strip_tags(get_the_excerpt()); ?></p>
<p class="link-next">…略…<?php _e('see more', 'keni'); ?></a></p>

削除した結果は次のようになります。なんとなくすき間が空いて横2列に並びそうな雰囲気になりました。

投稿ブロックを横並びに

あとは、1件の投稿ブロックを横に並べれば完成です。それには次のようなCSSをbase.css（親テーマ・子テーマどちらでも）に入力します。

/* 投稿グリッド表示 */
@media (min-width: 500px) {
    .blog .main-conts .section-wrap,
    .archive .main-conts .section-wrap {
        margin-bottom: 10px;
        padding: 10px;
        width: 49%;
        float: left;
        margin-right: 1%;
    }

    .blog .section-wrap:nth-of-type(2n+1),
    .archive .section-wrap:nth-of-type(2n+1) {
        clear: both;
    }

    .blog .section-wrap .section-title,
    .archive .section-wrap .section-title {
        line-height: 150%;
        margin: 0 0 0.5em;
        font-size: 1.2em !important;
    }

    .float-area {
        clear: both;
    }
}

細かい説明は省略しますが、ザックリ言うと投稿ページやアーカイブで一覧表示される投稿ブロックの幅を狭くして横2列にして、ついでにフォントサイズや余白を調整しています。

スマホなど幅が狭い端末では2列表示は厳しいので、500px以上の幅に限定しています。

これにより、投稿ブロックが横並びになります。

アイキャッチ画像のサイズ変更

必須ではありませんが、グリッド表示されているアイキャッチ画像はサムネイルなので、もう少し大きい画像を使いたければcont.phpの31行目の最後あたりにあるget_the_post_thumbnailでサイズを指定する方法があります。

たとえば、中サイズの画像を表示する場合は次のように変更します。

get_the_post_thumbnail($post->ID, 'medium')

または具体的なサイズを指定したい場合は、次のように記述します。

get_the_post_thumbnail($post->ID, array(360, 240))

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

まとめ

このように賢威 7のcont.phpやCSSをカスタマイズすることで、投稿一覧をグリッド表示することもできます。あとは自由に修正してください。不具合や違和感があればコッソリ教えてください。

投稿 賢威 7の投稿一覧をグリッド形式で表示する は 西沢直木のIT講座 に最初に表示されました。