WEBサイトを制作するときに参考になるURLまとめ

htmlのエの字も知らない素人から、今ではWordPressをいっぱしにカスタマイズすることができるまで成長しました。

日頃、色々お世話になっているサイトを紹介しておきます。メモしとくだけでもいつか役に立つと思いますよ。

【デザイン参考】
●WEBデザインを制作する際の参考にしているデザインまとめサイトをまとめました【2012年版】
http://webdesignmatome.com/webdesign/design-matome

サイト制作前に、まずはイメージを膨らませる為に。

●UI Patterns | Mobile Tuxedo
http://e0166.blog89.fc2.com/blog-entry-1009.html

なかなかスマートフォンサイトのデザインって確認しにくいんですよね

●ランディングページ集めました。
http://lp-web.com/

知っておくと、いざってとき参考になります。

【ラインセンスフリーで使用できる無料フォト集】
・写真
http://kachibito.net/web-design/modelpiece.html

・イラスト
http://ac-illust.com/
http://kachibito.net/web-design/free-for-commercial-use.html

・アイコン
http://coliss.com/articles/freebies/freebies-icon-defaulticon-v2.html
http://coliss.com/articles/freebies/freebies-icon-by.html
http://kachibito.net/web-design/free-icon-seto-for-commercial-use.html
http://iconhoihoi.oops.jp/index.html

・素材
http://kachibito.net/web-design/free-for-commercial-use.html

・PSD素材
http://coliss.com/articles/freebies/freebies-psd-vue-ui-kit-by-webdesign-tutsplus.html

・フォント
http://coliss.com/articles/freebies/freebies-pixel-font-by-akashicdesign.html
http://coliss.com/articles/freebies/freebies-handwriting-japanese-font.html

【htmlの書き方】
●HTMLタグボード – HTMLタグ一覧、CSSリファレンスなど
http://www.dspt.net/

タグの書き方を教えてくれる。最初は大分お世話になりました。

●「Google HTML/CSS Style Guide」を適当に和訳してみた
http://re-dzine.net/2012/05/google-htmlcss-style-guide/

htmlの正しい書き方が分かります。htmlコーディングは5年ぐらいやっているが、実は全然知らない事だらけだった…。

●もう、class名やid名で悩まないんだからっ!!
http://css-happylife.com/archives/2007/0115_1345.php

結構悩んじゃうもんなんですよね。

●em,%,pxのフォントサイズ | E-riverstyle Design
http://www.e-riverstyle.com/materials/font_folder/index.html

フォントサイズを%指定で書く時にいつも参考にしてます

●SELFHTML: HTML/XHTML / Referenz /HTML で使用される文字・記号の一覧表
http://jp.selfhtml.org/html/referenz/zeichen.htm

HTMLの特殊文字(  等)が一覧でまとめられたサイト。ついつい忘れちゃうので、今でも参考にしてます

●CSSの知識をもっと深める30+2の小技テクニック集|Webpark
http://weboook.blog22.fc2.com/blog-entry-260.html

誰もがつまづくポイントに触れています。

●サルにもわかる正規表現入門
http://www.mnet.ne.jp/~nakama/

正規表現はいつも忘れてしまうので、毎度参考になります

【サイトのチェック】
●GTmetrix | Website Speed and Performance Optimization
http://gtmetrix.com/

サイトの表示速度は重要ですよね。

●SEOチェキ! 無料で使えるSEOツール
http://seocheki.net/

ページランクとかインデックス数とか、コマ目にチェックしてます。

●ブログランキングサイト [TopHatenar]
http://tophatenar.com/

ブログ運営している人はウォッチすると楽しいですよ。

【便利ツール】
●HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
http://coliss.com/articles/web-services/online-clean-up-code-dirty-markup.html

以外とメモっておくと使いどころがある。

毎朝10分。グーグルアナリティクス(GoogleAnalytics)を使って、手間暇かけずにサイト分析

GoogleAnalyticsの確認を毎日の日課にするとブログの更新がすごく楽しくなります。

・毎朝10分でやる事
・手のこんだ分析は半年に一回

とやる事を分けることで、苦にならずに、どんどんと効果分析の知識が身につきますよ。
こんな調査をいつもやってます!みたいな事があったら是非共有してください。

【毎朝10分でやる事】

1.前日の流入数のチェック

[ユーザー] → [サマリー]

ここは単純に増えているか、減っているかを見る

前日の流入数のチェック

2.記事単位でのページビューのチェック

[コンテンツ] → [サイト コンテンツ] → [ページ]
計測期間を選択し、過去と比較にチェックを入れ、推移を見る

ヒットしている記事は何か。
過去と比較して増減のあるコンテンツがあるか。

計測期間を選択し、過去と比較にチェックを入れ、推移を見る

記事単位でのページビューのチェック

3.【1】、【2】を見て、効果に変動があったら、参照元を確認

[トラフィック] → [参照元] → [すべてのトラフィック]
計測期間を選択し、効果に変動のある日付だけに絞り込む

どこからの流入が効果に起因しているのか。
流入に変化があったのはなぜか。

効果に変動があったら、参照元を確認

4.【3】でdirectが多かったら、ブラウザとOSを確認

[ユーザー] → [ユーザーの行動] → [ブラウザとOS]

directは何経由での訪問か。

ブラウザに

Android Browser
Mozilla Compatible Agent(iPhone、iPad)

があったら、スマートフォンからの流入。スマートフォン端末のアプリ経由(twitter、Facebook、RSS)はdirectとなる。
SNSへの投稿や口コミが起因している可能性大。

directが多かったら、ブラウザとOSを確認

5.最後に今日調べた事のメモ

・記事をアップしたら、アップした記事について
フォトショップ(photoshop)を使って5秒で背景のグレーを白に変更【色調補正:特定色域の選択】 http://asobicocoro.com/tips/archives/356 をアップ

・効果が上がっていたら、何で上がっていたのかの分析メモ
14日、15日の2日間の計測で 流入経路のトップはdirectで6,727(全体の40%)。端末はMozilla Compatible Agent(iphone/ipad)が3,131、Android Browserが1,780。directはスマートフォン端末のアプリ経由(twitter、Facebook、RSS)等

・気になった事をメモ(半年に一回のめっこり分析する時の材料になる)
2012/2/28~2012/2/29の効果 訪問数 8056 のうち facebook からの流入が約3000。facebookの広がりは、「1.著名人がコメント」、「2.一般人が複数人コメント」、「3.Woman typeページのコメント」のどれによるものなのか気になる

今日調べた事のメモ

手のこんだ分析は、日々のメモを元にがっつりと分析していく。日々のメモだけでも、手を入れるべきポイントは見えてきますよ。

がっつりサイトを分析するのに、特に使用するのが

・ナビゲーション サマリー
・アドバンス セグメント

です。

機会があれば、今度はがっつりサイトを分析する記事を書きたいと思います。

フォトショップ(photoshop)を使って5秒で背景のグレーを白に変更【色調補正:特定色域の選択】

こんな画像が
加工前

こんな風に背景を白にできます。簡単です。
加工後

フォトショップで(photoshop)画像を開きます。

[イメージ] → [色調補正] → [特定色域の選択]を選択
1

[カラー]で[白色系]を選択。シアン、マゼンダ、イエロー、ブラックの値を全てマイナス100に。
2

これで完了です。
加工後

横幅可変、高さ可変のiframeを作成する【クロスドメイン対応】

http://womantype.jp のサイト情報をRSSフィードから取得し、コンテンツ生成 … 【A】
生成した【A】を他のサイト( http://asobicocoro.com/ )でIframeで表示 … 【B】

いろんなサイトで【A】をIframeで表示したかったので、表示するサイトの横幅に合わせて、横幅と高さが可変になるJavascriptを書きました。

●サンプルを見る
width700px
width500px

どちらも読み込んでいるIframeは【A】

●対応ブラウザ

Chrome ◯
Firefox ◯
IE9 ◯
IE8 ◯
IE7 ×(Javascriptで非表示にすることで対応)
IE6 ×(Javascriptで非表示にすることで対応)

●注意

  1. 「Iframeを読み込み表示するページ(【B】 – 親)」「Iframeの元となるページ(【A】 – 子)」の両方とも編集が必要になります。
  2. 高さの自動調整は、最初にページを読み込んだ時のみ適用されるため、ページが表示されてから横幅を変更しても高さは自動調整されません。
  3. IE7、IE6はどうにも対応できなかったので、iframeをdisplay:noneで非表示にすることで対応しました。

●Iframeを読み込み表示するページ(【B】 – 親)のソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<iframe id="bar" name="bar" src="https://womantype.jp/s/ad/" width="100%" marginwidth=0 marginheight=0 style="margin:0; padding:0;" scrolling="no" frameborder="0"></iframe>
	<script type="text/javascript">
		var appVersion = window.navigator.appVersion.toLowerCase();

		if ( (appVersion.indexOf("msie 6.0") > -1) || (appVersion.indexOf("msie 7.0") > -1) ) {
			document.getElementById("bar").style.display = "none";
		} else {
			function receiveSize(e) {
				if (e.origin === "https://womantype.jp") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
				document.getElementById("bar").style.height = e.data -0+10 + "px";
			}
			try{
				window.addEventListener("message", receiveSize, false);// IE以外
			}catch(e){
				window.attachEvent("onmessage",receiveSize);// IE
			}
		}
	</script>
</body>
</html>

●Iframeの元となるページ(【A】 – 子)のソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>

<?php
$rssurl = "http://womantype.jp/mag/feed";
$rssdata = simplexml_load_file($rssurl);
$num_of_data = 5;
$outdata = "";
for ($i=0; $i<$num_of_data; $i++){
	$outdata .= "<p>";
	$outdata .= "<a target=\"_blank\" href=\"";
	$outdata .= $rssdata->channel->item[$i]->link;
	$outdata .= "\">";
	$outdata .= $rssdata->channel->item[$i]->title;
	$outdata .= "</a>\n";
	// $outdata .= $rssdata->channel->item[$i]->description;
	$outdata .= "</p>";

	if($i == 0){
		$urlno1 = $rssdata->channel->item[$i]->link;
		$imgno1 = str_replace("http://womantype.jp/mag/archives/", "", $rssdata->channel->item[$i]->link);
	}

}
?>

<div id="foo">
	<hr class="top" />
	<div class="titletop"><img src="https://womantype.jp/s/ad/images/head_01.gif" alt="WebマガジンWoman type ウーマンタイプ"></div>
	<div id="newar_name">働く女子を刺激する「Another Action」Woman type [ウーマンタイプ]</div>
	<hr class="bottom" />
	<!--[if lt IE 8.0]><div id="LTIE8"><![endif]-->
	<div class="ImgBlk ImgBlkL">
		<div class="ImgArea">
			<a href="<?php echo $urlno1; ?>" target="_blank"><img src="/mag/wp-content/themes/womantype/images/articleimg/<?php echo $imgno1; ?>.jpg" alt="" /></a>
		</div>
		<div class="NonImgArea">
			<?php echo $outdata; ?>
		</div>
	</div>
</div>
<!--[if lt IE 8.0]></div><![endif]-->
<script type="text/javascript">

	var appVersion = window.navigator.appVersion.toLowerCase();

	if ( (appVersion.indexOf("msie 6.0") > -1) || (appVersion.indexOf("msie 7.0") > -1) ) {
	} else {

		function postSize(e){
			var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
			if (typeof target != "undefined" && document.body.scrollHeight)
			target.postMessage(document.getElementById("foo").scrollHeight, "*");
		}

		try{
			window.addEventListener("load", postSize, false);
		}catch(e){
			window.attachEvent("onload",postSize);// IE
		}

	}
</script>
</body>
</html>

●参考にさせていただたサイト
・幅可変な画像ブロックをtable無しで作る
url http://gyauza.egoism.jp/clip/archives/2007/05/070512-image-block/

・window.postMessage() を使って、クロスドメインの iframe の高さを設定する検証
url http://d.hatena.ne.jp/bannyan/20090820/1250789189

Google検索 – link rel=”canonical” の指定で効果が驚くほど激減【SEO対策】

内容の酷似したコンテンツが複数あった場合、一番元となるコンテンツはどれなんだと明示することができる rel=”canonical”(カノニカル属性) ですが、こいつはとんでもない力を持っています。(※canonicalの設定は、コピーしたコンテンツのヘッダーに rel=”canonical”(カノニカル属性)  リンクを追加します。)

http://accentplus.blog134.fc2.com/ に

<link rel="canonical" href="http://asobicocoro.com/tips/">

を指定したところ…

翌日からブログのキーワード検索数は一気に激減。Google恐るべし。

GoogleAnalyticsの効果
※画像をクリックで拡大

2011年11月17日に rel=”canonical”(カノニカル属性) を指定したのですが、

指定前の1日あたりの流入は平均200前後。
指定してからはみるみる流入が減り、設定を解除するときには20まで落ち込みました。

技術ブログなので、流入のほとんどが検索キーワードに依存していた為、ホント恐ろしい程の効果となりました。

rel=”canonical”の指定はGoogleさんはしっかり見てくれているみたいなので、皆さんも設定するときは、最新の注意を払って対応しましょう。

Amazon EC2を使ったLAMP環境構築の勉強会をやりました

Amazon EC2は使った分だけお金を払うシステムなので、テストや勉強をするには持ってこい。
(一般に公開しなければ、月間300円とか)

WEBデザイナーやコーダーだって、LAMP環境の構築は出来たほうがいいだろうと勉強会を開催しました。

一つ一つの単語の意味やコマンドを覚えてもらうのではなく、
一人でLAMP環境を構築できるようになることが勉強会のゴールだったので、デモ中心の講義でした。

単語集の意味はイメージをつかんでもらうだけのもので、解説がひどすぎてすみません。

もし良かったら資料とかカスタマイズして使ってください。

【今回の勉強会で出てくる用語集】

※1 amazon ec2
レンタルサーバーの一つだと思っちゃっていい。
インスタンス(仮想サーバー)を好きなだけ作成できる。
料金は利用した分だけ支払う。

※2 putty
ターミナルエミュレータ。
ssh接続でサーバにアクセスができる。
winscpのコマンド打てる版。

※3 yum
様々なインストールパッケージが保管されている。
yumコマンドによりphpやmysqlをインストールする。
OSによってyumに入っているパッケージのバージョンが異なる。

※4 remi
yumより最先端を行くパーケージの集まり

※5 epel
remiを設定する為に必要

※6 phpmyadmin
mysqlを管理できるGUIツール。とっても便利。慣れると危険。

Slide 1
LAMP環境の構築 2011年12月15日 フォントはHGP創英角ゴシックUB 資料作成は昨日やりました
Slide 2
今回の勉強会でみんなが 目指すゴールは
Slide 3
EC2のアカウント登録して、あれやこれ (LAMP環境の構築)ができるようになること
Slide 4
勉強会の3箇条
Slide 5
1.受講者側も意見は活発に
Slide 6
2.相槌はいつもより大きめに
Slide 7
3.僕はわからない事だらけです。 逆に教えてください
Slide 8
今回、絶対覚えて帰ってもらいたいのが
Slide 9
1.EC2の設定方法
Slide 10
1.php mysqlの最新バージョンの インストール方法
Slide 11
この2点だけ!
Slide 12
では、早速いきましょう
Slide 13
1.今回の勉強会で出てくる用語集 2.ソフトウェア等の事前準備 3.練習用にEC2の契約 4.LAMPのインストール 5.Wordpressのインストール 6.質疑応答/ディスリスペクト
Slide 14
1.今回の勉強会で出てくる用語集 手元の資料を参考
Slide 15
2.ソフトウェア等の事前準備 puttyのインストール winscpのインストール ダウンロードしておいてください
Slide 16
3.練習用にEC2の契約 http://aws.amazon.com/jp/ec2/
Slide 17
amazon ec2申し込み参考 h​t​t​p​:​/​/​w​w​w​.​s​t​u​d​i​o​-​f​i​x​.​c​o​m​/​b​l​o​g​/​k​a​o​r​u​/​2​0​0​9​/​0​3​/​2​9​/​p​o​s​t​1​5​2​/
Slide 18
抑えておきたいキーポイント 使うサービス:Amazon EC2 Region: Asia Pacific(Tokyo) Instances :OSの立ち上げ Security Groups :アクセスの許可 Key Pairs :SSH接続を許可する秘密キーの発行
Slide 19
インスタンス作成 h​t​t​p​:​/​/​t​m​.​r​o​o​t​-​n​.​c​o​m​/​s​e​r​v​i​c​e​s​:​a​w​s​:​e​c​2​:​s​e​t​u​p​_​i​n​s​t​a​n​c​e
Slide 20
puttygemでppmファイルからppkを作成 h​t​t​p​:​/​/​w​w​w​.​i​p​e​n​t​e​c​.​c​o​m​/​d​o​c​u​m​e​n​t​/​d​o​c​u​m​e​n​t​.​a​s​p​x​?​p​a​g​e​=​a​m​a​z​o​n​-​e​c​2​-​c​o​n​n​e​c​t​-​s​e​r​v​e​r​-​w​i​t​h​-​s​s​h​&​a​m​p​;​c​u​l​t​u​r​e​=​j​a​-​j​p
Slide 21
Public DNS がホスト名 ユーザー root パスワード なし
Slide 22
4.LAMPのインストール
Slide 23
Puttyを立ち上げろ!
Slide 24
インストール手順のまとめ h​t​t​p​:​/​/​a​s​o​b​i​c​o​c​o​r​o​.​c​o​m​/​t​i​p​s​/​?​p​=​8​2
Slide 25
抑えておきたいキーポイント yum: インストールコマンド remi:最新バージョンのphpをインストールする為 phpmyadmin:DB管理ツール
Slide 26
5.Wordpressのインストール
Slide 27
ファイルダウンロード http://ja.wordpress.org/
Slide 28
抑えておきたいキーポイント Wp-config.php: WordPress管理画面の設定ファイル DB_NAME:phpmyadminで作成しとく DB_USER:root DB_PASSWORD:設定したパスワード
Slide 29
6.質疑応答/ディスリスペクト

パワポのスライドショーをブログに掲載する方法は下記サイトが参考になりました。

●手持ちのプレゼン資料をWebで公開したい時に便利な4つのWebサービス
http://maka-veli.com/web-presentation.html

フォトショップ(photoshop)のWeb用に保存でカラーの減色を繰り返し処理【カラー:カスタム→知覚的】

画像のファイルサイズを減らす必要があり、

まずはweb用に保存で png24ビット の画像を png8 ビット にして画像の圧縮を試みた。

大分ファイルサイズは減り 320k から 100k に。

それでもまだ容量が大きかったので

png8ビットの画像のカラーを 128 から 64 に変更し、

ファイルサイズは 100k から 50k に。

画像が100点以上あったので、アクションを保存し、上記処理をアクションに登録し、ドロップレットで保存して、一括処理したら。

なんと!

2枚目以降の画像のカラーがおっそろしいことに

変更前(アクションを登録した画像)
野菜画像1

変更後(アクションを登録した画像)
野菜画像2

変更前(2枚目)
野菜画像3

変更後(2枚目)

色々といじってみると

png24ビット→png8 は全然問題なく

カラー128→カラー64 が問題あるようだ。

どうやらアクション登録時に1枚目のカラーテーブルをそっくりそのまま保存しているようで、
2枚目の画像に1枚目のカラーテーブル(主に緑)が適用されてしまっているみたい。

回避する方法としてアクションを保存する際、

1.Web用に保存
2.カスタム になっているところを 視覚的 を選択(この操作で現在開いている画像のカラーテーブルを適用させる)
3.カラー128 を 64 に変更
4.保存

でアクションを登録すれば、開いている画像のカラーテーブルでカラーが128→64に減色される。

変更前(2枚目)
野菜画像5

変更後(2枚目)

フェイスブック(facebook)のコメントボックスをウインドウサイズに合わせて設置する【jQquer:innerWidth】

facebookのコメントボックスをウインドウサイズに合わせて設置する【jQquer:innerWidth】

<style>
#content
	{width:80%;}
</style>

<div id="content">
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.6");</script>
	<script type="text/javascript">
	$(function() {
		var b = $('div#content');
		var wid = b.innerWidth();
		document.getElementById('fb_like_mywidth').innerHTML = '<fb:like href="<?php the_permalink() ?>" width="' + wid + '" show_faces="true" font=""></fb:like>';
		document.getElementById('fb_comments_mywidth').innerHTML = '<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="2" data-width="' + wid + '"></div>';
	});
	</script>
	<div id="fb_like_mywidth"></div>
	<div id="fb_comments_mywidth"></div>
</div>

1.innerWidth()で指定した要素の横幅をpxで取得(wid)
2.横幅を指定する箇所に wid を代入

このブログでも適用しています。

javascriptのgetComputedStyleでも横幅を取得することができますが、ChromeやFirefoxでは「ウインドウサイズ*0.8」とpxで返してくれるんですが、IEではそのまんまCSSで指定した80%といった値が返ってきてしまいます。

例)
ウインドウサイズ 1000px
Chrome: style に返される値は800px
IE: style に返される値は80%

だからNGでした。

フォトショップ(photoshop)の繰り返し処理【アクション】【ドロップレット】

フォトショップで同じ動作の繰り返し処理を実行するときは、

1.処理をアクションで保存

2.アクションをドロップレットでexeファイル化

3.フォルダごとexeにドロップで、フォルダ内の全てのファイルに適用

と簡単に処理を繰り返すことができます。

1.画像の解像度を変更して保存
2.拡張子を変えて保存
3.自動レベル補正、自動コントラスト、自動カラー補正を適用して保存

様々な場面に応用できるので覚えておくためメモ。

やり方は下記サイトがとても参考になりました。
http://blog.mynet.co.jp/hirashima/2007/01/photoshop.html

フォトショップ(photoshop)驚くほど簡単に画像を綺麗にする【画像補正】

※画像をクリックすると拡大して表示できます。

こんな画像は、簡単に
補正前の画像

こんな風に綺麗にできます。
補正後の画像

これを覚えておくだけで、撮影に失敗した画像も蘇らせることができます。

1.画像をフォトショップで開きます
ステップ1

2.レイヤーをコピーします(背景のコピー) … 【1】
ステップ2

3.もう一度コピーします(背景のコピー2) … 【2】
ステップ3

4.【2】の描画モードをスクリーンにします … 【3】
ステップ4

5.明るさが足りなければ【3】をコピーします … 【4】
ステップ5

6.コピーして明るすぎたら、【4】の不透明度で明るさを調整します

7.ちょうどいい感じの明るさになったら【1】~【4】を全て選択し、[右クリック] -> [新規スマートオブジェクトに変換]
ステップ7

8.まだ編集したいので、新規スマートオブジェクトに変換したレイヤーを[右クリック] -> [レイヤーをラスタライズ]
ステップ8

9.[イメージ] -> [色調補正] -> [カラーバランス]を開き、好みのカラーに編集します。
※野菜は水々しくしたいので、グリーンを+50。たけのことかは、レッド+50などなど。
ステップ9

10.[イメージ] -> [色調補正] -> [色相・彩度]を開き、彩度で明るさの最終調整を行います。
※飛ぶぐらい爽やかな緑にしたかったので、彩度+20にしました。
ステップ10

完成です。
完成