何を使えばよいか分かった！コーポレートサイトの各ページを制作する前にみておきたいこと

corporatesite_design

企業サイトはサービスや商品の他、ビジョンやIR情報などで構成されています。今回はWordPressで構築した固定ページを見やすくするために、どういったjQuery・WPプラグインを使えばよいのか、またレスポンシブに対応させるための小技もメモしておきます。

IT/WEB業界への転職なら

もくじ

Corporate_sitemap_corporate

gallery_corporate

以前、クライアントさんにギャラリーページを「ランダムにしてほしい」と言われたことがあって、なんの事かと小一時間悩んでいたらメイソンリーだったということがありました。ギャラリーページをメイソンリーで構築する場合のメモ。

※Chromeは読み込みが早く、画像表示が上手くいかない場合があるのでページが読み込まれたあとに実行させます。ウィンドウを変化させた時に滑らかに動くように「isAnimated: true」を追加。スクリプトは以下のように記述します。

$(window).load(function(){
    $('#container').masonry({
      itemSelector: '.item',
      gutterWidth: 10,
      isAnimated: true, 
      isFitWidth: true
    });
  });

メイソンリーで作成した写真の上に見栄えがよくなるようにposition: relative;で透過背景色を載せます。

.item {
  color: #fff;
  background: rgba(0,0,0,.7);
  position: relative;
  bottom: 35px;
  line-height: 2;
}

画像をポップアップさせるLightbox系プラグインは、レスポンシブ対応のColorboxがおすすめ。画像がないときのメッセージ出力も簡単。

$(function(){
  $("a#sample").colorbox({
  rel:'sample',
  maxWidth: "80%",
  height: "auto",
  imgError: "画像準備中です"
  });
  $("a#sample").addClass("cboxElement");
});

※画像をポップアップさせるcolorbox等を全体に使うと、予期せぬ箇所までポップアップされてしまうこともあるので、ギャラリーやポスト内など限定的に使うように注意します。

２．サービス／会社概要ページ

service_corporate

コーポレートやECサイトを作っていると、料金表やサービス比較表、会社概要などは必ずといっていいほど設置するわけですが、表をモバイル対応にしても縦長になっては意味がないので、レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spiceでご紹介されているoverflow-xを使う方法を参考にテーブルのみ横スクロールさせるように配慮します。PC時の見え方はわかりやすいようにnth-child(even)でシマシマに、マウスオーバー時にゆっくり色が変化するようにtransitionを付けます。

html

<table class="contents">
<tbody>
  <tr>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
  </tr>
  <tr>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
  </tr>
  <tr>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
  </tr>
  <tr>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
  </tr>
</tbody>
</table>

css

table.contents {
  border: 1px solid #ddd;
  color: #555;
  margin: 10px 0;
  width: 100%;
}

table.contents tr:nth-child(even) {
  background-color: #f5f5f5;
}

table.contents tr {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

table.contents tr:hover {
  background: #ECF0F1;
}

table.contents td {
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  font-size: 12px;
  font-weight: normal;
  padding: 12px;
}

@media screen and (max-width: 768px) {
  table.contents {
    display: block;
  }
  
  table.contents tbody {
    display: block;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    width: auto;
  }
  
  table.contents tbody td {
    vertical-align: top;
  }
}

３．各ページの背景画像をクライアントさん側で変更可能に

画面横幅100%で背景画像を設置した固定ページに対して、クライアントさんが管理画面内でcssに記述された背景を簡単に変更させる方法。

結論から言うとアイキャッチを利用させるわけですが、CSSに記述した背景画像をクライアント側で変更させたい時は、固定ページに使っている「テンプレート」に直接css＋WPタグを埋め込むという方法もあります。以下のように固定ページに適用しているテンプレートに記述しておけば、クライアントさんが管理画面でアイキャッチを変更するたびに背景画像が変更されます。調整はbackground-size: cover ;で画像を拡大縮小させます。

.sample {
  background: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>) 0 0 no-repeat;
}

４．問い合わせページ

us-page_corporate

コンタクトや問い合わせページは「Contact Form 7」を表組みにして、レスポンシブ対応させます。プルダウン、ラジオボタンの他、最近のバージョンではタグの生成＞日付でコードを埋め込むと、デイトピッカーまで使えます。

注釈の(必須)はモバイルでも見やすいように、spanで囲み、display: block;で改行させます。

５．問い合わせ管理 or CRM

contact-crm_corporate

問い合わせがメールに届かないことがあったら不安。そんな場合を想定して管理画面から内容を確認できる「Flamingo」を導入するのが早くて便利。

Flamingoの受信メッセージでは、送信者によるフォーム送信内容が記録されています。

６．商品を管理画面から操作

operation_corporate

任意の固定ページにある商品表示を管理画面からON／OFFさせるためにカスタムフィールドを使うこともあるかと思いますが、量が膨大だったり、固定ページ編集画面からラジオボタンやチェックボックスで扱うようにさせるには、プラグインの「Advanced Custom Fields」を使うのが早いです。

インポートやエキスポートもあるので便利。ただし、フィールドグループ内のフィールド数（57個位？）に制限があるので注意します。入力した値の出力方法はこちら。

７．アクセスページ

access-page_corporate

グーグルマップをそのまま埋め込むと、スクロール時に地図の拡大縮小が起こるので、Google Maps JavaScript API v3を埋め込むか、WPであればシンプルなWPプラグイン「Google Maps v3 Shortcode」がおすすめ。オプションでスクロール制御、横幅全体に表示すると見栄えがよくなります。

８．お知らせページ

announcement_corporate

例えば既存サイトのニュースが数行で終わるようなテキストや画像を使っていない…といった場合、ブログレイアウトのように画像とテキストを同時に出力する必要はないので、カスタムポストで作成した企業ニュース一覧は、ブログと同じテンプレートは使わずに、ざっと流し読みできるように日付と抜粋のみを表示したレイアウトにします。以下、カスタム投稿タイプの作成方法。

９．SNS/TEL/GAアカウント変更管理

account-change_corporate

ナビメニューなどにつけたSNSや電話番号は、内容が変更される可能性があるのでソースコードに直接書かずに管理画面から変更できるようにします。add optionで値を登録させ、get optionで出力。出力先は以下のように記述します。

<a href="<?php echo get_option('twitter_account'); ?>" target="_blank">Twitter</a>

１０．Q&Aページ

faq-page_corporate

ページ上部に質問一覧を表示したらアンカーリンク（ページ内にリンク）させて、回答は以下のようにtext-indentを使ってインデントを揃えます。

１１．ブログページ

blog-page_corporate

何百もある記事を移行したものの、画像URLパスがそのままだった…という時便利なプラグインSearch Regex。テキストだけでなくURLの一括置換が行えます。

スポンサード リンク

このエントリーをはてなブックマークに追加
はてなブックマーク - 何を使えばよいか分かった！コーポレートサイトの各ページを制作する前にみておきたいこと

関連する記事

ai_jQueryこの上なく便利！すごい「jQuery」の小技まとめ３２ ai_jQuery_technique知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ ai_jquery_plugin_galleryWeb制作で使えた！jQueryプラグインまとめ＋起業しました ai_jQuery_plugin_trends綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ