レスポンシブデザインに使用するテンプレートは海外のものが多い。
そのままだと、lang属性が英語(en)になっているので日本語に変更する。
<html lang=”ja” dir=”ltr”>
「dir」は基本となる表やテキストの方向を示す。「ltr」は左から右へ。
レスポンシブデザインに使用するテンプレートは海外のものが多い。
そのままだと、lang属性が英語(en)になっているので日本語に変更する。
<html lang=”ja” dir=”ltr”>
「dir」は基本となる表やテキストの方向を示す。「ltr」は左から右へ。
簡単に文章のみを追加する。
/concrete/single_types 内の「page_not_found.php」を変更
これが元
1、<?php defined(‘C5_EXECUTE’) or die(“Access Denied.”); ?>
2、<h1><?php echo t(‘Page Not Found’)?></h1>
3、<?php echo t(‘No page could be found at this address.’)?>
4、<?php if (is_object($c)) { ?>
5、 <br/><br/>
6、 <?php $a = new Area(“Main”); $a->display($c); ?>
7、<?php } ?>
8、<br/><br/>
9、<a href=”<?php echo DIR_REL?>/”><?php echo t(‘Back to Home’)?></a>.
1、<?php defined(‘C5_EXECUTE’) or die(“Access Denied.”); ?>
2、<h1><?php echo t(‘Page Not Found’)?></h1>
3、<?php echo t(‘No page could be found at this address.’)?>
4、<?php ?>
5、<br/><br/><br/>
6、<p>当サイトは <strong>2012年7月20日にリニューアルオープン</strong>致しました。</p>
7、<p><a href=”<?php echo BASE_URL ?>/”>こちらのトップページ</a>よりアクセスし直して下さい。</p>
8、<p>ブックマークなどでこのページをご覧の方は再度ご登録をお願い致します。 </p>
9、<?php ?>
10、<?php if (is_object($c)) { ?>
11、 <br/>
12、 <?php $a = new Area(“Main”); $a->display($c); ?>
13、<?php } ?>
14、<br/><br/>
15、<a href=”<?php echo DIR_REL?>/”><?php echo t(‘Back to Home’)?></a>.
赤字が追加した部分。(数字、は無視して)
これをアップすればOK。くれぐれも元ファイルはバックアップしておくようにする。
環境バージョン5.4.2.2
昨日Googleからのブログにこんな内容の記事がアップされた。
タイトル「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」
■要約(Googleより抜粋)
1. レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
2. すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
3. モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。
当社が昨年より進めてきたレスポンシブデザイン対応がGoogleも推奨する方法だということは、サイトの企画制作において重要なファクターだ。
確かにレスポンシブデザインでリニューアルしたクライアントさんは検索結果も上がっている。サイトを使う人・見る人の利便性が向上することを重視しているということだと思う。
http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html
レスポンシブデザインを勉強するのには、参考になるサイトを徹底的に分析することから始めます。分析して行く中で自分が分りやすく社内でも使いやすいものを選び勉強会を開きスキルを上げて行きます。
沢山ある参考サイトの中でとてもよく出来ていて、テンプレートとして利用もできるサイトです。
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″>
「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’ ),
日本語表示キレイに見せたいのでよく当社で利用する日本語のセットを記述する。
Global(style.css 300行目あたり)のfontを変更
/* =Global
———————————————– */
body, input, textarea {
color: #373737;
font: 14px “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, “メイリオ”, Meiryo, “MS Pゴシック”, Helvetica, Arial, Verdana, sans-serif;
font-weight: 300;
line-height: 1.625;
}
オリジナルは
font: 15px “Helvetica Neue”, Helvetica, Arial, sans-serif;
バージョン3.4.1
トップページも個々の記事ページも「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;
バージョン3.4.1