日別アーカイブ: 2018-02-08

サイトの構築:シンボルマーク作成

ブログを始めてから早いもので一年半が経とうとしています。
内容の乏しさは相変わらずですが、投稿数だけは増えているような状況です。

ところで、このブログはレンタルサーバ(さくらインターネット)にWordPressをインストールして運用しているのですが、WordPressを含めほとんどをデフォルト設定のまま使っています。
このため、閲覧し辛かったり、全体的に野暮ったい感じのサイトになっているかと思います。
とは言え、閲覧しやすく、しかも洒落たサイトを作れるようなセンスも能力もありません。
とりあえず時間をかけて少しづつ改良していくことにして今回、手始めにサイトのシンボルマークを作って登録することにします。

ブラウザを使ってウェブサイトを閲覧していると、サイトによっては下画像のようにサイト名の前にアイコンが付いているものがあります。

調べてみると、このアイコンのことをファビコン(favicon)と呼ぶそうです。
そして、こうした用途にはサイズが32px(ピクセル)四方の画像ファイル(ICO形式)を用意し、サーバに保存すれば良いようです。
手間はかかりそうですが、ファビコンのもとになるシンボルマークさえ作ることができれば、あとは何とかなりそうです。

と言うことで、サイトのシンボルマークを検討。
ブログのテーマである「里山&古民家再生」をイメージできるもの。
サイトのトップ画像のように竹をモチーフにしたものはどうかと思い、門松のようなものを描いてみるものの、32px四方のサイズでは画像が潰れてしまって何がなんだか・・・。
相当、単純なデザインにする必要がありそうなことから、竹の断面をイメージして描いたものが下図です。

緑色の部分が竹の表層で、黄色が内層部分を表しています。
実際の竹の断面では緑色の部分(竹の表層)がほんの小さな幅の線になってしまいますので、青竹をイメージしやすいようにデフォルメしています。
昨年、ボイラーの導入に伴いパイプを扱う機会が多かったせいか、スケールが付着したパイプの断面にも見えてしまうのですが、まあ私のセンスではこれ以上は望むべくもなく、これで決定。

ちなみに、竹と言えばサイトのドメイン名(独自取得)も竹に関連したものにしています。

ローマ字読みで「イモクシ」となりますが、これは当地で真竹のことを「イモクシ」と呼ぶことから名付けました。

閑話休題

作成したシンボルマークをファビコンにするため、ファイル形式をICOに変換したうえ、サイズを32px四方に縮小します。


(ICO形式では直接表示できないためPNG形式のものを貼り付けてあります。)

続いて、この画像ファイルをサーバに転送し(sftp使用)、WordPressのヘッダーファイル(wp-content/themes/twentythirteen/header.php)に下記を追記します。


<link rel="SHORTCUT ICON" href="https://satoyama.imokushi.com/favicon.ico" />

ブラウザを開いてサイトを表示させてみると、サイト名の前にファビコンが表示されるようになりました。

ブックマークも同様です。

このように一覧表示した場合にファイビコンがあると見分けやすいため、多少は利便性が上がるのかもしれませんね。