【ブログの装飾】ブログの目印！アイコンやファビコンの作り方
2016/04/08
たのちんのブログデザインの考え方をベースにブログの装飾をしていくことにした、たのちん管理人なむ。
たのちんでは、背景やヘッダー画像の設定、ロゴやアイコンなど【デザイン】に関する設定は、テーマと子テーマの設定後に行っています。デザイン性の高いテーマや子テーマを使用する場合は、先にそちらの設定をしてしまってからの方が雰囲気が合わせやすくなると思います。
＊【テーマ】WordPressテーマ「STINGER5」のインストール方法
＊【子テーマ】STINGERの子テーマ「SIMPLESTER」のインストール方法
＊【子テーマ】エックスサーバーで子テーマのテーマフォルダを作成する
スポンサーリンク
Contents
まずは雰囲気を決める画像を用意する
基本的なレイアウトや構成はWordPressのテーマを導入することで整いますので、大幅に変更することはないのですが、画像を用意することで簡単に印象を変えることができる部分をカスタマイズしてみます。
|
１．ブログの背景に壁紙画像を設定する方法 ２．ヘッダー部分にタイトル画像を設定する方法 ３．目を引くタイトルロゴ画像を設定する方法 ４．ブログの目印！アイコンやファビコンの作り方 ←コレを設定します ５．アバターの作成とコメントアイコンの設定方法 |
ファビコンにするアイコン画像を作る
背景・ロゴ・ヘッダー画像ときたら… 次はファビコンを設定してみたくなります。
ファビコンとは、ウェブサイトやウェブページに関連付けられたアイコンのことです。
よく見ますよね。
ブログの装飾を考えるときにファビコンの設置は欠かせません。
ファビコンはWordPressやテーマに標準でついているカスタマイズ機能では設置できません。
|
のどちらかになりますが、たのちんではプラグインを使ってファビコンを設置しています。
「Favicon by RealFaviconGenerator」というプラグインを使ってファビコンを設置しますが、このプラグインは、ファビコンだけではなくてiPhoneなどのスマホやWindows8のアイコン画像まで同時に設定できるのでとても便利です。
「Favicon by RealFaviconGenerator」でファビコンを設置する前に、ファビコン用のアイコン画像を用意します。しかし、タイトルロゴと同様に難しいデザインはできませんしまだまだお金もかけられません…。
ということで、再度タイトルロゴを作ったときに使用したツールを使って自作していきます。
それでは早速ファビコン用のアイコンを作ってみます。
ファビコンになる画像の作成方法
たのちんのファビコン用アイコンはタイトルロゴと同じ「フリーフォントで簡単ロゴ作成」で作成しています。
今回は「Favicon by RealFaviconGenerator」を使ってファビコンを設置していきますので、このプラグインが推奨する画像を用意します。
|
上記の条件でたのちんは賃貸の「賃」の一文字を使ったアイコンにすることにしました。
|
たのちんのファビコン サイズ：185 X座標：５ Y座標：215 |
配置や文字サイズ、カラーなどを変更したら「変更」ボタンを押して、その都度プレビューで確認しながら微調整をします。
これでOKとなったら「ダウンロード」してPCに保存します。
無事完成です。
このままでもいいのですが…
たのちんは「楽しむ賃貸」なので「楽」の部分も盛り込みたいな… という欲が出まして、もうひと手間かけました。笑
相変わらず難しいことはできませんので、ペイントを使って加工します。
ペイントはウインドウズのパソコンなら必ず入っていますよね？
ちょこっとした加工に便利です。
保存した画像をペイントで開いて、「楽」しい感じを出したかったのでキラキラマークを足しました。
自己満足の世界な気がしますｗｗｗ
が、楽しければいいんです。笑
別名をつけて保存します。
できました！
おつかれさまでした(*´ω｀)
続いてプラグイン「Favicon by RealFaviconGenerator」を使って、ファビコンとスマホアイコンなどを設定していきます。
＊＜PI＞ファビコンと共通アイコンを設定する【Favicon by RealFaviconGenerator】
その他の装飾はこちらです
＊【ブログの装飾】ブログの背景に壁紙画像を設定する方法
＊【ブログの装飾】ヘッダー部分にタイトル画像を設定する方法
＊【ブログの装飾】目を引くタイトルロゴ画像を設定する方法
＊【ブログの装飾】アバターの作成とコメントアイコンの設定方法
機能面の拡張はプラグインやテーマのカスタマイズで
＊３．プラグインをインストールしてブログの機能を強化
＊４．プラグインを使わずにブログの機能を強化