2024年1月20日

オフィスを使ったファビコン用背面透過画像の作成

宮島の対岸から瀬戸内海を望む
宮島の対岸から瀬戸内海を望む



相変わらず,宮島の対岸から望む瀬戸内海は静かで美しいです。世界がいつもこんなに穏やかだったらと思います。

さて,前回はSEO対策ソフトについて概要を学習しました。Google検索エンジンでは「Google Serach Console」,Microsoft bing検索エンジンでは「bing Webmaster tool」になります。

実際のところ,Webサイトやブログが,これらの検索エンジンにインデックス化されるかは,サイトやブログを作るソフトによっても大きく左右され,やってみなければわからない処が沢山あります。

これは,裁量権が全て検索エンジン側の大規模IT企業にあるためで,ユーザ側で対応できることは精々クローラーにインデックス登録してもらうよう申請して,神頼みするぐらいです。

あるいは,ブログやサイトの価値を高めろと,検索エンジン側やSEO専門家から言われるようにコンテンツに磨きをかけるしかありません。

無料で使っているので仕方ありませんが,世界的IT企業のデファクトスタンダード戦略に驚きつつ,その仕組みを使わざるを得ない自分を嘆きながら,今日も試行錯誤する日々が続きます。

また,検索エンジンによる検索結果を見ていると,ファビコンと言われるアイコンが表示されます。ファビコンとは「favorite icon」の略で,自分のオリジナリティブランドを示せる唯一の方法です。

今回は,このファビコンについて,オフィスソフトを使った安価なファビコン用の背面透過画像の作成について学習します。

それでは,学習を始めます。

目 次


  ファビコンとは


ファビコンは,Webブラウザのタブやブックマークなどに表示されるWebサイトのシンボルアイコンです。一般に,「favicon.ico」というファイルでWebサイトのドキュメントルート下に置かれます。

このファビコン(favicon)の作り方ですが,まず元となる画像を作る必要があります。これには『Photoshop』や『Illustrator』などの著名な画像編集ソフトや,『Canva』などのブラウザ型の画像編集ソフトを用いる事が多いです。

著名な画像編集ソフトはお高いですが,ブラウザ型の画像編集ソフトは無料のものも多くあります。

ファビコンは,そんなに多く作るものではないし,将来的には専門家に作ってもらうと考えると,マイクロソフトのオフィスソフトで作るのも1案です。

ただ,その場合,困るのが背景透過型で縦横同サイズの画像を作らなければならない処です。

先ほどのブラウザ型画像編集ソフトを使えば簡単ですが,今回はあえてオフィスで作ってみます。

使うソフトは,WordかExcelまたはPowerPointです。ファビコンの図形サイズは,Google検索エンジンでは48×48の倍数が推奨されていますが,この点はマイクソフトのbing検索エンジンでは違うようです。(定かではありませんが)

とりあえず,ファビコンには16×16 32×32 48×48 64×64 96×96 128×128 256×256の各サイズがありますので,とりあえず16の倍数の256×256ピクセル位の画像を作ります。


  Word,Excelを使って背面透過画像を作る


Word2019やExcel2019を使って文字と図形の画像を作ります。サイズは,後で修整しますので,50㎜四方程の画像で良いと思います。正方形であることが大切です。

背面透過画像の作成過程1
背面透過画像の作成過程1

WordやExcelを使い慣れた方は簡単ですね。次はこの図形を取り出します。ところが,この図形を選択して右クリックしても,「図として保存」というメニュー項目が出て来ません。

WordとExcelの場合は,画像であれば出てきますので,この図形をコピーして画面に「画像」として貼り付けます。

背面透過画像の作成過程2
背面透過画像の作成過程2

 これにより,左側に画像として図形が貼付されました。この画像を右クリックすると「図として保存」というメニュー項目が現れますので,クリックして「png形式の画像」として保存します。


背面透過画像の作成過程3
背面透過画像の作成過程3


「png形式」または「gif形式」により,背景色が透明になります。


保存した画像を「Microsoft フォト for Windows」で調整します。なお,Windowsのペイントでは透過画像を扱えませんのでご注意ください。

画像ソフトではよく市松(格子)模様になっている部分が透過部分になります。

これで背面透過型の画像が出来ましたので,画像を縮小してico識別ファイルに変換すると完成です。

ここで,png形式ファイルをico形式で任意のファビコンサイズ(32×32,48×48)に変換する必要があります。

この変換ソフトとしては,「@icon変換」やブラウザ提供のものなどがありますので,随時,インターネットをググってみてください。(セキュリティにはご注意ください)

私はグーグル検索主体なので,Google推奨の48×48サイズで作ったファビコンを使っています。今のところGoogle・Yahoo検索エンジンの検索結果や,chrome・Edgeのタグでのファビコン表示には問題ありません。

但し,bingの検索結果には反映出来ておりません。これについて現在調査中です。ひょっとすると32×32サイズでないと反映されないのかも知れません。

当会のWebサイトやブログはGoogleのサービスアプリを使っているため,「favicon.ico」のサイズ変更等を自由にできない処もあり,bing検索結果のファビコン表示については,今後さらに調査を継続する予定です。

  Word,Excelを使って背景透過画像を作るもう一つの方法


先程は,作成した図形を画像貼付して背景透過型画像を作り上げましたが,もう一つ方法があります。少し面倒ですが,それは,画面全体をhtmlファイルに出力する方法です。

先程のWord画面で,ファイルをhtml形式で出力します。

出力すると,html識別子のついたファイル本体と,同じファイル名で識別子「.files」の付いたフォルダが出力されます。そのフォルダの中にpng形式の図形ファイルが入っているはずです。
この図形を利用します。


これにより,先程の図形を画像として貼り付けた時と同様に背面透過画像を作ることが出来ます。


  PowePointを使って背景透過画像を作る方法

PowerPointを使って図形画像を作る方法もあります。これも同じように図形を画面上に挿図します。図形を選択して右クリックします。メニュー項目の中に「図として保存」があるのでクリックします。

ファイル格納形式をpng形式にして保存すれば,背景透過型ファビコン画像として使えます。

画像サイズはソフトによっていろいろですから,圧縮するときに調整すればいいです。画像ソフトではよく市松(格子)模様になっている部分が透過部分になります。PowerPointがあるなら,それが手っ取り早いですね。

  まとめ


オフィスを使ったファビコン用背面透過画像の作り方は以上です。あとは,これらの元画像を使って「favicon.ico」ファイルに変換しサーバに設定します。

WordPressの場合はhtmlソースが設定できるので,いろいろなサイズのfavicon.icoを作って設定します。異なるサイズで統合したマルチアイコンも扱えます。

当会のWebサイトとブログはGoogleのサービスアプリ(Google BloggerとGoogle サイト)を使っているので,ソフトの制約で48×48サイズのfavicon.icoが自動的に設定されます。

そのため,Googleとyahooの検索エンジン結果は問題ないですが,bingエンジンの検索結果については,ファビコンにオリジナルな表記が出現しません。

Googleのサービスアプリのうち,Google Bloggerについてはなんとかなるかもしれませんが,Google サイトは自由度が少ないので無理かもしれません。当面はGoogle検索エンジン主体で頑張ります。

それでは,次回まで。


(注意)情報の正確性を期していますが,実施される場合には自己責任でお願いします。

0 件のコメント: