ガドウェブ

Check

ガドウェブのファビコンをPhotoshopで作ったので作り方を紹介します。

ファビコン（favicon）とは、ブラウザのアドレスバーやブックマークしたときに表示される小さいアイコンのことです。
ほとんどのブラウザが対応しているので、ファビコンがあるとブックマークの一覧で見つけやすかったり、サイトのイメージも印象づけられるので是非とも奇麗なファビコンを表示したいですね。

ファビコンのファイルについてですが、「.ico」とう拡張子のファビコン専用ファイルです。画像編集ソフトなどで作成出来るのですが、この「.ico」というファイル型式に対応しているソフトがかなり少ないです。
ファビコン専用の作成ツールで作るか、jpegなどのファイルを変換ツールで変換して作ることが出来るのですが、画像編集機能が少なかったり変換が奇麗に出来なかったりと、美しいファビコンを作るのは難しいです。

そこで、今回紹介するのはPhotoshopで「.ico」ファイルを開いたり、保存したり出来るプラグインです。
画像編集機能の豊富なPhotoshopなら奇麗なファビコンが作れますし、透過などの処理も奇麗に行えます。

ICO (WINDOWS ICON) FORMAT

インストール方法

上記のサイトからダウンロードしたICOFormatのファイルをPhotoshopを起動していない状態で「Program File/Adobe/Adobe Photoshop CS*/Plug-ins/File Formats」に置いて（※インストールするOS、Photoshopのバージョンによって、フォルダ名、階層などが違う場合があります）Photoshopを起動するだけです。起動したらメニューのヘルプから「プラグインについて」を確認し、ICO(Windows Icon)Formatがあればインストール完了です。

ファビコンの作成、保存

ファビコンはブラウザで表示される時は16px四方での表示なので見やすさを考慮してオブジェクトは四方のいっぱいに配置した方が良いです。
表示は16px四方ですが、作業時は作業しにくいので広いカンバスで作って後から縮小しましょう。
ファビコンではアルファチャンネルを使用した透過も可能なので、Photoshopで作成の場合、背景を透明にしていれば透過されます。
デザインが済んだら32px四方に縮小し、保存します。
縮小は、メニューの「イメージ」から「画像解像度」を選択し、幅と高さを32pxに指定して縮小して下さい。また、縮小方法は「バイキュービック法-シャープ」が縮小にはお勧めです。
保存は、メニューの「ファイル」から「保存」を選択し、ファイル形式は「ICO Windows Icon」を選択して下さい。（保存しようとする画像の1辺が256pxを超えている場合は「ICO Windows Icon」の形式が一覧に出ません。）
そして、「favicon.ico」というファイル名で保存して下さい。

ファイルのアップロードと設定

先ほど保存した「favicon.ico」のファイルをサーバーにアップロードしたら、ファビコンを表示したいhtmlファイルのhead要素に以下のlink要素のコードを追加して下さい。

<link rel="shortcut icon" type="image/x-icon" href="favicon.icoのURL" />

WordPressで簡単にファビコンを表示出来るプラグイン

Favicon Manager

Digital Ramble » Favicon Manager WordPress Plugin

テーマのhead内に直接先ほどのコードを書き込んでも良いのですが、テーマを変更した場合などに書き直す手間が省けるのでプラグインを使うのも便利です。

Check

WordPressにはフリーで使用できるテーマがたくさんありますが、配布されているテーマは汎用的に作られている場合が多いので、
少しカスタマイズしたいと思うことがあると思います。（改変が禁止されているフリーのテーマもあるので、注意）

カスタマイズする時、一部の要素を削除したい場合、コメントアウトを使うことが多いと思いますが、この際注意が必要です。

・HTMLコメントでのコメントアウトは危険

1

<!--<?php the_date(); ?>-->

上記で日付をコメントアウトで表示させないコードになっているのですが、問題点はソースコードを見られると内容が見えてしまうのと、
the_date()の出力にHTMLコメントアウトが含まれる場合があるということです。
HTMLコメントアウトは入れ子構造で記述できませんので、表示がくずれてしまいます。

ですので、コメントアウトしたい場合はif文を使うのが適当です。

1
2
3

<?php if(0) { ?>
この部分は出力しない
<?php } ?>

上記のように記述すれば、コメントアウトできます。
PHPコメントアウトの「//」を使ってもいいですが、<div>や<span>で要素を囲んでいる場合も多いので、複数行をまとめてコメントアウトしてしまえるif文でのコメントアウトが一番確実だと思います。

Check

というわけで、WordPressでブログつくりました。

ちょっといろいろ情報発信してみたくなったのと、Twitterでは情報が流れていってしまうので、備忘録的なものがほしいと思ってブログにしました。
あと、WordPressを細かくいじってみたかったので。

とりあえず、必須っぽいプラグインをつっこんで立ち上げましたが、オリジナルのテーマも作成中なので
テーマ作成についての内容なども随時アップしていきたいと思います。