BaserCMSを設定する【6】アイコンを変える
テーマデフォルトの画像だとやっぱり格好がつかないので変えてしまいましょう~
まずはアイコン関係から。
アイコン関係はブラウザのタブやお気に入りの所につくちっこい画像(favicon)とスマホなんかのホーム画面用のアイコンです。
faviconはまぁ早めに直したほうが良いのは感じるんですがホーム画面用のアイコンって需要あんのかしら?
ブラウザで見るだけじゃなくてそれをショートカット登録してホーム画面に置いておくなんて奇特なというか偏奇なというか・・・
もちろんそれっくらい有名なサイトやなんかなら必要でしょうねぇ
閑話休題
早速制作です。
とりあえずIllustratorで適当な正方形のアートボード作ってRGBカラーで組み立てます
一応小さくなることを考えて色はパキッとベタ塗りで
サイズはとりあえずは1000px角以上有れば問題ないです。
Illustrator形式ではアイコンに使えないのでそれぞれの必要な形式に書き出します。
まずはベジェのまま使えるSVG形式。これは保存時にファイル形式の変更で出来ます。
favicon,logo.min,logo,logo2がそれぞれSVG形式ですlogo2はサンプルを見たら反転っぽかったのでそれっぽく作成。後はみんな一緒
つづいてpng形式。これはIllustratorの書き出し機能でちゃちゃっと済ませますWeb用に保存(従来)でpng形式にして保存します
apple-touch-icon,faviconを作ります。logoは726×726、apple-touch-iconは180×180px faviconは32×32pxで書き出し
最後にicon形式。これが面倒なことに今現在の所IllustratorもPhotoshopもそのままでは書き出しできません。
なのでそれ用のサービスサイトを使います。
別にここじゃないとアカンってことはないのでご自由に
ここでさっき作っておいたlogoのpngを使います。
ICON形式はapple-touch-icon-precomposed(256×256),favicon(16×16)の2種
以上9アイテムで制作完了です。
アイコン設定
つづいてダッシュボードから画像を登録していきます。
テーマ管理>テーマ(テンプレート編集)>BcAcademia>イメージ一覧
下の方にある参照...から画像をアップしていきます。
テンプレートの上書きなのでファイル名は同じにしておけば特に他を弄る必要もなく簡単です。
まぁローカルフォルダで入れ替えてFTP使ったほうが一発なんだけどね・・・