ラベル WEBデザイン の投稿を表示しています。 すべての投稿を表示
ラベル WEBデザイン の投稿を表示しています。 すべての投稿を表示

2013年8月27日火曜日

WordPress ページナビゲーション制作

ワードプレスのページナビゲーション(記事一覧)をプラグインを使わずに制作します。

プラグインを使わないメリットは、バグ等の回避やバージョンUPに伴う不具合回避出来ます。
プラグインは確かに便利ですが、CMSにとってはトラブルの原因となる確立が高いので、簡単な物であれば、自作する事をお勧めします。
自作する事で、自らのスキルも上がりますから、一石二鳥です。





目的

ページナビゲーションは複数ある一覧リストページを快適に使うためのナビゲーションです。
今回の改造は、元のプログラムでは、現在見ているページを中心に、新旧で2ページ分しか表示しない※1ので、記事量が増えた場合に、最新の記事や古い記事にアクセスしにくいと言う問題を解消する為に、ナビゲーションに最新記事と最古の記事にアクセスすための、ボタンを追加します。

※1表示件数は任意に設定出来ますが、ひとまず書籍通りの内容で話を進めます。




元になるソース

一覧表示が必要な元ファイル。
home.php
category.php
など。

ページナビゲーションを表示したい箇所に、下記phpコードを追加します。

<?php get_template_part('pagenation'); ?>



プログラムファイル
pagenation.php

<?php $maxpage = $wp_query->max_num_pages;
$current = $paged;
if(!$current) {$current = 1;}
?>


<?php
$minpage = 1;
$sidenum = 2;
$shownum = $sidenum * 2+ 1;


if($current > $sidenum && $current < $maxpage-$sidenum+1){
 $start = $current - $sidenum;
 $end = $current + $sidenum;
} elseif($current <= $sidenum) {
 $start = 1;
 $end = min($shownum,$maxpage);
} else {
 $start = max($maxpage-$shownum+1,1);
 $end = $maxpage;
} ?>


<?php if($current <= $sidenum+$minpage): ?>
<?php echo ''; ?>
<?php else: ?>
<a href="<?php echo get_pagenum_link($minpage); ?>">&lt;&lt;</a>
<?php endif; ?>


<?php previous_posts_link('&lt;'); ?>
<?php for($i=$start; $i <= $end; $i++): ?>
 <?php if($i == $current): ?>
 <span><?php echo $i; ?></span>
 <?php else: ?>
 <a href="<?php echo get_pagenum_link($i); ?>"><?php echo $i; ?></a>
 <?php endif; ?>
<?php endfor; ?>
<?php next_posts_link('&gt;'); ?>


<?php if($current >= $maxpage-$sidenum): ?>
<?php echo ''; ?>
<?php else: ?>
<a href="<?php echo get_pagenum_link($maxpage); ?>">&gt;&gt;</a>
<?php endif; ?>


解説

////////// 現在ページへのリンク回避 //////////
<?php $maxpage = $wp_query->max_num_pages;
$current = $paged;
if(!$current) {$current = 1;}
 ?>

これは、現在閲覧しているページへのリンクを設定しない処理です。


////////// 記事リストのループ処理 //////////

<?php
$minpage = 1;
$sidenum = 2;
$shownum = $sidenum * 2+ 1;


if($current > $sidenum && $current < $maxpage-$sidenum+1){
 $start = $current - $sidenum;
 $end = $current + $sidenum;
} elseif($current <= $sidenum) {
 $start = 1;
 $end = min($shownum,$maxpage);
} else {
 $start = max($maxpage-$shownum+1,1);
 $end = $maxpage;
} ?>

ページ表示に必要なループ処理です。
$minpage はページ最小値として1を入れるための変数です。
$sidenum は現在ページを中心に、何ページ表示させるかの変数です。
$shownum は現在ページを中心にして、$sidenum分+1ページ(現在ページ分)を表示させる変数です。

if分以下は表示ループ処理です。



////////// ナビゲーションの表示 //////////


// 最古記事へのリンク処理 //
<?php if($current <= $sidenum+$minpage): ?>
<?php echo ''; ?> ←上のifがtrueならば、非表示(ブランク表示)
<?php else: ?>
<a href="<?php echo get_pagenum_link($minpage); ?>">&lt;&lt;</a>
<?php endif; ?>


最古記事へのリンク処理ですが、最初の1行で最後の記事ページがリストとして表示された場合は、リンクを表示しないように設定しています。




// ページ番号処理 //
<?php previous_posts_link('&lt;'); ?>
<?php for($i=$start; $i <= $end; $i++): ?>
 <?php if($i == $current): ?>
 <span><?php echo $i; ?></span>
 <?php else: ?>
 <a href="<?php echo get_pagenum_link($i); ?>"><?php echo $i; ?></a>
 <?php endif; ?>
<?php endfor; ?>
<?php next_posts_link('&gt;'); ?>


1~順にページ番号を表示させます。また、閲覧中のページにリンクを設定しないようにも、処理をしています。



// 最新記事へのリンク処理 //
<?php if($current >= $maxpage-$sidenum): ?>
<?php echo ''; ?> ←上のifがtrueならば、非表示(ブランク表示)
<?php else: ?>
<a href="<?php echo get_pagenum_link($maxpage); ?>">&gt;&gt;</a>
<?php endif; ?>


最古記事と同様に、ナビゲーションリストに最後のページ番号が表示された時点で、リンクボタンを非表示にしています。

ナビの表示にブランクを使ったのには、ifループで妙な結果を出さない措置です。
もう少し上手い処理の仕方もあるかと思いますが、php初心者に理解しやすい様に、あえてブランクを表示させてあります。

phpを理解している方ならば、この辺りの処理をもう少し綺麗に出来ると思います。


2013年5月10日金曜日

SNS対策にOGPタグは必須です。 今さら……第53回


今さら聞けないネットのあれこれ。
「SNS対策にはOGPタグは必須」
についてお話します。


重要度:★★★★
難易度:★★~★★★★


OGPタグと言う言葉を聞いた事がありますか?
最近はFacebookがそこそこ流行っているので、徐々にではありますが、一般にも広がってきています。



 OGP(Open Graph Protocol)

まぁ名前はどうでもいいのですが、どういった事をするかと言いますと。
簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形でHTMLに付加する記述方法のことです。
もう少し解りやすく言えば、
いいねボタンを押して、コメントすれば、タイムラインに、サイト情報が画像入りで掲載される。と言う夢の様?なタグの事です。



図1
コメントしたのボックス内に画像・ページタイトル・概要などがチキンと入っている。


上記の様に、OGPタグを適切に設定してあるサイトでは「いいね」ボタンを押すと、自分のコメント欄の下に枠で囲まれた内部の内容を自動的に表示してくれます。

サンプルの画像は、Facebookですが、mixiでも同じ様な表示がされます。

ちなみに、設定が適正にされていない、あるいは設定そのものがされていない場合は、下記の画像の様になります。


図2
設定がされていないと、タイトルとサイトURLしか表示されない。


いいねを押しただけで、このようにタイムラインに表示されるのであれば、キチンと設定しておきたいですよね。
綺麗に表示されていれば、それでけで見る相手に対して、良い印象を与えられます。

設定方法は、それほど難しくは無いのですが、多少なりともHTMLの知識が必要になるので、解らない人は、解る人に聴きながら設定した方が、良いでしょうね。

またブログにも当然設定出来るのですが、設定するブログによって方法が違ったり、書き出すタグの書式が特殊だったりするので、それぞれのブログ(アメブロやYahooブログなど)に合った方法を探してください。
大抵の場合は検索にあるはずです。


では具体的な代表的な書式を書きます。
下にある書式だけもで抑えておけば、最低限の形にはなるので、やっておきましょう。

下記のメタタグをHTMLの<head>~</head>内に記述します。

1:/// <meta property="og:title" content="タイトル" />
2:/// <meta property="og:type" content="オブジェクトのタイプ" />
3:/// <meta property="og:url" content="このページのURL" /> 
4:/// <meta property="og:image" content="表示される画像のパス" /> 
5:/// <meta property="og:description" content="概要を説明する文章" /> 
6:/// <meta property="og:site_name" content="サイトの名前" />

** 以下Facebook用OGP ***
7:/// <meta property="fb:app_id" content="アプリID"/>



1:ページタイトル
個別のページタイトルを表示します。
ブログのように様々なページがある場合に、このページタイトルを表示しておくことで、他のページと区別を付ける事が出来ます。またこのタイトルが見出しの役目も果たすので、解りやすいタイトルにしておくことが重要です。

2:ページの種類
このページが、サイトのページ(企業や一般的なホームぺージ)なのか、ブログなのかを判別するタグ。
修理は
・article ・blog ・websit
の3種類

3:ページURL

現在のページURLです。


4:表示画像
表示させるサムネイル画像のパス


5:概要文章 ※
概要文ですが、これ実は設定しない方が良い場合があります。
特定のブログなどは、サイト内の本文最初に出てくる<p>~</p>の文章を自動的に取得して表示する設定になっている場合があるからです。
ただしこの項目を未設定にすると、最悪の場合、概要文章はなにも表示されない事があるので、注意が必要です。


6:サイト名称
掲載サイトの名称です。

Facebook用OGP
必ず必要という事は無いですが、Facebookに対してOGPを設定したいのであれば、必須になってきます。

7:アプリID
このOGPを動かす為に必要なアプリIDです。


最低でも、上記の6種類+1のタグを、HTMLのヘッダー部分に入れておけば、Facebookやmixiで綺麗な表示がされます。ただし、Facebookやmixiなど独自のOGPタグ設定があるので、それぞれのSNSに対応したいのであれば、その仕様を確認してた方が良いでしょう。


上記以外にも、電話番号や住所などといった要素のタグも用意されいますので、興味のある方は調べてみてください。


参考サイト


OGPタグに関して比較的詳しいサイト ////
Facebookなどで使われている「OGP」の一覧



ブログ設定に関するOGP(検索結果) ////
検索キーワード:ogp 設定 ブログ



2013年3月22日金曜日

画像加工・編集ソフトはもう要らない。


ホームページ制作にかかせないモノが幾つかあります。
その中でも欠かすことの出来ないモノが、画像加工ソフトです。

有名なソフトとしてAdobe Photoshopがあります。

しかし、ホームページ制作において、Photoshopクラスの機能が必要な場合は、実は極僅かでここまでの機能は殆ど必要ありません。

特に画像加工初心者であれば尚更です。
高価なソフトを購入しても、その機能を使いこなせなければ、まさに宝の持ち腐れです。

とは言え、ある程度の加工・編集能力のソフトは欲しいところです。

無料の画像加工ソフトは現在多数あります。
そのどれも、現在では有料のソフトと遜色ないレベルの機能を実装していて、使用感も悪くありません。
もちろん、プロの目から見れば、欲しい機能が削除されていたりして、モノ足らなさはありますが、画像加工の勉強をしようと思うレベルであれば、これらの無料ソフトで十分だと思います。

さて、その中でもオンラインで加工・編集が可能なソフトが幾つかあるので紹介します。

オンラインソフトの利点は、ソフトのインストールが必要無い事。またネットが繋がる環境であれば、何処でも加工が可能と言うところでしょうか。
それぞれのサイトで大体そのまま使用出来ますが、加工した画像を保存する際に会員登録が必要な場合があったりしますので、それぞれのサイトでご確認ください。

また、今回ご紹介するサイトは、どれも機能的にはほぼ横並びです。
基本的に日本語に対応しているので、操作に関しても大丈夫だと思います。



Photoshop.com
http://www.photoshop.com/



Adobeが提供する、Photoshopのオンラインツールです。
機能限定版のPhotoshopだと思っていただければ、良いかと思います。
Photoshop Express Editorの最小限の機能で良ければ、会員登録は不要です。

//////////////////////////////////////////////////////////////////

pixlr
http://pixlr.com/



pixlr editor
スマフォ用の画像加工アプリを提供しているpixlr。
会員登録をすれば、自分用のライブラリーを持つ事が出来ます。

//////////////////////////////////////////////////////////////////

Sumo Paint
http://www.sumopaint.com/app/



初期ページでは英語表示ですが、左上にあるアメリカ国旗をクリックすると言語選択が出来ます。
このサイトは、見慣れたアイコンパネルが表示されますので、かなり直感的に操作できると思います。



他にも、このようなサービスはありますが、とにかくこの3サイトはよく出来ています。
このサイトで画像加工の練習を積んでから、有料のソフトを手に入れるようにすれば、お金の無駄使いにならずに済みそうですね。
(ソフトを買わなくても、これだけで十分かもしれませんが)


※どのサービスもFlash Playerが必要になります。
最新版のFlash Playerをインストールしておいてください。



2012年11月13日火曜日

Facebook テーブルテントアプリ


今日は、ネタがあるので急遽、連投です。


11/13 PM
Facebookマーケティングから、テーブルテントアプリが公開されました。

店舗経営されているお客さま向けの、アプリです。

実店舗に来て頂いたお客様に、Facebookページへのアクセスを簡単にしてもらう様に開発されたアプりです。

アプリとは言っても、要するにQRコード生成プログラムなのですが。


テーブルテントアプリ
https://www.facebook.com/marketingjapan/app_496405607036818




アプリページにアクセスすると上記の画面が出ます。
入力欄に、FacebookページのURLを記入して、イメージを作成ボタンを押すと、badge.pngと言うファイルがダウンロードされます。

そのファイルをプリントアウトすると、下記の様なPOPが印刷できます。



冷静に考えれば、タダのQRコードを印刷したPOPですが、Facebookのオフィシャルですので、普段使えない【オフィシャルロゴ】も入っているので、ちょっといい感じです。

このPOPをテーブルやレジ周りなどに貼っておけば、お客様が簡単にアクセスできますし、キャンペーン等と一緒に行なえばアクセス数をあげる事も可能ではないでしょうか?



【フォント】につてい


初心者WEBデザイン?
【フォント】につてい

ブラウザで使う、フォントについてのお話。

サイト製作の勉強をしていると、比較最初の頃にこの【フォント】についての問題に遭遇します。

一般的に言われている事で、【フォントは指定するな】と言う事が言われていますが、実際には大抵のサイトで、CSSによるフォント指定がされてます?

これでは言っている事と、やっている事が矛盾しますよね??
初心者にとっては、まってくもって【?????】といったところでしょうか。

本来の意味としては、フォントを指定しないという事は、【ブラウザの設定に任せる】という意味があります。
そもそも、ブラウザで使用するフォントとは、どういったモノなのでしょうか?

ブラウザで使用するフォントは、使用するブラウザ毎にフォントも、文字サイズも違います。
これらは、ブラウザの設定で簡単に変更が可能です。

この時に選択出来るフォントの種類は、概ね5種類くらいのフォントになります。
その5種類と言うのは、OSに関係なく一般的に搭載されている、【基本フォント】というものになります。

つまりブラウザで使用しているフォントは、
【使用するPCに搭載されているフォント】
と言う事になります。

では、PCに搭載されているフォントであれば、何を使ってもいいのか? と言うと……ダメです。

初心者にありがちな、欲望としてCSSなどを使って、部分的にフォントの指定(見出しタグ等)をして、見た目の綺麗なモノを作ってみたいと思われるでしょうが、それは意味の無い事なのです。

先ほど言ったように、【使用するPCに搭載されているフォント】で無ければ、ブラウザではそのフォントは表示しません。

つまり、自分のPCにはある(搭載)フォントは、必ずしも閲覧者(ユーザー)が観るPCにそのフォントが有る(搭載されている)とは限りません。もし指定したフォントが無ければ、代替えフォント※1に置き換えられてしまい、せっかく用意したデザインが(見た目)無意味な物になってしまいます。

この為にフォントの指定はするな。と言う事が言われているのです。

では、何故CSSによってフォントを指定しているか? ますます解らないですよね?

解答としては、複数のブラウザで同じ表示にするため。

と言う事です。確かにフォントの指定はしていますが、それは【ターゲットブラウザ】に対して、可能な限り同じ表示にする、一つのテクニックなのです。

ブラウザはそれぞれに初期設定のフォントやサイズが違います。しかし、それでは閲覧するブラウザによって、見え方が大きく異なる可能性が出てきます。

製作側としては、ブラウザが変わっても、同じ様に見える事が望ましい※2のでサイト内のフォントと、フォントサイズを指定することで、同じ見た目を保つようにしています。

もちろん指定するフォントは標準的なブラウザフォントです。

つまり、【フォントの指定をするな】とは標準的なフォント以外のモノ(フォント)を使うなという意味です。
いい変えれば、標準フォントであれば多少の装飾はOKとなります。


どうしても、標準以外の綺麗なフォントを使いたい場合※3、手段が無いことはありませんが、以下の条件が必要になります。

1.著作権フリーなフォントである。
2.JIS第二水準までのフォントデータをもつ事。
3.OSに依存しない汎用フォーマット、または一般的なフォントであること。

などの条件全てをクリア出来れば、フォントデータをWebサーバー上にUPして、CSSにてフォント指定をすれば、ブラウザでの使用も可能になります。

まぁ、かなり高いハードルですが。

いずれにしても、CSSによるフォント指定は、汎用フォントで、複数のブラウザでの表示を同じ様に見せるためのテクニックという事を覚えておいてください。





代替えフォント※1
CSSで指定したフォントが無い場合、ブラウザの設定フォントに置換されます。


同じ様に見える事が望ましい※2
製作としては、最低でもターゲットブラウザに対しては、全て同じ様に表示される事が望ましいのですが、必ずしも同じにならない事があります。


標準以外の綺麗なフォントを使いたい場合 WEBフォントを使う※3
WEB上に公開してあるフォントデーターを利用する方法で、ブラウザーで使用できる形にしたもの。
日本語対応のものもあるが、基本的に有料のものが多い。





2012年8月21日火曜日

書籍は基本中の基本です。


初心者WEBデザイン?
【技術参考書】について

現在、インターネットを使えばほぼどんな事でも、無料で調べる事が出来ます。 しかし、それはあくまで、形に残らないデジタルなモノ。

ページをプリントアウトすれば、それはアナログな資料として、役には立ちますが基本的にバラバラな情報なので、他の情報との互換が取れない事が多く、その為にまた検索(調べる)を繰り返す事になります。

インターネットは、調べる事に関しては、非常に便利なツールですが、その情報が体系化されていない場合が多い為に、バラバラの情報でしか取得できない状態です。

では、そうした情報検索を繰り返さない方法は無いのか?というと。あります。非常にアナログな手段で、しかも効率的。
そう、書籍です。紙媒体の「本」です。

そもそも書籍、特に技術参考書は、それ一冊である程度の知識(情報)をカバー出来る内容が網羅されています。
しかも、ネットのように変化しない情報として存在します。また、その情報の価値は著者あるいは出版社が責任を持ち「確かな情報」としてその内容が保証されています。

ネットユーザーが片手間に書いた不確定な情報ではないと言う事です。
(全てのネット情報がそうではありませんので、ご了承ください)

それでは、どういった書籍を購入すれば良いのか?
まず、最低限2種類を購入してください。
一種類はHowTo系のもの、もう一種類は辞典またはリファレンス系の物を、購入してください。

購入するさいの目安と言うか基準ですが、
私はAmazonのカスタマーレビューを参考にしています。

技術書のカスタマーレビューはかなり詳しく書いてある事が多いので、役に立ちます。

個人的には、「一週間で~出来る」や「10日間で~出来る」などのHowTo系は、お勧めですね。
一日で出来る量を決めてあるので、作業もしやすいですし、基本的に「初心者」を対象とした本なので、最初から体系的に学ぶことができるからです。

また、このての書籍の場合、「自分でソースコードを打ち込む」という行為が必要になります。
これが非常に重要で、オーサリングソフトを使わずに、単なるテキストエディタでのソース打ちは、WEB制作をする上で非常に重要な行為なのです。

逆にいえば、HTMLの知識も持たずに、オーサリングソフトを使ったところで、宝の持ち腐れと言ったところです。
参考書のまる写しとは言え、自分の手で打ち込んだソースコードは、知識として理解しやすいですし、打ち込む事で考える事が出来るので、とても重要です。

最初は、戸惑う事も有るかもしれませんが、まず書籍を購入して、実践する事が重要です。
非常にアナログな手法ですが、この方法がサイト制作における基本となるので、がんばってください。




2012年8月9日木曜日

ファイル拡張子は表示していますか?


初心者WEBデザイン?
【ファイル拡張子】について

ファイル拡張子はweb制作でとても重要です。

そこで、貴方に質問です。
貴方のパソコンの設定は、ファイル拡張子を表示する設定になっていますか?

表示する設定になっている方は、GOODです。
もし表示されない(一般的な拡張子は表示しない)設定になっているようならば、設定を変更して、全てのファイル拡張子を表示する設定にしましょう。

表示させる方法については、

各OS名 ファイル拡張子 表示

と言ったキーワードで検索すれば、出てきますので各自参照してください。

さて、何故ファイル拡張子が重要なのか?と言うと、webに限った事ではないのですが、基本的にリンクを作る際に、ファイル名が必要になりますが、このファイル名と言うのが、拡張子込みの名前だと言う事です。

web制作の基本として、リンクは切っても切り離せんません。
というか、リンク無しではwebサイトは成立しないと言ってもいいでしょう。

いや言い切ります。「リンク無しでは無理だから!」

と言う事で、絶対にリンク無しでは作れないwebサイト。
拡張子の表示が何故重要か?

例えば、拡張子を表示していない場合、
abc.jpgabc.gifはPC上では同じ「abc」と言う表示しかされていません。

え?アイコン表示が違うから大丈夫?

確かに、jpgとgifではアイコンの表示は違います。しかし、webサイト制作では拡張子までがファイルの名前なのです。
先ほどから言っている、リンクでは拡張子込みでないと、リンクの機能をしません。
つまり、使われている拡張子が不明では、リンクが出来ないと言う事になります。また、先ほどのように、「同じ名前のファイル」の場合、どちらにリンクすればよいのか、すぐに判断できない場合もあります。

まぁ、ファイルがわかっていれば、リンクの心配もいらいないのですが、もしリンク切れ等が起きた場合に、拡張子が不明だと対応に手間取る事が予想されます。

そう言った、不具合対策も含めて、拡張子に慣れておく事が重要です。
また、アイコンの表示ではなく、ファイル名での表示に慣れておく事も重要です。

web制作では、FTPというソフト用います。このソフトは基本的にファイル名を並べるだけの機能しかありません。
普段アイコン表示に慣れている人には、非常に見づらい表示だと思います。
しかし、web制作ではむしろこういったファイル名のみの表示と言う作業状況がしばしばあります。
そう言った状況に慣れる為にも、アイコン表示からファイル名表示に慣れておく事をお勧めします。




2012年7月30日月曜日

基本構造は理解していますか?


初心者WEBデザイン?
【基本構造の理解】について


WEBサイト制作を勉強しようとした時に、まず思いつく事が、HTMLを勉強しよう。 と、誰しもが思うはずですが……  ちょっと待ってください。

初心者がいきなりHTMLを勉強しても、おそらく上手くは行きません。
もちろん、HTMLを勉強する事は間違っていませんが、その前にブラウザーで表示されているHTMLや画像の構成や理屈は理解していますか?

最近は、HTMLやCSSをよくご存じのクライアントさんも大勢いるのですが、大元の基本構造を理解していない、あるいは間違って覚えてしまっている為に、ミスを犯すシーンを良く見かけます。

例えば、サイト上で使用する画像とHTMLとの関係は?
よく見るHowTo本では、「画像はimgフォルダーに入れて使用しましょう」と書かれています。もちろんこれは間違いではありませんが、少々言葉が足りません。(詳しく書くとややこしくなるので書きませんが)

また、外部からのプログラムをサイト内で利用する場合や、リンクと言う考えかたなど。

HTML以外にまず「HTMLを表示させる為の基本的な構造」を理解していないと、制作途中で躓いた時に、その原因究明に時間が掛かっていまいます。

例えばよく見かける、画像が表示されない状態になった時に、画像が表示される構造と条件を理解していれば、原因を突き止める事は容易ですが、その基本的な事を理解していないと「どうしてそうなっているのか」という簡単な事も解りません。原因が付きとめられなければ、修正も出来ません。

昨今は、情報が氾濫していて、HTML関係の記述テクニックや解説サイトが多数ありますが、WEBページの基本的な構造を解説したページは意外と少ないです。しかし、さほど難しい事でもないし、(だから見落とされがちなんですが)HTML関連の書籍の最初の方に必ず、その手の内容が記載されているので、読み飛ばさずに、最初からきちんと読んで理解することをお勧めします。

この部分の理解力いかんでは、その後の勉強の速度に違いが出る事があるので、じっくり勉強しましょう。

2012年7月26日木曜日

ターゲットブラウザー について


初心者WEBデザイン?
【ターゲットブラウザー】について

これは、殆どプロの領域なのですが、特定のブラウザーを決めて、そのブラウザーに対して正確に表示される為のサイト制作を行う。つまり、制作の基準となるブラウザーを決める作業の事です。

アマチュアであれば、今使っているブラウザーでの表示が出来れば、とりあえずOK?なのでしょうが、現在のインターネット環境には、複数のブラウザーが存在しており、必ずしも自分(制作者)と同じブラウザーでサイトを閲覧してもらえる訳ではありません。

そこで、閲覧するブラウザーを幾つか決める、つまり「ターゲットとするブラウザーを決定する事」を「ターゲットブラウザー」と言います。

本来は、閲覧される可能性のあるブラウザー全てをターゲットブラウザーとしたいところですが、何しろ、ブラウザーは各ヴァージョンによって、その仕様が変わるので、同じブラウザーでも、ヴァージョン違いで表示が全く変わる事は珍しくはありません。

つまり、全てのブラウザーを網羅する為には、各ブラウザーの全てのヴァージョンを揃えないといけません。
また当然ですが、元になるPCのOSによっても、違いが発生しますので、例えばWinとMacでは同じブラウザーの同じヴァージョンを使っていてもそれは「違うブラウザー」となります。

そう考えると、全てのブラウザーをターゲットとする事は現実的ではない。と言う事が解るかと思います。

では、どうしたら良いのか?
そこで登場するのが【ターゲットブラウザー】という考え方です。つまり特定の方法や、基準を用いて、ブラウザーを選定します。

選定方法で最も多い方法は、ブラウザーシェアによる選定方法です。
これは、インターネットで使われている、各ブラウザーのシェアの多いモノから順に選ぶと言うやり方です。

下の画像は、アクセス解析サービス「StatCounter」(アイルランド)が提供する「StatCounter Global Stats」より日本のブラウザシェアの統計グラフを掲載しています。



これを見て頂ければ、IE(Microsoft Internet Explorer)が最も多いブラウザーである事が解ります。
次点としてFF(Mozilla Firefox)。僅差でCr(Google Chrome)が続きます。

この状況を見る限り、ターゲットブラウザーは、IE・FF・Crなどを選定しておけば、大多数のユーザーがカバー出来るようになります。

この統計は、ブラウザーのヴァージョンは明記していないので、あくまでブラウザーの種類別という大雑把な括りですが、ターゲットブラウザーを選定する目安としては、とりあえず十分だと思います。

別の選定方法もありますが、これは初心者向きでは無いので、またの機会に。

また、先日のモニターサイズと同じで、こちらもブラウザーのトレンド?があるので、1年に一回ぐらいは、ブラウザーシェアの動向は確認しておいた方が良いですね。

いずれにしても、WEBサイトを制作するのであれば、複数のブラウザーで、そのサイトがどのように見えるのかと言う事ぐらいは確認する必要がある。 というお話です。


2012年7月25日水曜日

サイト幅につてい


初心者WEBデザイン?
【サイト幅】につてい

たとえプロでもアマでも、WEBサイトを作る上で、一番最初に決めなければならない事があります。
それは、サイトの画面幅です。

サイト制作以前にデザインを起こすにしても、まずサイトの幅を決めない事には、デザインも作れません。

では、一般的にサイトの横幅は決まっているのか?
これが、具体的な数字は決まっていないと言うのが現状です。
(大まかな横幅はある程度決まっていますが。)

で、基本的にサイトをデザインする上での方法として、2種類の方法があります。

固定レイアウトとリキッドレイアウト

固定レイアウトとは、サイトの横幅を固定して、画面の大小にかかわらず、常に同じ大きさで表示をするレイアウトで大多数のサイトで導入されています。

リキッドレイアウトとは、サイトの横幅を画面(モニター)に合わせて伸縮するデザインで、主に情報系のサイトに多いレイアウトです。代表的なサイトはアマゾンやウィキペディアなどがあります。
これは、固定レイアウトとは違い、幅の指定を画面全体に対する%比率で設定しています。
つまり、モニターの表示解像度に対して自動的に変化する方法です。

どちらもの場合も、元になる最小限の横幅があります。リキッドレイアウトでも横幅に対して常に一定の比率で変化したのでは、画面を小さくした時に、レイアウトがおかしくなるので、変化の最小値を設定してあります。

最近ではサイトの横幅は900~980pxが大体の標準幅ですね。おそらくリキッドレイアウトでも、最小値は900pxあたりの数値を入れているはずです。この横幅であれば、17インチのモニターから、24インチのワイドモニターまで問題なく表示できます。ただし15インチモニターを考慮に入れると、800px程度までサイズダウンが必要になります。

ここ数年のモニタートレンドとして、縦横比が16:9の横長画面(ワイド画面)の液晶モニターが一般化しています。
この横長のモニターだと、今までの固定レイアウトでは、左右に大きな余白が生まれてしまい、どうもデザイン的に見栄えが悪い場合があるので、リキッドレイアウトが少しずつ増えている様です。ただ、リキッドレイアウトは横に伸びる性格上、画像の配置やテキストの長さなどに神経を配らないと、見た目が悪くなりリキッドレイアウトの良さが失われてしまうので、注意が必要です。

まぁ、これはあくまで2012年現在の話なので、5年後には21インチモニタが普及サイズになっていて、画面サイズも1200~1300pxになっているかもしれません。これは時代の流れなので、仕方がありません。
そう言った情報を集めて、日々何がベターなのかと言う事を自分の中に基準として作っておく事が、デザインをする上で必要になってきます。



2012年7月23日月曜日

初心者WEBデザイン


それ行け初心者 WEBデザイン

ブログの連載ネタの一つとして、WEBデザイン?の初心者向け講座的な内容をやっています。

テクニック的な部分は少なめにして、むしろ概論や構造などが主体になるかな。
例えばHTMLにしても、CSSにしても調べる気があれば、今のネット社会で、調べられないことは殆ど無いので、明確な答えが解る場合はネットで探して頂いて、どちらかと言うと、答えが曖昧な事についてお話して行こうかと思っています。

さて、と言うことでWEBサイト制作に必要な知識と言うのはどのくらい必要なのか?下記のリストをご覧ください。

このリストはWEBサイト制作に必要な知識です。もちろん専門知識もあるので、全てを覚える必要はありませんが、最低限でも必須項目ぐらいは、理解しておかないと、トラブル対応が出来ないので、最低限の概念として覚えておけばいいかと思います。


WEBサイト制作に必要な知識。

は必須
概念として必要

言語
HTML
JavaScript
CSS
cgi
php
Mysqlに代表されるデータベース

ソフト
画像加工ソフト
オーサリングソフト
FTPソフト

ハード
WEBサーバーに関して
ドメインに関して
WEBメールに関して
インターネットに関して
データベースに関して


ざっと見て、これだけの事を理解していないと、WEBサイトの制作は難しいです。
もちろん全てを覚える必要はありません。あくまで概念として、「これはどういったことなのか?」という事を覚えておく程度で問題ありません。

正直なお話、これだけ覚えるにはそれなりに時間とお金が掛かるので……
とわ言え、あくまで初心者向け?の内容なので、出来るだけ簡単に説明したいと思っています。