calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

メモしておきたい！サイト制作時に知っておくと「意外」と役に立つこと

  • 作成：2014/08/4
  • 更新：2014/11/01
  • Web制作 >
Web_Design_Techniques

今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

ドメイン＋サーバ

CSS

IE対策

WordPress 効率化

ドメイン＋サーバ

１．独自ドメインでHPとgmail を運用させるまで

gmail_domain2_webproduct

制作依頼の中にドメイン割り当てや、メール受信設定等が含まれることがあると思います。ここでは独自ドメインでHPとgmail を運用させるまでの流れをリスト化しておきます。あくまでも簡易的なものなので参考程度に。サーバをVPSにした場合も同じ手順です。

サーバのレコードを設定し、ネームサーバを変更することでGoogleApps、サーバでのドメイン運用が可能となります。ネームサーバーの設定後は数時間～３日は不安定なので、表示されないときがあるので少し待ちます。以下、Aレコードの内容はIPアドレスを入力します。

  • ドメイン管理会社にてドメイン取得
  • ドメイン管理会社にて、ドメインが法人「co.jp」であれば会社登記情報を登録
  • サーバを準備する
  • gmail アカウント作成（google apps 登録用）
  • ドメイン管理会社にて、Aレコード（IPアドレス）確認
  • ドメイン管理画面にて、MX レコードを設定（google apps とドメインのAレコードも追加する）
  • google apps ダッシュボードで設定反映
  • Gmailへテストメールを送り、受信できてるか確認
  • WP を使って構築している場合、Contact Form 7 でGmail に送れない場合があるので、プラグイン「WordPress › WP Mail SMTP」を有効化する

２．コマンド

command_webproduct

さくらVPSにてWordPressを動かには、ターミナルからssh接続してコマンドを打ち込みます。コマンドはサイト制作業をするなら確実に覚えておいたほうが良いと思います。筆者も苦手な分野だったのですが過去に何度もやらされたこと、覚えないといけなかったことをメモしておきます。

  • [su] アカウントを切り替える
  • [pwd] 現在位置
  • [cd ..] 上に上がる
  • [ls] ファイル・ディレクトリ情報を表示
  • [ls -al] .htaccess を確認したいとき
  • [ll] ファイル詳細情報閲覧
  • [chown] 所有者変更
  • [chmod] 権限変更
  • [cp -rp] ファイルをコピー
  • [mkdir] ディレクトリを作成

３．IP制限

ip_restrictions_webproduct

本番環境とは別にテスト環境を用意します。クライアントさんに確認してもらうときにも必要。テスト環境に不特定多数の人がアクセスしなければならない場合、IPアドレスやベーシック認証でアクセス制限をかけて安全性を高めます。

CSS

レイアウトを組んだあと、後々「あれっズレてる」とならないように注意しておきたいこと。

４．画像の回り込み

wrap-around_webproduct

頻繁に利用するので。これまで多く使われていた回り込み解除する方法から今後増えていく方法まとめ。浮いた親要素の高さを算出します。回り込み解除は親要素にoverflow: hidden;でOK。IE対策でzoom属性zoom:1;も同時に設定します。他はclearfix や clear:both;など。

５．marginの相殺

レイアウトを組んでいるときに、ボックス同士の間隔等をうまく指定出来ない場合は、ボックスモデルやマージンの相殺などを正しく理解できていない可能性があります。こちらはmarginの理解を深めるために詳しく書いてある記事。

６．ショートハンド

shorthand_webproduct

凝ったデザインにするとCSSが肥大化してしまうので、一括指定でコンパクトにすることが多いと思います。記述ルールや省略できないプロパティに注意。

７．ビューポート設定

スマートフォンOSブラウザーが採用している仮想ウィンドウの「viewport」を設定します。user-scalable=noと指定すればピンチイン／ピンチアウト（拡大・縮小）を無効化できます。width=device-widthはデバイスの横幅、スマホが320pxで表示されるようになります。initial-scale=1.0は表示初期倍率なので、等倍サイズで表示されるようになります。

<meta name="viewport" content="width=device-width, initial-scale=1">

８．IEでCSS3を再現

reproduce-ie_webproduct

IE向けのCSS3再現ライブラリを使うことでCSS3のborder-radiusなども簡単に表現できます。こちらCSS3 PIEの設置方法。

IE対策

９．filter属性

filter-attribute_webproduct

IEには独自実装されたfilterプロパティがあります。半透明・グラデーション・回転などCSS3の機能に近い効果を適用することが可能です。ただし、文字のアンチエイリアスが無効になったりと落とし穴もあります。

１０．条件付きコメント

IEの独自仕様で条件付きコメントで囲われた部分の表示等をバージョンによって分岐されることができます。

<!--&#91;if lt IE 9&#93;> 
<script src="js/html5shiv.js"></script>
<!&#91;endif&#93;-->

WordPress 効率化

１１．keywordsとdescriptionを自動出力させる

description-keywords_webproduct

有料テーマに備わっていないことが多いので。これを知っておくとSEO系プラグインを一つ減らせる上に、記事が膨大になった時に、一つ一つdescriptionやキーワードをクライアントさんに、書いてもらわなくてもよくなります。以下は、コンテンツの冒頭から文字だけを抽出し、descriptionとキーワードを自動で割り当てることが出来る非常に便利な方法です。「content_summary, 0, 60」の60は出力させたい文字数。

１２．記事中の最初の画像を自動検出して、表示

firstimage_webproduct

クライアントさんが毎回アイキャッチ画像を設定してくれるとは限らないのでこの方法を使うのもありかと。こちらはアイキャッチを設定しなくても、記事の中で使われているサムネイル画像を自動で探しだし、表示させることができる方法。

１３．タイトルの文字数を自動でカットして、語尾に「…」をつける

number-word_webproduct

最初に設定しておくとレイアウト崩れを防ぐこともできます。一覧ページなどで、レイアウトを崩したくないときに、文字数を統一して綺麗に表示させるタグです。例えばH2にタイトルを表示させて任意の文字数でカットするには

<?php echo mb_substr($post->post_title, 0, 32).'...'; ?>

をh2などではさみます。さらにリンクをつけるとこんな感じ。

<h2><a href="<?php the_permalink(); ?>"><?php echo mb_substr($post->post_title, 0, 32).'...'; ?></a></h2>

１４．管理画面

management_webproduct

クライアントさんが使いやすいように、管理画面内の表示をカスタマイズします。主にfunction.phpに記述していきます。顧客アカウントを追加し、管理権限を制限・非表示にすることによって、サイト構築内容が変更されてしまうのを防ぐ事ができます。以下のサイトを参考にできることの一部です。

  • ログイン時のWPロゴを消し、任意のロゴに変更
  • ダッシュボードに注意書き、使い方などの文言追加
  • 投稿画面、サイトメニューの中から使わない機能を非表示
  • 管理バー変更
  • バージョンアップ通知OFF
  • 不要なウィジェットを削除
  • フッターを自社のメールお問い合わせに変更

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。