サイト制作の豆知識

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の特殊文字（&nbsp；　等）が一覧でまとめられたサイト。ついつい忘れちゃうので、今でも参考にしてます

●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

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

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への投稿や口コミが起因している可能性大。

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）画像を開きます。

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

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

これで完了です。

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

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

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

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

を指定したところ…

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

※画像をクリックで拡大

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

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

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

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

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

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

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

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

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

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

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

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

なんと！

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

変更前（アクションを登録した画像）

変更後（アクションを登録した画像）

変更前（2枚目）

変更後（2枚目）

色々といじってみると

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

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

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

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

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

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

変更前（2枚目）

変更後（2枚目）

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でした。

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

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

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

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

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

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

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

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

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

こんな画像は、簡単に

こんな風に綺麗にできます。

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

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

2.レイヤーをコピーします（背景のコピー）　…　【1】

3.もう一度コピーします（背景のコピー2）　…　【2】

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

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

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

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

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

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

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

完成です。