西沢直木のIT講座

WordPressの使い方を紹介していきます。基本操作から役立つプラグイン、定番のトラブル対応まで、WordPressの運用・管理中に起きる事例を取り上げます。

ラジオボタンやチェックボックスを画像クリック型にする方法

2017年5月20日 CSSの書き方

ラジオボタンやチェックボックスを画像に置き換える方法を紹介します。見やすいフォームを作成できれば、問い合わせや成約の増加につながるかもしれませんね。Contact Form 7プラグインで作成した問い合わせフォームとJazzy Formsプラグインで作成した見積もりフォームを例に説明します。

この記事を読む

BizVektorのグローバルメニューの背景色を変更する方法

2017年5月17日 BizVektorのカスタマイズ

BizVektorでは「外観」-「カスタマイズ」メニューからグローバルメニューなどに使う色を変更できますが「キーカラー」を変更するとサイト全体の色が変わってしまいます。そこで、グローバルメニューの色だけを変更するCSSの例を紹介します。自由に変更してお使いください。

この記事を読む

Shortcodes Ultimateのノートの枠線幅を文章に合わせる

2017年5月9日 WordPressプラグイン

Shortcodes Ultimateの「ノート」は文章を枠線で囲むことができますが、枠線ブロックの幅は画面いっぱいになってしまいます。CSSを使って枠線の幅を文章に合わせる方法を紹介します。

この記事を読む

BizVektorで画面全体の幅を100%に広げる方法

2017年4月18日 BizVektorのカスタマイズ

BizVektorで画面全体の幅を100%に広げる方法を紹介します。加工前のBizVektorはヘッダー画像を含めて画面全体の幅は950pxになっています。CSSをカスタマイズすることで幅を広げることができます。合わせてヘッダー画像のサイズも広げておいた方が良いでしょう。

この記事を読む

Lightningでヘッダーロゴの右に電話番号を表示する方法

2017年4月17日 Lightningのカスタマイズ

LightningにはBizVektorでおなじみの「画面右上の電話番号」がありません（バージョン: 3.0.2時点）が、電話番号を表示したいという要望があるのでコードを紹介します。グローバルメニューをロゴの下に表示させて、ロゴの右側に連絡先や「お問い合わせはこちら」などの好きな画像を表示する仕組みです。また、画像ではなくテキストベースの連絡先を表示する方法も紹介します。

この記事を読む

Lightningのフッターのカスタマイズ（ウィジェットの列数変更など）

2017年4月15日 Lightningのカスタマイズ

Lightningのフッターをカスタマイズする例を紹介します。たとえば、フッターの上下に好きな画像を画面幅いっぱいに表示する方法や、フッターウィジェットの数（初期設定では3つ）を変更する方法などです。

この記事を読む

Lightningのページタイトルのカスタマイズ（アイキャッチ画像表示など）

2017年4月14日 Lightningのカスタマイズ

Lightningのページタイトルのカスタマイズ事例を紹介します。タイトルの前にアイコンを付加したり、タイトルの上にアイキャッチ画像を表示したり、タイトルの背景色などを変更してみます。参考にしてください。

この記事を読む

Lightningのヘッダーのカスタマイズ

2017年4月13日 Lightningのカスタマイズ

Lightningのヘッダーをカスタマイズするパターンをいくつか紹介します。横並びのサイト名とグローバルメニューを上下に表示したり、グローバルメニューのフォントサイズ、ヘッダーの背景画像、ロゴ下の電話番号などを設定してみます。検証したバージョンはLightning 3.0.2です。この記事の内容1 ...

この記事を読む

Lightningの子テーマの作り方

2017年4月12日 Lightningのカスタマイズ

Lightningの子テーマを作る方法を紹介します。CSSだけをカスタマイズする予定なら「CSSカスタマイズ」メニューも使えるので必須ではありませんが、PHPも含めて本格的にカスタマイズする場合は子テーマを使った方が無難です。ここでは、テーマとしてLightningが有効化されている前提で話を進めま ...

この記事を読む