レスポンシブ・ウェブデザインのすすめ　-Google

昨日Googleからのブログにこんな内容の記事がアップされた。

タイトル「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」

■要約（Googleより抜粋）
1. レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
2. すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
3. モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。

当社が昨年より進めてきたレスポンシブデザイン対応がGoogleも推奨する方法だということは、サイトの企画制作において重要なファクターだ。
確かにレスポンシブデザインでリニューアルしたクライアントさんは検索結果も上がっている。サイトを使う人・見る人の利便性が向上することを重視しているということだと思う。

http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

レスポンシブデザインの構築参考サイト

レスポンシブデザインを勉強するのには、参考になるサイトを徹底的に分析することから始めます。分析して行く中で自分が分りやすく社内でも使いやすいものを選び勉強会を開きスキルを上げて行きます。
沢山ある参考サイトの中でとてもよく出来ていて、テンプレートとして利用もできるサイトです。

http://www.getskeleton.com/

http://foundation.zurb.com/

http://twitter.github.com/bootstrap/

スマートフォンのズーム機能　viewport設定

iPhoneやAndroidのズーム機能を使えるようにする場合のviewportの設定のHTML記述。
<head>にviewport設定を記述します。

<!– 画面をズームできるように設定 –>
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=yes”>

<!– 画面をズームできないように設定 –>
<meta name=”viewport” content=”width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no” />

Concrete5 C5R
ズームできない
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
ズームできる
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

WordPress 投稿日の「投稿日」を英語にする

「functions.php」の564行目あたりを変更

変更前
function twentyeleven_posted_on() {
printf( __( ‘<span>Posted on </span><a href=”%1$s” title=”%2$s” rel=”bookmark”><time datetime=”%3$s” pubdate>%4$s</time></a><span> <span> by </span> <span><a href=”%5$s” title=”%6$s” rel=”author”>%7$s</a></span></span>’, ‘twentyeleven’ ),

変更後
function twentyeleven_posted_on() {
printf( __( ‘<span>Posted : </span><a href=”%1$s” title=”%2$s” rel=”bookmark”><time datetime=”%3$s” pubdate>%4$s</time></a><span> <span> by </span> <span><a href=”%5$s” title=”%6$s” rel=”author”>%7$s</a></span></span>’, ‘twentyeleven’ ),

WordPress 便利なエディタ

WordPressを使ったブログで、お客様が投稿の文字の大きさを変えられたいとのこと。
標準のエディタではフォント変更ができない仕様らしいのでプラグインを導入。フォントサイズの指定だけでなく、tableやh1、h2などのタグを簡単に入れられるようになるとっても便利なプラグイン。

http://wordpress.org/extend/plugins/tinymce-advanced/

●上記ページでプラグインをダウンロード

●解凍、「tinymce-advanced」というフォルダごと、ブログを運用しているサーバの「/wp-content/plugins」にアップロード

●WordPressの管理画面、「プラグイン」で「tinymce-advanced」を有効化

以上で完了。
今回、なぜか「有効化」を2回クリックしないと有効化されなかったのがちょっと不思議だったけれども無事エディタが使えるようになったのでよしとする。

このエディタにはいわゆる絵文字のようなものも含まれているけれども、例えばfacebookでは全然認識してくれなかったりするので、汎用性は低いものかもしれず、多用は望ましくない可能性あり。

コピーライトの年数を自動で変更する

コピーライトの年数部分に下記スクリプトを入れる。
<script>var nowdate = new Date();document.write(nowdate.getFullYear());</script>

・応用1
Copyright <script>var nowdate = new Date();document.write(nowdate.getFullYear());</script> 会社名 All rights reserved.

・応用2
Copyright 1991-<script>var nowdate = new Date();document.write(nowdate.getFullYear());</script> 会社名 All rights reserved.

最新の年数が入っていると、ちゃんと管理されているサイトだなぁという印象ですよね。

WordPress 日本語のセットを入れる

日本語表示キレイに見せたいのでよく当社で利用する日本語のセットを記述する。
Global（style.css 300行目あたり）のfontを変更

/* =Global
———————————————– */

body, input, textarea {
color: #373737;
font: 14px “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, “メイリオ”, Meiryo, “ＭＳＰゴシック”, Helvetica, Arial, Verdana, sans-serif;
font-weight: 300;
line-height: 1.625;
}

オリジナルは
font: 15px “Helvetica Neue”, Helvetica, Arial, sans-serif;

バージョン3.4.1

WordPress 記事のタイトル文字の色やサイズ変更

トップページも個々の記事ページも「style.css」の中の下記赤文字部分です。

■トップページの記事タイトル部分（730行目あたり）

/* =Content
———————————————– */
.entry-title {
   clear: both;
   color: #222;
   font-size: 18px;
   font-weight: bold;
   line-height: 1.5em;
   padding-bottom: .3em;
   padding-top: 15px;
}

オリジナル
clear: both;
color: #222;
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
padding-bottom: .3em;
padding-top: 15px;

■個々の記事ページ（1100行目あたり）

/* Singular content styles for Posts and Pages */

.singular .entry-title {
   color: #000;
   font-size: 18px;
   font-weight: bold;
   line-height: 1.5em;
}

オリジナル
color: #000;
font-size: 36px;
font-weight: bold;
line-height: 48px;