Wordpress Builder

WinRoad徒然草の管理人が提供するWordPressとホームページビルダーの情報サイトです。

WordPressにファビコンの設置

WordPressにファビコンの設置

このエントリーをはてなブックマークに追加

サイト名の前に表示される画像(ファビコン:Favicon)を設置したいと思います。

1. ファビコンを設置しないとちょっと味気ない感じがします。

wordpress121

2. ホームページビルダー17付属のウエブアートデザイナーで画像を作成して、プラグインで設置してみたいと思います。

ウエブアートデザイナーの起動

3. まず、ホームページビルダーのツール→ウエブアートデザイナーの起動をクリックします。

wordpress122

4. ウエブアートデザイナーが起動したら、ウエブアート素材タブのボタンをクリックし、一覧から適当な素材を選択します。

wordpress123

5. 文字オブジェクトをダブルクリックします。

wordpress124

6. ロゴの編集ダイアログで文字をに変更し、サイズを24にして、閉じます。

wordpress124

7.  Ctrl+C→Ctrl+Vで文字をコピー&ペーストしたら、コピーした文字をBに変更して、適当な位置にレイアウトします。

wordpress125

8. 図形をダブルクリックして、ボタンの編集ダイアログが開いたら、色のタブをクリックします。

wordpress126

9. 気に入った色を選択したら、下記のようになりました。WinRoad徒然草のファビコンが青なので、Wordpress Builderはオレンジ色に変えてみました。

10. 全てのオブジェクトを選択している状態で、Web用保存ウィザードをクリックします。

wordpress127

11. 選択されてオブジェクトを保存するにチェックが入っているのを確認して、次へをクリックします。

wordpress128

12. 保存形式はGIFを選んで、次へをクリックします。

wordpress129

13. 次へをクリックします。

wordpress130

14. ファイルに保存にチェックして、完了ボタンをクリックします。

wordpress131

15. 適当な場所(デスクトップあたり)に保存します。これで、60×60の画像は完成しました。

All in one Faviconのインストール

17. プラグイン→新規追加とクリックして、プラグインの新規作成画面が表示されたら、faviconと入力して、プラグインの検索ボタンをクリックします。検索されたプラグインの中で、All In One Faviconのいますぐインストールリンクをクリックします。

wordpress134

18. インストールが完了したら、プラグインを有効化します。

ファビコン画像のアップロード

19. 設定→All In One Faviconとクリックして、All in one Favicon Settings画面で、Frontend GIFに先程作成したGIFファイルを指定します。Frontend Apple Touch IconにIphone用に作成した画像を指定します。

wordpress135

20. 下記のようにアップロードしました。

wordpress136

※Apple Touch Iconとは、IphoneやIpad等のホーム画面用のアイコンです。透過色は無視されて黒色になってしましますので、先程作成した画像では、円の周りが黒っぽくなりますので、四角いアイコンを作成した方がいいでしょう。

21. これでファビコンが表示されるようになりました。

wordpress137

以上。

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です