レスポンシブ・ウェブデザイン(Responsive Web Design)について最近よく聞かれます。
弊社でも最近取り組み始めましたので「レスポンシブWebデザイン」について質問された内容を書きたいと思います。

 
【レスポンシブWebデザイン FAQ編】
Q.「既存のホームページをレスポンシブ・ウェブデザインにできる?」
A.はい、(たぶん)できます。
 
ただし、構造をどのようにするかをよく検討する必要があります。
スマホやタブレット端末で見たときに「何を」「どこに」「どのように」表現するかの計画立てから考える必要があるでしょう。しかもCSSでレイアウトされたホームページならまだよいですがこれが随分前のTABLEで組まれているHTMLだとしたら初めから作り直した方が早いでしょう。
 
 
既存のホームページを作り直す一番簡単な方法を具体的(ザックリ)には、既存のCSSファイルをコピーしてスマホやタブレット端末用のCSSに作り直して利用します。(やり方は他にもありますが簡単な方法で)
 
base-pc.css:PC端末用(横幅769px以上用に使用)
base-tb.css:タブレット端末用(横幅641px~768px用に使用)
base-sm.css:スマホ端末用(横幅640px以下用に使用)
(CSSの名前は何でもOKです。)
 
それぞれのCSSができたらHTMLにimportします。
 
[ import.css ]を作り次の様に記述します。
—————————
@import url("base-pc.css") screen and (min-width:769px);
@import url("base_tb.css") screen and (min-width:641px) and (max-width: 768px);
@import url("base_sm.css") screen and (min-width:0px) and (max-width: 640px);
—————————
これを説明しますと次の様になります。
横幅が0px~640pxまでなら「base_sm.css」を適応
横幅が641px~768pxなら「base_tb.css」を適応
横幅が769px以上なら「base-pc.css」を適応 となります。
 
HTMLにて[ import.css ]を読み込ませます。
—————————
<link href="./css/import.css" rel="stylesheet" type="text/css" />
—————————
 
※それぞれブラウザの横幅を狭くして確認よりも実際の端末で確認しましょう!
 
これで見た目は無視してとりあえず「レスポンシブ・ウェブデザイン」にはなった訳です。
あとは、それぞれのCSSファイルを端末(横幅)に合わせて整えますが、
この整えるポイントでいろいろとやることもあるので次回にまた記載したいと思います。
 
 
※IEに対応させるために次のいずれかを欠かさずに読み込ませてください。
 
 または
 
よくわからないという方は次のソースをHTMLファイルの<header>~</header>内に記述します。
—————————
<!–[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
—————————
これでIEに対応してくれます。
 
 
それでは次はいつになるか分かりませんが次回へ「つづく・・・」
 

会社用レンタルサーバー

中小企業様へ初期費用0円 月額3,150円の激安レンタルサーバーのご提供を開始しました。

何も知識や経験が無くてもOK! ドメインの取得からサーバーの設定保守メンテナンスまで丸ごと代行いたします。法人向けレンタルサーバー詳細はこちらをご覧ください。

独自ドメイン取得代金無料!(レンタル月額料金に込み)
独自ドメイン更新費用無料!(レンタル月額料金に込み)
サーバー初期設定費用無料!
メールアドレス(アカウント)容量内にて無制限!
アプリ設置代行無料!
・EC-Cube設置代行無料!(ショッピングサイトを直ぐにオープン可能!)
・WordPress設置代行無料!(簡単にホームページが作れます)

容量1GB
PLESK(コンパネ)インストール済み
PHP5.3 / MySQL / Perl(独自CGI対応) などなど
サーバー仕様もご希望と利用内容に個別対応いたします。

法人向けレンタルサーバーに関する詳細お問い合わせください。

会社用レンタルサーバー

建設業者用オリジナルクラウドアプリをリリースしました。
・資材仕入れ先マスター
・資材マスター
・資材加工マスター
・部材仕入れ先マスター
・部材マスター
・部材加工マスター
・3D-CAD(Flash版)CADデータ出力
・入荷管理
・在庫管理
・売上管理
・社員マスター
・経費マスター
・掛け率マスター
・経費自動計算機能
・顧客マスター(グループ区分)
・各種帳票出力
他多様なプログムラムを組み込み

一般的な建築設計会社から資材取扱商社まで様々な分野に少しのカスタマイズで適応可能と思われます。

【納入環境】
CentOS5 / PHP5.3 / MySQL5系 / ActionScript3.0

あれ?マニュアルを予算上不要と言われたけど大丈夫?
仕様書だけじゃあとが怖そうだよ・・・

「WordPress の新しいバージョンがあります。」と更新画面に表示され、
クライアントに更新されると動かなくなったりと致命傷を負いますので、
顧客へ提供している環境では以下のプラグインは必須かもしれません。

 

「WordPress の新しいバージョンがあります。」を非表示にするプラグイン
インストールするだけでOKです。

プラグイン名「Disable WordPress Core Updates
(プラグイン検索で見つかります。)

ついでに私は、テーマの更新もお知らせを非表示にしています。
テーマもお客様に更新されるとレイアウトが崩れる恐れがあるためです。

プラグイン名「Disable WordPress Theme Updates
(プラグイン検索で見つかります。)

この2つをインストールしておくことで更新のお知らせも表示されず、
無作為に更新される危険性も無くなります。
Coreやテーマの更新は構築者が行ってあげましょう。

 

WordPressに「投稿」した記事中のキーワードに自動リンクがかかる日本語対応のプラグイン「WP Keyword Link」を見つけたのでその記録です。
「WP Keyword Link」はWordPress用の自動リンクプラグインで、固定ページには作用せず投稿記事に対して有効なようです。

●1.インストール
通常のプラグイン同様に検索からインストール出来ました。
プラグイン 〉 新規追加で 「WP Keyword Link」と入力して検索。
(私が インストールしたときはバージョン 1.6.0でした。)
「いますぐインストール」ボタン → 「プラグインを有効化」 これで完了!

●2.設定
インストールが完了すると、メニューの「設定」内に「WP KeywordLink」項目が追加されますのでこれをクリックします。
・入力→プラグインメニュー「Keyword Link」にて
「Keyword」=日本語でOK
「Link」=リンク先URL
「Description」=アンカータグのtitleに入ります。
※日本語キーワードではチェック項目「For zh_CN?」にチェックを入れましょう。
最後に「SAVE」します。
チェック項目は——————————————-
「No Follow」=nofollowタグを付ける
「First Match Only」=最初のキーワードにのみ適応する
「New Window」=リンクを新規ウィンドウで開く
「Ignore case」=大文字小文字の違いを無視する
「Filter in comments?」=コメント欄にも自動リンクを適応させる
「For zh_CN?」=日本語キーワード対応にする。
————————————————————
タブメニュー「Options for KeywordLink」では、「First Match Only」にチェックを入れていない場合、「Number of Keyword matched:」に何単語目まで自動リンクを適応させるかを設定します。

以上です。
過去に書いた記事に対してもリンクされていることが確認出来ました。
便利なのでお勧めです。