頑張らない!でも諦めない!必死にならずにええかげん

ブックマークアイコン(ファビコン)をdtiブログで表示する方法

      2014/11/22

dtiブログでブックマークアイコン(ファビコン)を追加する方法は、
他のブログでも紹介されているでしょう。

情報が多くあり、大半がタグ編集で対応されているでしょうから、
投稿する意味さえなさそうですが、
他の無料ブログサービスでも投稿しているため投稿します。

01_ファビコンイメージ

ファビコンイメージ

本投稿は以下投稿の詳細ページになります。


もしお時間があれば本編もどうぞ。

はじめに

他の無料ブログで試した際にちょっと苦労したこともあり、
dtiブログでブックマークアイコン(ファビコン)を表示する方法を投稿しておきます。

dtiブログではブログのページを開いた際に、
デフォルトでは緑色のDアイコンが表示されています。
このアイコンを自分独自のアイコンに変更しようという話です。

概略

  • アイコン画像の作成
  • アイコン画像からのicoファイル生成
  • icoファイルと画像ファイルのアップロード
  • テンプレートのコピー
  • 部にタグの挿入

アイコンファイルの準備

まずアイコンに割り当てたい画像を用意する必要があります。

画像の作成方法等に関しては以下の投稿を参照願います。

 

Internet Explorerによる表示を除けば、
16pxサイズのGIFやPNG画像を用意し、
割り当てることで表示が可能なのですが、
多くの方が利用されているであろうInternet Explorerで、
表示されないのではあまり意味がありません。

その為、16px、32px、48pxで作成した画像を、
ico形式のファイルに割り当てることで、
一般的なブラウザで表示されるようになります。
今回は、以下の画像を利用してicoファイルを生成しています。
logo_p01-16px_orange logo_p01-32px_orange logo_p01-48px_orange

この3サイズの画像をico作成サイトにて、icoファイル化を行います。

 

実際のアイコン(ico)ファイルは以下のファイルです。
テスト確認用などにはご利用いただいて構いません。
favicon_screen

ファイルのアップロード

dtiブログでは様々なファイル形式を
アップロードすることができますので、
当然ながらico形式にも対応しています。

ブログホームを開き、ファイルのアップロードをクリックします。

02_ファイルアップロードの選択

ファイルアップロードの選択

データ管理の画面にて、
[ファイルの選択]にてファイルを指定し、
[アップロード]をクリックしてアップロードを行います。

03_アップロード画面

アップロード画面

アップロードが完了すると、
下部のファイル一覧に表示されます。

04_ファイルの一覧

ファイルの一覧

通常はこのファイルの一覧から投稿に対して挿入を行いますが、
画像とicoファイルのURLを取得するために、
プルダウンメニューから
リンクのアドレスをコピー(Chromeの場合)を選択します。

※その他のブラウザでも同様のメニューがあります。
[ショートカットのコピー]をクリックします。(IEの場合)
リンクのURLをコピー(firefoxの場合)
リンクをコピー(safariの場合)
リンクのアドレスをコピー(Operaの場合)

またコピーしたアドレスをメモ帳などに貼り付け覚えておきます。
http://101.dtiblog.com/a/algorhythnn/file/favicon_orange.ico
http://101.dtiblog.com/a/algorhythnn/file/logo_p01-72px_orange.png

05_画像・ファイルのURL取得

画像・ファイルのURL取得

テンプレートのコピー

ブログホームを開き、テンプレートの設定をクリックします。

06_テンプレート設定の選択

テンプレート設定の選択

デザイン画面よりコピーの元にしたいテンプレート行のコピーをクリックします。

07_テンプレートのコピー

テンプレートのコピー

テンプレートが新しくコピーされて、表示されます。
表示されたら[修正]をクリックして修正を行います。

08_コピーテンプレートの修正

コピーテンプレートの修正

デザイン画面のテンプレート名:横に分かりやすい名前を入力し[更新]をクリックします。

09_テンプレート名の修正

テンプレート名の修正

HTMLのフィールド内の~の間に、以下のソースを貼り付けて挿入します。

1行目のURL部分は貴方がアップロードしたicoファイルの
URLに書き換えて貼り付けてください。
2行目のURL部分は貴方がアップロードした画像ファイルの
URLに書き換えて貼り付けてください。

貼り付けが終わったら、HTML横の[更新]をクリックしてテンプレートを保存します。

10_タグの挿入

タグの挿入

保存が完了したら、デザインの一覧の画面にて、
今修正したテンプレートの行の[適用]をクリックし、テンプレートを有効にします。

11_テンプレートの適用

テンプレートの適用

設定は以上で終了です。
ブラウザから表示を確認します。

ブラウザ表示の確認

以下の通りブラウザでファビコンの表示がされています。

12_ブラウザの確認

ブラウザの確認

最近主流になっているwordpressで作るブログの場合に、
ファビコンの設定がどんな感じで行えるのかなどは、

この投稿でご紹介しています。

 

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

プロモーション(btm)

Google or AdMax Promotion (it)

 - DTIブログ, 無料ブログ , , , , ,

  関連記事

eye_ninja
Google Analyticsアクセス解析を忍者ブログで利用する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_fc2
FC2IDの利用登録

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google_anl
無料ブログ各社のGoogle™ Analytics利用可否と方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_cocolog
Google™ Analyticsアクセス解析をココログで利用する方法(項目)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_yaplog
Google Analyticsアクセス解析をyaplogで利用する上の規約確認

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_yaplog
Google Analyticsアクセス解析をyaplogで利用する方法(HTML)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_jugem
Google Analyticsアクセス解析をJugemブログで利用する上の規約確認

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_ameba
ブックマークアイコン(ファビコン)をアメブロで表示する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_seesaa
Seesaa™ブログでGoogle™ AdSense二次審査落ち理由の/auth/article_preview/を考えてみる

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_a8_funblog
Google Analyticsアクセス解析をファンブログ(A8)ブログで利用する方法(HTML)

Google or AdMax Promotion(it) 禁断の機能がau公式 …