メニューを開く 項目を開く 記事投稿時刻 コメント トラックバック カテゴリー ブログテーマ タグ URLリンク コメントの編集 コメントに返信する

StrawMan Templateでファビコンを設置する方法

2020/01/21  18:37
0
今回は、StrawMan Templateへファビコンを設置し見た目をよさげにする方法の解説です。






ファビコンってなにさ?


ファビコンとはサイトを象徴するアイコンです。

ファビコン
設定していないサイトはユニコーン(FC2のデフォルトファビコン)が表示されます。


PCでサイトを表示したときに添えられるアイコン。
ブックマークに表示されるアイコン。
スマホでブックマークしたときに表示されるアイコン。

これがファビコンです。


機能的にプラスになるわけではありませんが、サイトのオリジナリティが上がります

手順は、ファビコン画像を作成しコピペで完了ですので是非チャレンジしてみてください。




重要度が増したファビコン


(2020/01/21:追記)
今までは、サイトのオリジナリティを上げる程度だったファビコンですが、googleの検索結果に反映されるようになりました。

ファビコン


地味な項目ですので、後回しにしても構わない設定でしたがgoogleが絡むとなると話は別。
見つけやすくするために、または埋もれないためにも設定したほうがお得ですので是非~~~




ファビコン画像を作る


ファビコンはサイズやフォーマットが決まっていますので、以下のファビコン作成サイトで画像を加工します。

様々なファビコンを一括生成

使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-chrome*.png、manifest.jsonを一括生成します。エラーログに余計な404 not foundを記録させない対策としても有効。


画像ファイルを選択→ファビコン一括作成→ファビコンダウンロード。


注意点は、PCとスマホを別にするときは2種作成。
あとGIFも使えますが、ファビコンが動くサイトは即閉じしたくなるほど悪目立ち+うっとうしいので避けたほうが無難です。


これでファビコン画像の準備は完了です。




ファビコンの設置


StrawMan TemplateのHTMLにファビコンを設定します。

今回はPC・iPhone・androidの設定に絞り、表示される機会が少ない設定は割愛します。



まずは、さきほど作成したファビコン画像の中から

favicon.ico (PC用)
apple-touch-icon-180x180.png (iPhone用)
icon-192x192.png (スマホ用)


の、3つをアップロード。


次は、FC2管理画面→テンプレートの設定→ctrl+F『ファビコン設置スペースここから』で検索。

ファビコン設置スペースここから

青マスクの部分にコードをコピペします。


以下のカラフルな部分のコードをコピペして、アップロードしたファイルのURLと入れ替えてください。

ファビコンの設置コード




コピペ後、更新で完了です。

表示されないときは、キャッシュが絡んでいる可能性がありますので、ctrl+F5でキャッシュクリア更新を試してください。



まとめ


漫画に特化したテンプレートが存在しない以上、StrawMan Templateの代わりはゼロから作るか一般的なテンプレートを改造するしかないのが現状です。

ペルソナのような着せ替え機能もありますが、ベースを押さえたうえでの着せ替えですので似たようなサイトが出来てしまうのは避けられません。


ですのでファビコンをはじめ、TOP画像・カスタムテーマなど、強くオリジナリティが発揮できる場所はジャンジャン攻めてもらえたら…。


いえ、はっきり言います。


StrawMan Templateに住み着いたユニコーンとBADFOXを駆逐しろぉぉぉ!!

駆逐
動物たちを駆除することがオリジナルサイトの第一歩ォ!!




StrawMan Template総合案内板へ戻る
関連記事

コメント

コメントの投稿