AFFINGER

【AFFINGER6】ロゴ画像の設定方法を解説|無料で作成する方法も

2022-01-09

【AFFINGER6】ロゴ画像の設定方法を解説|無料で作成する方法も
Webサイトのロゴ画像をカッコよくレイアウトしたい!

今回はこんなお悩みにお答えします。

 

「AFFINGER」はデザイン素人でもポチポチとチェックしていくだけで見事にデザインできる便利なツールです。

でも便利な反面、カスタマイズ項目が非常に多いのが難点。

ということで、本記事ではWordPress有料テーマ「AFFINGER6」使った「ロゴ画像の設定方法」について詳しくまとめてみました

完成系はこんな感じ。サイトロゴのデザインでお悩みの方は、是非参考にしてみてください。

PC版

スマホ版

 

✔本記事を書いた人

profile

ucozi(@ucozi_ikeda

この記事を書いている私は、ヨガスクールで宣伝部長として働いています。

仕事を通じて得た情報をもとに、信頼性の高い記事をお届けしています。

>> さらに詳しいプロフィールはこちら

 

ロゴ画像とその他の設定について

ロゴ画像とその他の設定について

今回、ロゴ画像を挿入するのはヘッダー部分の「サイトタイトル」箇所です。

デフォルトでは、WordPressをサーバーにインストールする時に設定した「サイトのタイトル」と「キャッチフーズ」が表示されていると思います。

これをロゴ画像に差し替えていきます。

うこじ
ダッシュボード → 外観 → カスタマイズ をクリック、
サイト基本情報 → サイトのタイトル と サイトのキャッチフレーズ  より確認できます。

 

手順は以下の3ステップ。

  • ロゴ画像を準備する
  • AFFINGER でロゴ画像を設定
  • 微調整を行う

順番に解説します。

 

【ステップ①】ロゴ画像を準備する

まずは、オリジナルのロゴ画像を準備します。

ロゴ画像の最大幅は「640px」です

それ以上大きい画像は、自動で縮小表示されます。

今回は「600px×150px」サイズのロゴ画像を「canva」を使って作成してみます。

※サイズはお好みで調整してください。

うこじ
「Canva」はブログのアイキャッチ画像やチラシ、インスタの投稿画像、名刺など幅広く使える便利なデザインツールです。

 

canva でロゴ画像を作成

まずは、「Canva」にアクセスします。

会員登録がまだの方は済ませてください。

>> Canva を見てみる

 

右上の「カスタムサイズ」をクリックします。

「カスタムサイズ」をクリック

 

出てきたウィンドウに、先程決めたサイズ「600px×150px」を入力、「新しいデザインを作成」をクリックします。

 

「Canva」に使いたい素材を取り込むか、「Canva」が提供している素材を使って、お好みのロゴをデザインします。

今回はテキストだけのシンプルなものにしてみますので、「テキスト」を選択します。

「テキスト」を選択

 

「見出しを追加」をクリック、ご自身のサイト名に変更します。

「見出しを追加」をクリック、ご自身のサイト名に変更

 

いろんな書体があるので、お好みの文字を使ってデザインしましょう。

ここでは「M Plus Rounded Balack」を使ってデザインします。

「M Plus Rounded Balack」を使ってデザインします

 

完成したら右上の「ダウンロード」から画像を保存します。

ファイル形式は推奨されている「PNG」形式でOKです。

「ダウンロード」から画像を保存

 

これでロゴ画像は完成です。
うこじ

 

データの背景を透明にするなら「removebg」

「Canva」で透過データをダウンロードしようとすると、有料プランへの切り替えが必要になります。

透過データを使わないと、こんな感じでイマイチ。

イメージ画像

 

そんなときは「removebg」が便利です。

「removebg」は背景を自動で透過してくれるサービスで、しかも無料で使えます。

サイトにアクセスします。

removebg

>> removebg を見てみる

 

先程「Canva」で作成したロゴ画像をドラック&ドロップします。

作成したロゴ画像をドラック&ドロップ

 

「編集」をクリックすれば、微調整もできます。

キレイに切り抜けたら、「ダウンロード」をクリックして保存します。

キレイに切り抜けたら、「ダウンロード」をクリックして保存

 

これで背景が透明のロゴ画像が完成です。
うこじ

 

「ココナラ」に外注するのもアリ

「ココナラ」に外注するのもアリ
  • ロゴ画像を作成するのが苦手
  • オリジナルロゴを表示したい
  • 自分で作ってる暇がない

こんな方はスキルマーケット「ココナラ」を使って、オリジナルのロゴ画像を作成してもらうのがおすすめ。

料金も1000円~と、良いデザイナーさんを見つけられたら、お財布にも優しいです。

>> ココナラを見てみる

【ステップ②】AFFINGER でロゴ画像を設定

さて、ロゴ画像の準備ができたらAFFINGER側でロゴ画像の設定をしていきます。

WordPressにログインして、「外観」から「カスタマイズ」を選択。

「外観」から「カスタマイズ」を選択

 

「ロゴ画像/サイトのタイトル」を選択。

「ロゴ画像/サイトのタイトル」を選択

 

「ロゴ画像」項目の「画像を選択」より、ロゴ画像をアップロード。

「画像を選択」より、ロゴ画像をアップロード

 

ヘッダーにも同じロゴ画像を使用したいので、「ヘッダーロゴ画像に使用する」にチェック。

ロゴの大きさを調整する場合は、「ロゴの最大の高さ(px)」に数値を入力して調整を行う。

「公開」をクリックして完了

 

続いて「スマホロゴ画像」項目の「画像を選択」より、ロゴ画像をアップロード。

先ほどと同様、ロゴの大きさを調整する場合は「ロゴの最大の高さ(px)」に数値を入力して調整を行う。

 

いい感じでロゴ画像が配置できたら「公開」をクリックして完了です。
うこじ

 

【ステップ③】微調整を行う

ここでは「パソコン表示の際に、ロゴを中央に配置したい」という方のための調整方法です。

【ステップ③】微調整を行う

 

「AFFINGER 管理」から「AFFINGER 管理」を選択。

「AFFINGER 管理」から「AFFINGER 管理」を選択

 

「ヘッダー」をクリック。

「ヘッダー」をクリック

 

「ヘッダーエリア」内の「PCのみ」の「 ヘッダーを分割しない」にチェックして、いったん「SAVE」をクリック。

「ヘッダーエリアをセンタリング」がアクティブになっているので、チェックして再び「SAVE」をクリック。

「ヘッダーエリアをセンタリング」がアクティブになっているので、チェックして再び「SAVE」

 

完成系がこちら

以上で完成です。
うこじ

 

「AFFINGER6」を使えば、ロゴ画像の設定は簡単

WordPress有料テーマ「AFFINGER6」を使えば、かんたんにロゴ画像のヘッダーデザインをおしゃれにアレンジすることができます。

 

また、AFFINGER を用いた自分ブログ・ホームページの作り方は、以下の記事で詳しく解説しています。

 

本日は以上です。

この記事がどなたかのお役に立てたら嬉しいです。

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

 

\本ブログでも使用しています/

AFFINGER バナー

 

  • この記事を書いた人
ucozi

ucozi(うこじ)

ヨガスクールの中の人。WEB集客のほか、ヨガ情報サイトの企画・立ち上げやWEBライター養成講座などのコース開発を行ってます。 本ブログは「ヨガインストラクターのためのブログの始め方」をメインテーマに、ヨガ関連情報を発信しています。

-AFFINGER
-, ,

Copyright © ucozi.com , All Rights Reserved.