今回はこんなお悩みにお答えします。
「AFFINGER」はデザイン素人でもポチポチとチェックしていくだけで見事にデザインできる便利なツールです。
でも便利な反面、カスタマイズ項目が非常に多いのが難点。
ということで、本記事ではWordPress有料テーマ「AFFINGER6」使った「ロゴ画像の設定方法」について詳しくまとめてみました。
完成系はこんな感じ。サイトロゴのデザインでお悩みの方は、是非参考にしてみてください。
PC版
スマホ版
✔本記事を書いた人
ucozi（@ucozi_ikeda）
ロゴ画像とその他の設定について
今回、ロゴ画像を挿入するのはヘッダー部分の「サイトタイトル」箇所です。
デフォルトでは、WordPressをサーバーにインストールする時に設定した「サイトのタイトル」と「キャッチフーズ」が表示されていると思います。
これをロゴ画像に差し替えていきます。
サイト基本情報 → サイトのタイトル と サイトのキャッチフレーズ より確認できます。
手順は以下の３ステップ。
- ロゴ画像を準備する
- AFFINGER でロゴ画像を設定
- 微調整を行う
順番に解説します。
【ステップ①】ロゴ画像を準備する
まずは、オリジナルのロゴ画像を準備します。
ロゴ画像の最大幅は「640px」です。
それ以上大きい画像は、自動で縮小表示されます。
今回は「600px×150px」サイズのロゴ画像を「canva」を使って作成してみます。
※サイズはお好みで調整してください。
canva でロゴ画像を作成
まずは、「Canva」にアクセスします。
会員登録がまだの方は済ませてください。
右上の「カスタムサイズ」をクリックします。
出てきたウィンドウに、先程決めたサイズ「600px×150px」を入力、「新しいデザインを作成」をクリックします。
「Canva」に使いたい素材を取り込むか、「Canva」が提供している素材を使って、お好みのロゴをデザインします。
今回はテキストだけのシンプルなものにしてみますので、「テキスト」を選択します。
「見出しを追加」をクリック、ご自身のサイト名に変更します。
いろんな書体があるので、お好みの文字を使ってデザインしましょう。
ここでは「M Plus Rounded Balack」を使ってデザインします。
完成したら右上の「ダウンロード」から画像を保存します。
ファイル形式は推奨されている「PNG」形式でOKです。
データの背景を透明にするなら「removebg」
「Canva」で透過データをダウンロードしようとすると、有料プランへの切り替えが必要になります。
透過データを使わないと、こんな感じでイマイチ。
イメージ画像
そんなときは「removebg」が便利です。
「removebg」は背景を自動で透過してくれるサービスで、しかも無料で使えます。
サイトにアクセスします。
先程「Canva」で作成したロゴ画像をドラック＆ドロップします。
「編集」をクリックすれば、微調整もできます。
キレイに切り抜けたら、「ダウンロード」をクリックして保存します。
「ココナラ」に外注するのもアリ
- ロゴ画像を作成するのが苦手
- オリジナルロゴを表示したい
- 自分で作ってる暇がない
こんな方はスキルマーケット「ココナラ」を使って、オリジナルのロゴ画像を作成してもらうのがおすすめ。
料金も1000円～と、良いデザイナーさんを見つけられたら、お財布にも優しいです。
【ステップ②】AFFINGER でロゴ画像を設定
さて、ロゴ画像の準備ができたらAFFINGER側でロゴ画像の設定をしていきます。
WordPressにログインして、「外観」から「カスタマイズ」を選択。
「ロゴ画像／サイトのタイトル」を選択。
「ロゴ画像」項目の「画像を選択」より、ロゴ画像をアップロード。
ヘッダーにも同じロゴ画像を使用したいので、「ヘッダーロゴ画像に使用する」にチェック。
ロゴの大きさを調整する場合は、「ロゴの最大の高さ(px）」に数値を入力して調整を行う。
続いて「スマホロゴ画像」項目の「画像を選択」より、ロゴ画像をアップロード。
先ほどと同様、ロゴの大きさを調整する場合は「ロゴの最大の高さ(px）」に数値を入力して調整を行う。
【ステップ③】微調整を行う
ここでは「パソコン表示の際に、ロゴを中央に配置したい」という方のための調整方法です。
「AFFINGER 管理」から「AFFINGER 管理」を選択。
「ヘッダー」をクリック。
「ヘッダーエリア」内の「PCのみ」の「 ヘッダーを分割しない」にチェックして、いったん「SAVE」をクリック。
「ヘッダーエリアをセンタリング」がアクティブになっているので、チェックして再び「SAVE」をクリック。
完成系がこちら
「AFFINGER6」を使えば、ロゴ画像の設定は簡単
WordPress有料テーマ「AFFINGER6」を使えば、かんたんにロゴ画像のヘッダーデザインをおしゃれにアレンジすることができます。
また、AFFINGER を用いた自分ブログ・ホームページの作り方は、以下の記事で詳しく解説しています。
本日は以上です。
この記事がどなたかのお役に立てたら嬉しいです。
最後までお読みいただき、ありがとうございました。
ホームページの始め方を知りたい方へ
当ブログでは、「ヨガインストラクターのためのホームページの始め方」を紹介しています！
ヨガスクールの中の人が確実で信頼性の高い情報をお届けしていますので、これから始める方は、こちらの完全ガイドをぜひご覧ください！
また、AFFINGER（アフィンガー）というWordPressテーマの購入特典として、「ヨガインストラクターのためのAFFINGER設定マニュアル」という独自のプレゼントもご用意しています（※単体での購入も可）。
ホームページの始め方・立ち上げに関する、ご質問・ご相談はボクのInstagramのDM（@ucozi_ikeda）までお気軽にどうぞ！
WordPressのテーマ
『AFFINGER 6（アフィンガー）』
購入をご検討の方へ。
当サイトから『AFFINGER 6（アフィンガー）』をご購入いただいた方の特典として、「ヨガインストラクターのためのAFFINGER設定マニュアル」を提供しております。
※すでに『AFFINGER 6（アフィンガー）』を購入済みの方には、有料でも販売しています。
「ヨガインストラクターのためのAFFINGER設定マニュアル」では、デモサイトの設定について、テーマのインストールから細かい設定まで、全ての手順について解説しています。
