wordpressでsnsシェアボタンを簡単に配置する「ShareButtonsByAddThis」プラグイン。
プラグイン新規追加で「Share Buttons By AddThis」を検索、インストール後有効化。
アイコンサイズを選択して、設定保存。ページ下部にSNSアイコンボタンが出来るのでシェアできる。

2014-11-05

レスポンシブサイトを設計補助のサイト

webサービス

This is Responsive

レスポンシブサイトの様々なパターンを表示。
複数カラムや表組み、レイアウトフレームを確認出来る。

Respinsivator

入力したURLのサイトの複数のレイアウトサイズを一括でチェックできる。

2014-11-04

エンペローブ

illustrator

エンペロープとは

エンペローブとは"はめ込むオブジェクト"を"型どりするオブジェクト"のパスの角度や曲線に沿ったデザインに整形してくれます。

1,多角形のオブジェクトの形に添うように文字(アウトライン済み)をはめ込みます。

2,型どりする多角形オブジェを最前面に配置し、オブジェクト→エンペロープ→最前面のオブジェクトで作成（cmd+option+c)。

3,整形ができたら、好みの配色で完成。

応用ｰパッケージデザイン

1,前後左右天地の面を平面時にデザイン。続けて立体のオブジェクトを別に用意。

2,配置箇所にそったオブジェクト同士を選択し、オブジェクト→エンペロープ→最前面のオブジェクトで作成。

3,前後と側面はイメージにそうデザインになるが、天面は画像がずれる場合がある。

型どりするオブジェクトの角度を調整するか、平面デザインのオブジェクトを直接、自由変形やシアーツールなどで
立体的にあわせる。

2014-11-03

クラス定数

PHP オブジェクト指向

2014-11-01

インライン画像-画像読み込み速度の高速化-

雑記

インライン画像とは通常の「img src="画像ファイルのパス"」でHTMLリクエストを発生、画像を読み込ませることで
通信速度が遅くなる原因を、画像ファイルのバイナリーデータをBase64 エンコードした文字列にすることでデータの遅延を防ぐことができる。

base64 エンコードの方法

PHPの場合

base64_encode()を使用

<?php
$img = base64_encode(file_get_contents("パス/ファイル名"));
?>
<img src="data:image/gif;base64,<?php echo $img; ?>">

compassの場合

「url」となる部分を「inline-image」に変える

セレクタ{
    background-image: inline-image("パス/ファイル名");
}

webサービスの場合

"base64 画像変換"で検索すれば、プラウザ上で変換できるものが結構あります。

出力方法

 <img src="data:image/png;base64,iVBORw0KGgoAAAANS...(中略)">

実際の読み込み速度の比較。

「Pingdom Website Speed Test」でURLを入力して読み込み方法の異なる2つのサイトを通信速度を比較

画像ファイル読み込みの場合

インライン画像(base64読み込みの場合

結果

ページのグレード(Perf. grade)やロードタイム(Load time)などでインライン画像の方が最適な結果と成った。
これはcssファイルからimgファイルへリクエストが発生せずに、cssファイルの中だけで処理できる為。
ただ、画像ファイルよりも容量が大きくなっているがcssファイルをgzipで圧縮することで軽減できる。

1,下地グラデーション設定

2、雲の追加

3,雲の立体感や奥行きを追加。

4,色調補正でできあがり。

文字設定