カスタマイズ

【AFFINGER5】サイトアイコンとロゴ画像をかっこいいデザインに変更しよう!

更新日:

こんにちは。SHINです♪

 

つい先日、やっとこさサイトアイコンとロゴ画像を変更!何がやっとこさかと言うと、気に入ったロゴ探しにかなり時間を費やしてしまった…!

記事を書くことが最優先のサイトで画像を探しまくってしまった・・・わけです。

記事を書け!ってあれだけ言うとるのに…( ノД`)シクシク…
あきら
SHIN
いやいや…一言も言うてへんやろ(笑)

 

と言うわけで、AFFINGER5でサイトアイコンとロゴ画像を変えた作業を、分かりやすくお話していきます。

こんな方におすすめな記事

  • アイコンとロゴ画像で、サイトを「目で」覚えてもらいたい!
  • サイトをかっこよくしたい!(僕は単純にコレだったかな…笑)

 

サイトアイコンとロゴ画像ってどこ?

実際に、アイコンとロゴ画像の表示場所が分かりずらい人もいると思うので、簡単に説明しておきます。

 

サイトアイコン

サイトアイコンは、ブラウザでウィンドウを開いたタブに表示されるアイコン。またブックマークやモバイルアプリにも表示されます♪

サイトアイコン

 

ロゴ画像

WordPressテーマにもよりますけど、AFFINGER5の場合はヘッダー、フッターの2箇所に表示されます♪

ココのロゴ画像が変わると、ガラッとサイトイメージも一新しますよね。

 

ヘッダー部分【ロゴ表示あり】

ヘッダー部分【ロゴ表示なし】

右側デフォルトのテキストのみと比較すると、かなりイメージが変わりますよね♪

 

サイトアイコンとロゴ画像を準備

まずはコレ。もうすでに「準備してまっせ!」って人は飛ばしてくださいね。

 

画像を準備する選択肢は・・・

  1. 【無料】ウェブ内で探す。
  2. 【無料】ロゴ作成サイトで作る。
  3. 【有料】有料サイトやスキルマーケット(ココナラなど)で探す。
  4. 【無料】自分で描く。
  5. 【無料or有料】知り合いに描いてもらう。

このあたりが探す手段かなと思います。

 

ココで注意!

ウェブ内で探す場合は、著作権画像や商用利用可または不可に十分注意しましょう。

著作権のある画像や、商用での利用不可な画像(マネタイズしていなければ問題なし)を使ってしまうと、著作権侵害となり「犯罪」扱いにもなりかねません(汗)

あくまで僕の意見ですけど、ウェブ検索で探すなら「商用利用可である画像のみ」に絞り、さらにサイトの利用規約まで確認しておく必要がありますね。正直・・・正直あまりおすすめできません。

 

というわけで、僕は絵心はまるで無し・・・。ロゴ作成は挑戦したものの、多大な時間を要すると思い断念!また知り合いに絵心に長けた人はいますけど、有料でも気が引けてしまい・・・。挙句にウェブ内で探しに探し回ったものの「クオリティーに妥協できなかった」という理由で、有料サイトで探すことに。

 

そこで、ロゴを作ってくれる有料サイトはめちゃくちゃあります・・・。そこで選びやすいのは最初からロゴデザインパターンがあり、テキストはフォントや位置をカスタマイズできるシンプルなサービスサイトがおすすめです。

 

自分で手を加える作業が多かったり、カスタマイズが複雑であると、それこそ時間がもったいないので記事を書く時間に回しましょう!

 

 

SHINがおすすめする有料ロゴ作成サイト

オススメできるサイトを紹介します♪

ロゴ作成代行サイトの紹介ですので、お気に入りのロゴデザインをポチッと購入できるサイトです。

 

1.Logo Maker

Logo,maker

海外サイト。僕がこのサイトで使っているアイコンとロゴ画像は、こちらで作成購入しました♪

ココがおすすめ

ロゴのサンプルが限りなく豊富。また、フォント種類やその設置場所、カスタマイズの自由度も高いので、簡単に好きなデザインに仕上げられます。
Logo Maker公式サイト

メモ

ロゴ購入価格/1デザイン・・・2,000円~3,000円台

 

 

2.Tailor Brands

Tailor Brands

同じく海外サイト。このサイトはいくつかの選択肢で進めていき、イメージングに合ったロゴを提案してくれてからカスタマイズできます♪

ココがおすすめ

いくつかの質問選択肢を進めた後におすすめのロゴを提案してくれるので、ちょっと手を加えるだけで仕上げられるところがGOOD!もちろんサイトロゴ以外にも、Tシャツやオリジナル商品などにも活用できます。
Tailor Brands公式サイト

メモ

購入価格帯・・・2,000円~6,000円 ※ロゴだけの購入なら2,400円とかなり割安

 

 

AFFINGER5サイトアイコンとロゴを変更しよう!

では実際にサイトアイコンとロゴ画像を変更する方法を説明していきます♪

 

サイトアイコン変更方法

step
1
WordPressダッシュボードから「外観」>「カスタマイズ」をクリック

AFFINGER5,サイトアイコン

 

step
2
カスタマイズメニュー内にある「サイト基本情報」をクリック

AFFINGER5,サイトアイコン1

step
3
「サイトアイコン」にある「画像を選択」をクリック

AFFINGER5,サイトアイコン2

画像サイズは512×512推奨とありますが、僕はこの半分ほどの277×266。わざわざ画像を拡大して解像度が悪くなるなら、このくらいのサイズでも十分フィットできます。

 

step
4
アイコン画像を「ファイルをアップロード」もしくは「メディアライブラリ」から画像を選択

AFFINGER5,サイトアイコン3

アイコン画像をアップロードしたら、画面右側にデータ詳細が表示されます。ここで「タイトル」と「代替テキスト」は、サイトタイトルにすることをおすすめします。画像SEOに微々的に影響すると考えているので。

 

step
5
サイトアイコン画像の最終調整する

AFFINGER5,サイトアイコン4

アイコン画像を切り抜きする工程ですけど、すでにサイズ調整をしている場合は「切り抜かない」で大丈夫。

 

step
6
画像が反映されている確認をして「公開」をクリック

AFFINGER5,サイトアイコン5

アイコンの透過部分は黒くなるので、安心してください♪

 

サイトアイコンは、以上で変更できます♪続いてサイトのロゴ画像を変更しましょう。

 

ロゴ画像変更方法

step
1
WordPressダッシュボードから「外観」>「カスタマイズ」をクリック

AFFINGER5,サイトアイコン

step
2
カスタマイズメニュー内にある「サイト基本情報」をクリック

AFFINGER5,ロゴ画像

step
3
一番上のロゴ画像で「画像を選択」をクリック

AFFINGER5,ロゴ画像1

ロゴ画像は、ヘッダーとフッターで違う画像を設定できます♪同じ画像にしたい場合は、一番下の「ヘッダーロゴ画像をしようする」にチェックを入れましょう。

 

step
4
ロゴ画像を「ファイルをアップロード」もしくは「メディアライブラリ」から画像を選択

AFFINGER5,ロゴ画像2

ロゴ画像の「サイズ」は好みがあるので推奨サイズはありません。ので、カスタマイズ画面上のリアルタイムビューで確認して最終的にサイズを決めましょう。また「画像タイトル」と「代替テキスト」は、サイトタイトル名が良いです。

 

step
5
ロゴ画像がきちんと反映して表示できたら「公開」で完了!

AFFINGER5,ロゴ画像3

表示サイズを調整して完了できたら「公開」をクリックして完了です♪フッター画像も確認してくださいな♪

 

アイコン画像とロゴ画像の形式はJPEG?PNG?

画像のファイル形式についてですけど、僕のようなカラー画像であれば「PNG」がおすすめです。

 

単色であるなら「JPEG」でも問題ないかなと。ただし、ロゴ画像はそんなに小さい画像を使わないと思うので、画像の端部分がギザギザになったりぼやけたりするのがイヤだ!って人は「PNG一択」ですね。

 

またWordPressには、自動で画像圧縮してくれるプラグインもあるので、画像ファイル容量については心配するほどではないです。

 

まとめ

サイトアイコンとロゴ画像は、より印象深く「カワイイ♪」「かっこいい!」ってイメージングできるツールの一つだと思います。

ぜひ変えてみてくださいね♪

ではまた!

 

ps.画像を無料ツールで作成できるようになったら、また記事にします♪

AFFINGER5カスタマイズ記事

AFFINGER5
【AFFINGER5】サイドバー最上部の新着記事を非表示にする方法

こんにちは!SHINでございます♪   AFFINGER5でサイトページ構成を2カラム以上、つまりサイドバーのあるデザインで運営するなら必見。 今回は、AFFINGER5の導入初期時にデフォ ...

続きを見る

AFFINGER5,フォントカスタマイズ
【AFFINGER5】フォントカスタマイズでイメージをガラッと変えてみよう!

こんにちは、SHINでございます♪   今回、AFFINGER5のフォントデザインをガラッと変える2つの方法を解説していきます。   デフォルトでも十分ですけど、もっとポップにした ...

続きを見る

AFFINGER5
【AFFINGER5】ブログサイトの背景画像をオシャレに変える方法

こんにちは!SHINです♪ 今回は、ブログサイトの背景画像をオシャレに変えてみよう!というテーマでお話していきます♪   ただ注意してほしいのは、背景画像で大きくイメージが変わるということ。 ...

続きを見る

超簡単!サイドバーへTwitterタイムラインを埋め込む方法
【AFFINGER5】超簡単!サイドバーへTwitterタイムラインを埋め込む方法

こんにちは!SHINです♪ 今回Twitterのタイムラインを、サイドバーに表示させる方法をお話していきます♪   何で「サイドバー」なのかと言うと、2カラムサイトであればトップページはもち ...

続きを見る

【AFFINGER5】記事下にアドセンス横並び+リンク広告をセット表示する方法
【AFFINGER5】記事下にアドセンス横並びとリンク広告をセット表示する方法

こんにちは。SHINです♪   Googleアドセンス広告の設置方法に、PHPやカスタムCSSにコードを記述する方法がありますけど、正直・・・ めんどくさい! ややこしい! むずかしい! わ ...

続きを見る

【AFFINGER5】カエレバ・ヨメレバを実装!カスタマイズデザイン6選
【AFFINGER5】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選

こんにちは。WordPessテーマ研究家SHINです。 カエレバ&ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...

続きを見る

【AFFINGER5】スマホフッターに固定メニューを設置する方法-min
【AFFINGER5】スマホフッターに固定メニューを設置する方法

こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。   スマホフッターメニューと言えば、パソコンで言う ...

続きを見る

【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ大特集
【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ集

"AFFINGER5生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。   今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエー ...

続きを見る

alt=【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介
【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介

AFFINGER5に実装されている機能に、テキストやアイコン、画像を簡単にアニメーションにできる機能をご紹介していきます。 こんにちは。WordPressテーマ研究家SHINです。   AF ...

続きを見る

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-カスタマイズ
-,

Copyright© WordPress theme NAVI , 2019 All Rights Reserved Powered by AFFINGER5.