DPVO-Osaka心斎橋Webサイト納品完了

2019-07-12
officehojoのお仕事

前回の記事に引き続き、Webサイトの納品も完了しました。

DPVO-Osaka心斎橋Webサイト(内容は変更の可能性あり)
(関連記事:DPVO-Osaka心斎橋フライヤー納品完了

ご自分で更新していただけるよう、Wordpressでの納品です。今回使ったテーマは高機能と名高い「Cocoon(コクーン)」。

搭載したプラグインはこちらの3つ。

  • Contact Form 7(お問い合わせフォーム)
  • Easy Pricing Tables by Fatcat Apps(料金表テーブル)
  • WP Maintenance Mode(公開前のメンテナンス画面設置)

Cocoonについて

最強の無料テーマと言われている「Cocoon」。今回、このテーマを選んだ理由は、後々いろんな機能が必要になった時に便利だからです。SEO関連も、専用プラグインが必要ないほど備わっていますので、htmlとかphpといった知識がない方でも問題なく設定できるかと思います。

フォントの種類や色なども変更可能ですし、ナビゲーションメニューの種類や設置場所もボタン一つで変更可能。各種カスタマイズが色々とできてしまうのです。

また、公式サイトでは専用フォーラムもあり、困ったことがあれば検索して調べれるし、開発者に質問もできます。使用者も多いので、たくさんの人が解決してくれていますし、今後もどんどん機能性がアップする可能性もあり。

Cocoonの固定ページのアイキャッチは非表示にできる

外観カスタマイズの追加CSS部分で、固定ページのアイキャッチ画像やタイトル諸々を非表示にできます。もし必要な場合は、下記の部分を追加してみてください。固定ページのIDを変更すれば、ページごとに設定が可能です。

固定ページのメタ情報、アイキャッチ、タイトルの消去

.page-id-(固定ページのID) .date-tags,
.page-id-(固定ページのID) .author-info,
.page-id-(固定ページのID) .entry-title,
.page-id-(固定ページのID) .eye-catch
 {display: none;}

いっそすべてのアイキャッチを消してしまいたい場合は、下記のCSSで対応が可能です。(スキン「ブルーカレー」の場合はデフォルトでタイトル後ろに画像が挟み込まれます)

.eye-catch{
 padding-bottom:12em;
 }
 .eye-catch img{
 display:none;
 }

画像を消すとメインカラムが上に浮き上がってきますので、それをpadding-bottomで押さえつけています。これで後ろの画像に左右されることなくタイトルとメタ情報が見やすくなりました。

プラグインのご紹介

完成までWebサイトを非公開にしておくためには、ローカルサーバーを使った作業が一般的かもしれませんが、そんなことをせずともプラグインで解決できました。

WP Maintenance Mode(公開前のメンテナンス画面設置)

ボタン一つでサイトを非公開にできます。管理者以外はサイトにアクセスしても、自作の「メンテナンス画面」が表示されるというプラグイン。

非公開にしたい場合は「一般」タブの「有効化」にチェックを入れておき、公開したいときは「無効化」にチェックを入れればOKです。

表示される画面は「デザイン」タブで設定ができます。背景画像、テキストを記入できます。

となりの「モジュール」タブでは、SNSの表示もできますので、公開までにSNSで宣伝をしたい場合はこちらで設定しておきます。

公開までのカウントダウンもできますよ。

Easy Pricing Tables by Fatcat Apps(料金表テーブル)

レスポンシブ対応の料金表を簡単に設置できるプラグインです。感覚的に使えるので簡単。表示内容は「プラン名」「価格」「内容」「リンクボタン」です。

「⭐︎Feature」ボタンをクリックすれば、おすすめの表示ができるのも使い勝手がよい。ボタンの色は「Design」タブのページで選べます。

本当は「Pricing Table by Supsystic」というデザインが素敵なプラグインを使いたかったのですが、プログラム障害なのか、表示されないトラブルがあったので断念。テーマとの相性があるみたいです。

Contact Form 7(お問い合わせフォーム)

WordPressユーザーはほとんどの人が使っているであろう定番プラグイン。ちょっと知識がいるのが難点ですが、こちらもユーザーが多い分、いろんなサイトでカスタマイズが転がっているので、自分でデザインや設定を変えたい場合はなんでもできるかと思います。自動返信メールがあるのもいいですね。

WordPressのテーマ関連記事

ブログのWordPressテーマを「yStandard」に変更しました
WordPressのテーマをGodiosに変更した
WordPressのテーマ“Hestia”を使ったカスタマイズ方法
WordPressテーマ“Alternative”を使ってデモサイトを作ってみた
WordPressで画像だけのギャラリーサイトを作った【フランス編】(Luxeritas)
デザイン画像集にポートランド編を追加(Minimal Portfolio)
NY画像集(MoMAデザイン編)を追加(Kalki)