<仙台高専広瀬アドベントカレンダー><html>webサイトのアイコン作ろう
はじめに
このエントリは仙台高専広瀬アドベントカレンダー14日目の記事です。
webサイトのアイコン作ろう
やりたいこと
webサイト開くとアイコンってあるじゃないですか。 あるとないとで極端に変わるかって言われるとそこまでではないんですけどあったほうが、良さげな感じあるじゃないですか。うん それをやります。
目次
- 使うソフトウェア
- アイコンを作ろう
2.1 アイコンの元画像を作ろう
2.2 アイコンとして出力しよう - 実際のサイトに反映しよう
3.1 タブのところにアイコンが出るようにしよう
3.2 (iPhone向け)ショートカットのアイコンを指定しよう
1.使うソフトウェア
まずは何を使うか簡単に書きます。 このブログは基本的にMacユーザーなのでmacを使ってやります。 多分windowsでも同等の動きをするものはいっぱいあるんで全体の流れは共通で、個々のソフトウェアについては対応するものと使い分けていけばいいのかなと思ってます。
- 元画像作成
- アイコン出力
- プレビュー
特に特別なのを使わなくてもある程度の作れます。 実際に作ってみましょう
2.アイコンを作ろう
アイコンを作ります。元になる画像を作るところと実際にicon形式にしていく2つの段階に分けていきます。
2.1 アイコンの元画像を作ろう
まずはKeynoteを開きます。
テーマ選択画面ではテキトーなテーマ選びます。
blackかwhiteにすると一番いい気がします。
それ以外でできないわけではないですが、準備がめんどくさくなります。
2.1.1 スライドの設定
作る前準備です。
最初に開くとこのような画面です。
背景は塗りつぶしなし(透過)しておきます。
そして、スライドの形を変えます。
ここで、サイズを1:1にします。
今回は1024×1024(pt)にしました。
ここからは実際にアイコンを作成していきます。
2.1.2 実際のアイコンを作ろう
まずは大枠を作ります。
図形の"角丸四角形"を挿入します。
そして、大きさの調整をします。
パラメータはこんな感じ
後は、中身を入れてきます。
今回は夏に作ったMoney slicerに使うアイコンを作ります。
ここの作るところはオリジナルでいろいろやってください。
角丸四角形の中に収まれば特にルールとかはないと思ってます。
で、今回できたのがこんな感じ
"ファイル"、"書き出す"の"イメージ"を選んでpng形式出力をします。
2.2 アイコンとして出力しよう
ここまでに作成したpng画像をプレビューで開きます。
開いたら"マークアップ"をクリックします。
//ここはしなくてもいいかも
最初に"ツール"、"サイズ調整"を開きます。
ここで、実際に使うようの大きさに調整します。
64×64でやるとショートカット用にも使えるので今回はそれで吐き出しときます。
で、"ファイル"の"書き出し"を開きます。
そうすると出力用のダイアログが開かれるのですが、ここで"alt(option)"を押しながら形式を選ぶとデフォルトより多くの形式が選べるようになります。
3. 実際のサイトに反映しよう
3.1 タブのところにアイコンが出るようにしよう
3.1.1 htmlの記述を追加しよう
まずはサイトのソースに記述を追加します。 こんな感じのことを追加します。
<link rel="shortcut icon" href="/iconのパス" type="image/vnd.microsoft.icon">
サイトのアイコンはMSの形式らしいのでそこの定義の記述もします。
3.1.2 アイコンを配置しよう
上で記述したパスのところにアイコンのファイルを置きます。
そこまでやった上でブラウザで開くとこんな感じでiconが適用されます。
3.2 (iPhone向け)ショートカットのアイコンを指定しよう
3.2.1 htmlの記述を追加しよう
前述のコードに追加でできるかと思ったんですけどtypeが効いてるおかげでできないので以下の記述を追加します
<link rel="apple-touch-icon" href="/iconのパス" />
これをやったら完成です。
3.2.2 実際に確かめよう
ホームに追加してみます。
