WordPressでretina対応のファビコンを設定いたしました!

キャプチャ
Pocket

今頃ですが、このブログにはちゃんとしたファビコンがないことに気づきました。

 

ファビコンとは、サイトを開いたときに、タブの隅っこに表示されたりするこんな画像のことなのですが。

ファビコン

 

小さいながらも、やっぱり自分のブログだからしっかりと作っておきたいんです。

ただ、最近は高画質ディスプレイがバンバン登場してるから、それにも対応させないといけないのよね。

 

マルチサイズico画像の作成

今まで、というかretinaディスプレイが登場する前までは、16×16の画像を用意するだけで事足りました。

世界にあったほとんどのディスプレイとブラウザが、それで十分だったのです。

 

しかし、技術の進化によってもはや16×16では汚すぎ、小さすぎで、とうとう新しいファビコンが必要になってきました。

 

そこで、マルチサイズのico画像を作ります。

 

ファビコンは基本的にicoという画像形式を使いますが、なんとこの形式には複数のサイズの画像を含めることができちゃうんですね。

そこで、いろいろなサイズの画像を作成して、それをまとめて一つのファビコンにします。

 

Bradicon!を使う

自分で多くのサイズを作るのは面倒なので、Bradicon!というサイトを使います。

 

正方形の画像を用意して、アップロードすると、自動的にさまざまなサイズの画像を作成してくれます。

 

favicon1

ファイルを選択し、下のほうのでっかい箱を押すとicoが出来上がるので、真ん中に出てきた画像を押すとダウンロードできます。

 

これで、ファイルの準備は完了です。

 

プラグインでicoを設定

次に、画像をファビコンに設定しないといけません。

 

WordPressのプラグインの検索画面でFavicon Rotatorを検索し、インストールします。

 

するとサイドバーにFaviconのメニューが出るので、クリック。

bar

 

画像をアイコンに設定します。

seticon

 

これで、完了です。

 

キャプチャ

 

 

この青色がいいね。

 

 

Pocket

CSSの基礎講座・ボックスレイアウトとボーダーを使ったデザイン

box-raiout
Pocket

目次

1.ブロック要素とインライン要素
2.ボックスのサイズ
3.ボーダーとボックスサイズ

CSSでレイアウトするときには、ブロック要素とインライン要素の概念を理解して、適切に使い分けないといけません。

逆に、この組み合わせがうまくできないことにはWEBデザインなんてできませんね。

1.ブロック要素とインライン要素

HTMLに定義されている要素のうち、ほとんどがインライン要素とボックス要素に大別される。

文字どおり、ブロック要素は箱のような、インライン要素は行のような働きを定義されていて、文中にはインライン要素を使い、その装飾や外枠にはブロック要素を使用する。

この二つの要素には決定的な違いがある。

インライン要素

p,h1~h6(見出し),ul,ol,dl,table,hr,div,form,blockquoteなど

インライン要素

img,a,strong,br,spanなど

ブロック要素は高さを指定することができ、自動的に要素の終わりには改行される。

インライン要素は、高さを自由に設定できず、自動的に文章内部へ流れ込むのだ。

1.1ボックス要素のマージン・ボーダー・パディング

ブロック

ブロック要素は

  • 内側の余白(パディング)
  • コンテンツ
  • ボーダー
  • 外側の余白(マージン)

でできている。

ブロック要素の高さを指定した場合、通常はボーダーの内側のサイズが基準となる。

ただ、普通に高さを指定すると、ボーダーやマージンのサイズがはみ出てしまうので、レイアウトがしにくいことがあります。

そのときは、box-sizingプロパティを使うと、マージンも含めてサイジングできます。

box-sizing:border-box;

1.2インライン要素の書式

インライン要素は、ブロック要素の文中の一部分にだけ、装飾や意味づけを行う書式であります。

あくまでインライン要素は行の一部として扱われるので、要素の前後には改行が入りません

また、親の要素に対して広がりを持たないため、サイズとマージンを指定することはできません

ただ、img,textarea,input要素だけはマージン、パディング、サイズを指定できます。

デモ

<p style="display: inline; background-color: #3498db;">インライン要素</p>
<p style="display: inline; background-color: #f1c40f;">インライン要素</p>

インライン要素

インライン要素

上のようにインライン要素は改行されず、文字の幅と高さしかありません。

1.3インライン要素のブロック化

ただ、インライン要素であってもブロック要素のように幅や高さを指定したいときは山ほどあります。

そういう時は、インライン要素をブロック化することで、ブロック要素のように扱うことができます。

デモ

<p style="display: block; ;background-color: #3498db; width: 200px; height: 200px;">
インライン要素のブロック化
</p>

インライン要素のブロック化

pタグは通常はインライン要素ですが、display:blockにすることによって、高さや幅を指定することができます。

aタグをブロック化して、リンクのクリッカブルエリアを親要素いっぱいに広げることで、使いやすいUIを実現できたりします。

2.ボックスのサイズ

CSSでのレイアウトでは、ボックスの概念が重要となる。すべての要素はボックスという領域を持っていて、これをうまく配置することできれいなwebデザインが実現する。

基本的なボックスのレイアウトをしっかりと押さえておきましょう。

2.1min-height,height,max-height

ボックスの幅、高さの設定には、通常三種類の方法がある。

min-height,height,max-heightとmin-width,width,max-widthである。

もっともつかわれるのは、heightとwidthで、普通にpxやemなどの単位を用いて大きさを指定します。

max-とmin-は文字通り、幅や高さの最大値や最小値を指定できます。

中に含まれる要素の大きさがmax-で指定されたサイズより大きくても、max-のサイズを超えることはありません。

また、中に含まれる要素の大きさがmin-で指定されたサイズより小さくても、min-のサイズを下回ることはありません。

デモ

<div style="background-color:#3498db;max-height:100px;width:200px">
<p>max-height=100px max-height=100px max-height=100px max-height=100px max-height=100px </p>
</div>

max-height=100px max-height=100px max-height=100px max-height=100px max-height=100px

<div style="background-color:#3498db;min-height:200px;width:200px">
<p>min-height=200px min-height=200px min-height=200px min-height=200px min-height=200px </p>
</div>

min-height=200px min-height=200px min-height=200px min-height=200px min-height=200px

2.2overflowによるはみ出した要素の処理

ブロック要素の中に既述したインライン要素が大きすぎて、親要素からはみ出ることがあります。

その時に、はみ出た分の要素を親要素の中できっちりおさめたり、はみ出た文をカットしたりと処理を決めるのが、overflowです。

overgflowプロパティには三種類あります。

  • visible
  • はみ出した要素が親要素からはみ出して表示されます。初期値はこのvisibleで、ほかの値を指定しない場合これになります。

  • scroll
  • はみ出した要素が親要素の中に納まり、入りきらない内容はスクロールして見れるようになります。

  • hidden
  • はみ出した要素は、親要素のサイズで切り抜かれ、はみ出た分は表示されません。

  • auto
  • ブラウザによって処理が異なります。あまり使われません。

デモ

  • css
.visible {color:#000;background-color:#3498db;width:200px; height:60px; overflow:visible;}
.scroll {color:#000;background-color:#3498db;width:200px; height:60px; overflow:scroll;}
.hidden {color:#000;background-color:#3498db;width:200px; height:60px; overflow:hidden;}
.auto {color:#000;background-color:#3498db;width:200px; height:60px; overflow:auto;}
  • html
<p class="visible">
<strong>visible</strong><br>はみ出した要素が親要素からはみ出して表示されます。初期値はこのvisibleで、ほかの値を指定しない場合これになります。
</p>
<p class="scroll">
<strong>scroll</strong><br>はみ出した要素が親要素の中に納まり、入りきらない内容はスクロールして見れるようになります。
</p>
<p class="hidden">
<strong>hidden</strong><br>はみ出した要素は、親要素のサイズで切り抜かれ、はみ出た分は表示されません。
</p>
<p class="auto">
<strong>auto</strong><br>ブラウザによって処理が異なります。あまり使われません。
</p>
  • 結果


visible
はみ出した要素が親要素からはみ出して表示されます。初期値はこのvisibleで、ほかの値を指定しない場合これになります。


scroll
はみ出した要素が親要素の中に納まり、入りきらない内容はスクロールして見れるようになります。


hidden
はみ出した要素は、親要素のサイズで切り抜かれ、はみ出た分は表示されません。

auto
ブラウザによって処理が異なります。あまり使われません。

3 ボーダーとボックスサイズ

ボックスの装飾に欠かせないボーダーですが、その種類は様々で、種類によってはデザインは良くも悪くもなります。
また、ボックスサイズにも影響を与えます。

3.1 ボーダーの種類と指定方法

border

ボーダーは、太さ、種類、色の3つの要素で成り立っています。

  • 太さ

    px,em,exなど

  • 種類

    solid(実線),dashed(破線),dotted(点線),double(二重線)

  • #000,white,blue,rgb(25,25,25)など

また、枠線はボックスの上辺、右辺、左辺、下辺それぞれを設定できますし、まとめて設定することもできます。

//上辺
border-top:1px solid #000;
//右辺
border-right:1px solid #000;
//下辺
border-bottom:1px solid #000;
//左辺
border-left:1px solid #000;
//まとめて
border:1px solid #000;
Pocket

今話題のレスポンシブデザインでスマホに対応したサイトにする方法

responsive
Pocket

レスポンシブデザインは、PCとスマホでwebサイトの見た目を変更することでwebサイトをスマホに対応させる手法ですが、面倒くさそうで実装してない人も多いでしょう。

 

このブログもスマホに対応していますが、やはりスマホでのアクセスが全体の4割を占めるという今の世界で、これは必須でしょう。

 

ここでは、レスポンシブデザインの制作方法と、Viewport、mediaqueryについて説明しよう。

 

Viewport

スマートフォンで一般的なPCサイトを見ようとすると、原則的に横幅980pxで全体を表示する設定になっている。

 

これはiPhoneでも多くのandroid端末でもおんなじで、大きく縮小されて表示されるため、とても見にくくなる。

responsive-1

 

こんな表示のサイトを見てくれるユーザーなんてそういないですよね。

 

少なくとも縮小ではなく、原寸サイズでwebサイトは見たいものです。

 

こんな感じで、端末で決められている表示設定をViewportといいます。

 

そこで、最初から縮小されて表示されないように、Viewportの設定をしておきます。

 

 

 

device-width

 

それぞれ端末のディスプレイは、まず横幅のピクセル数でよくあらわされる。

 

1080×1920など、これが商品説明などで一番目にする表示だろう。

 

そして、高解像度になるほど、1pxが物理的に小さくなってしまうので、端末の2×2=4pxを使って1pxを表示したり、3×3=9pxを使って1pxを

表示できるようになる。

 

この比をピクセル解像度や、デバイス・ピクセル比なんて言ったりする。

 

device-widthは実際の横幅のピクセル数/ピクセル解像度で表される。

 

スマートフォンだと、だいたい320pxから360px程度になる。

 

そこで、このdevice-widthでサイトを表示すれば、縮小表示にはならないので、これを適用したのが…

 

viewportの設定

<meta name=”viewport” content=”width = device-width”>

これで、画面幅にdevice-widthを代入しました。

 

これで表示は解決です。

 

次は、PCとスマホで表示を変える方法を説明します。

 

メディアクエリー

pcとスマホで別のCSSを用意し、振り分ける方法というのが昔は主流だったが、読み込み時間などの面で近頃は使われていない。

 

ひとつのCSSのなかで、スマホとPCのCSSを両方記述してしまうのが一般的だ。

 

PCとスマホのCSS振り分けは先ほどの画面幅で行う。

@media screen and (max-width: 360px) { 
  #wrapper {width:98%;} //スマートフォンのみに適用する部分 
}

 

上の場合、横幅が360px以下の端末の場合、{}で囲まれた部分のCSSを適用するということだ。

 

この{}は通常のCSSより優先される。

 

この、CSSの変わり目をブレークポイントなんて言ったりする。

 

通常、ブレークポイントは2つほどでいい。

 

スマホ、タブレット、PCの3つに対応させる。

 

通常タブレットの横幅は768pxのため、320pxと768pxでメディアクエリーを使うといい。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>メディアクエリー デモ</title>
<meta name="viewport" content="width=device-width">
<style>
/*すべてに適用されるスタイル*/
article {
	width:400px;
	background-color:#6CF;
	text-align:center;
	margin:auto;
	height:600px;
}

@media screen and (max-width:640px) {
	article {
	width:100%;
	background-color:#933;
	text-align:center;
}
}

</style>
</head>
<article>
<p>article</p>
</article>
<body>
</body>
</html>

ブレークポイントを640pxにし、背景色と配置が変わるように設定しました。

 

 

今回はCSSもHTMLに既述したが、もちろんCSSに書いてもよい。

 

スマホ対応は大切

さっきも言ったけど、webサイト訪問の4割はスマホやタブレットなどの端末からだということで、そこからわざわざ見に来てくれる人に見にくいデザインを見せるのではアクセスも減ってしまいますよね。

 

すこし頭がこんがりそうですが、あきらめずに一度やってみるといいと思います。

Pocket

Photoshopのいまさら聞けない超基礎知識・主な6つの保存形式編

psd
Pocket

webデザインとかフォトグラファーの人なら必ず使うPhotoshopですが、プロ向けソフトなため画像の保存形式一つとっても豊富な種類があります。

一度、振り返って、それぞれのデータにあった保存方法を考えてみましょう。

 

【PSD】・もっともフォトショで使うかも

フォトショの標準の保存形式はPSD。

 

フォトショで編集したレイヤーや画像処理をすべて一括に保存できて、何回繰り返し保存しても劣化することがない。

 

最後の画像出力の時以外はこれで保存するのが一般的だが、ファイルサイズがレイヤー数や画像処理に伴って大きくなってしまう。

 

【TIFF】・汎用性が高い

tiffは、ほとんどすべてのアプリで使用できる、とても汎用性の高い形式である。

 

レイヤー情報も保存できるが、PSDよりもファイルサイズが大きくあなりやすい。

 

また、画像も圧縮されないので、繰り返し保存も可能である。

【EPS】・印刷向きデータ

EPSは印刷するためのデータ形式。

 

データを入稿するときは、これが一番多い。

 

もちろん、印刷んときのカラーモードはCMYKで。

【JPEG】・言わずと知れたweb向け画像

全世界で一番つかわれている画像形式といっても過言ではないのじゃないのでしょうか。

 

基本的にデータを軽くするために圧縮されている。

 

圧縮率は保存の際に指定できるが、もちろん画質を上げるとサイズが大きくなる。

【GIF】・超小容量

主にweb上で使われているGIF。

 

最大色が256色と、決して多くないため、単純なイラストやグラデーションに向いていて、容量も小さくなる。

 

また、指定した色を透明にし、背景を有効に使うこともできる。

【PNG】・透過が魅力的

こっちらもGIFと同じように透過させることができるが、フルカラー対応なので、写真でも利用可能だ。

 

GIFに比べて圧縮性能が高く、ファイルサイズも小さくなりがちだ。

まとめ

画像の保存形式一つにいてもたくさんあり、うまく使い分けることで、画像の質やファイルサイズをうまく管理できるようになる。

 

プロを目指すなら、絶対に覚えた方がいいでしょう。

Pocket