PC1台で自由に人生をデザインするリクのブログ

【SANGO&STORK用】オシャレなWordPressサイトのヘッダーロゴ画像を無料で作る方法(Mac版)

 

WordPressでブログを開設したのはいいものの、「どこかサイトのデザインが物足りない」ともの寂しく感じた経験が誰にでもあると思います。それもそのはずで、たいていのブログテンプレートはデフォルトのデザインがちょっと物足りないものなんですよね(デフォルトから洗練されているものもありますが)。

そこでデフォルトデザインのままサイトを運営して行ってしまう人がほとんどなのですが、このことが原因で「似たようなサイトが多い」という声を耳にすることも最近では多くなってきました。

 

そこで今回は、WordPressサイトの顔とも言える「ヘッダーロゴ画像」をオシャレなものにするべく、僕もよく実践している手法を解説していきます。

WordPress初心者の段階ではデザインスキルも乏しい場合がほとんどで、自作でヘッダー画像を作るのも結構キツい話だと思いますが、非常にカンタンにオシャレなデザインを実現することができます。ぜひ解説をもとにオシャレなヘッダーに仕上げていきましょう。

 

今回目指すヘッダーロゴ画像の完成パターン

 

今回はWordPressテンプレートとしても有名な「SANGO」「STORK」の2種類のケースを想定して、ヘッダーロゴ画像を作成していきます。もちろん他のテンプレートでも応用できることなので、上記以外のテーマを使用している方もぜひ参考にしてみてください。

 

まず、今回目指すヘッダーロゴ画像の完成パターンを確認しておきましょう。

  • SANGOの場合

 

  • STORKの場合

 

2つで大きさが多少違いますが、基本的に同じヘッダーロゴ画像を使用しています(大きさを整える方法も後ほどシェアします)。

 

最近はこういったテキストベースのヘッダーロゴが流行っているというか、確実にこれからはこのようなヘッダー仕様のサイトやテンプレートが増えていくとは思いますが、デフォルトのただの文字だけのままだとやはりどこか寂しいんですよね。

そのため今回は、ちょっとした遊び心として動物のフラットアイコンを使用したり文字色にちょっとした変化を加えてみたりと、少し工夫を施してみました。文字もロゴも自由に変更することができますが、基本的にサイトの雰囲気とマッチングしたものを選ぶようにしていってくださいね。

 

そしてこのようなオシャレな雰囲気のヘッダーロゴ画像も、少ない時間で仕上げることができます。ぜひ解説をもとに作成を進め、そして時には応用も利かせながらオシャレなヘッダーロゴ画像を作成していきましょう。

 

オシャレなWordPressサイトのヘッダーロゴ画像を無料で作る方法

 

それではここからは、オシャレなWordPressサイトのヘッダーロゴ画像を作成し、実際にサイトに導入するところまで解説していきましょう。無料のサービスやツールを活用していくので一切お金はかかりません、非常にコスパの良い方法だと思うのでぜひ参考になさってください。

また、今回はMacの場合を想定して解説していきますが、Windowsでも同様に実現できることなので、代用が必要なツールは都度代用していってくださいね。

 

Keynoteでヘッダーロゴ画像を作成する

 

まず、ベースとなるヘッダーロゴ画像素材をMacの便利なツール「Keynote」で作成していきましょう。

Keynoteはプレゼン資料の作成が主な使い道ですが、無料でロゴ画像を作成するのにはうってつけの便利なツールなので、今回のロゴ画像に限らず積極的に活用していってくださいね(Windowsの場合は「Fhotoscape」などで代用できます)。

 

最初にKeynoteのアプリを立ち上げ、テーマは基本的にどれを選んでもOKですがここでは「ホワイト」を選択します。

 

するとプレゼンの編集画面が開かれるので、右上にある「書類→スライドのサイズ→カスタムのスライドサイズ」を選択しましょう。

 

まずここで、スライドの縦横幅をヘッダーロゴのものに合わせていきます。

基本的にブラウザの横幅は1200pxが限度なので、ここでは「幅:1200pt」「高さ:250pt」と入力していきましょう(高さは特にいくつでもOKですがヘッダーに最適なサイズは200~400ptくらいです)。

 

すると次のようにスライドのサイズが変更されるので、ここから文字を入力したり色を変更したりしていきましょう。

 

ここでは結果として、次のようなイメージでスライドを仕上げました。

 

具体的な作成方法について解説すると、

  • 「背景」でスライド全体の背景色を紺色に
  • 「テキスト」で”TEST SITE”という文字を作成(フォント・色・大きさを設定)
  • 「図形」で黄色い楕円形を作成
  • FLAT ICON DESIGN」からダウンロードしたフラットアイコンを追加

というイメージになります。

 

基本的にここでの設定は自由にしていただいてOKですが(でなければ上画像と全く同じものが完成してしまう)、1つだけテクニックを解説すると、やはり他サイトからダウンロードしたアイコンを使用しているところですね。

もちろん文字だけのロゴでも構わないのですがちょっとそれでは寂しいと感じる際には、上記でも解説している「FLAT ICON DESIGN」さんを活用していくと良いでしょう。このサイトはその名の通り、フラットなデザインのフリーアイコン素材がたくさんダウンロードできるので、オシャレなロゴ画像を作る際にはかなりオススメです。

 

その他にも「フリー素材 アイコン」などと検索すると様々なサイトが出てくるので、文字だけで寂しさを感じる場合にはぜひ活用していってくださいね。

 

さて、無事にヘッダーロゴ画像を作成することができたら、上にあるメニューバーから「ファイル→書き出す→イメージ」を選択し、スライドを画像として書き出し保存していきましょう。

 

これでまず、ヘッダーロゴ画像を作成することができましたね。続いて、SANGOとSTORKの場合に分けて、実際にサイトに作成した画像を反映させていきましょう。

 

ヘッダーロゴ画像をサイトに反映させる(SANGO)

 

まずは、SANGOを使用しているパターンから解説していきます(STORKをご使用の方は飛ばしてOKです)。

 

最初に、WordPressのダッシュボード画面から「外観→カスタマイズ」を選択しましょう。

 

するとテーマカスタマイザーが開かれるので、左側にあるメニューの中から「サイト基本情報」を選択。

表示される設定項目の中にある「ロゴ画像を登録」で、先ほどKeynoteで作成したヘッダーロゴ画像をアップロードし設定しましょう。

そして、下にある「ロゴ画像だけを表示」「大画面表示時にもロゴを中央寄せ(お好みでチェックを入れなくてもOKです)」にもチェックを入れておいてくださいね。

 

無事にロゴ画像を設定することができたら、忘れずに「保存して公開」を押しましょう。すると、実際のサイトでは次のようにヘッダー画像が表示されていますね。

 

これで大まかな設定はOKなのですが、いかんせんヘッダー部分全体の背景色が作成した画像の色と合っていませんね。

次にカラーコードを使用してヘッダー背景色を変更していく必要があるので、STORKの解説は飛ばして次の項目へと進んでいきましょう。

 

ヘッダーロゴ画像をサイトに反映させる(STORK)

 

ここからは、STORKを使用しているパターンから解説していきます(SANGOをご使用の方は飛ばしてOKです)。

 

最初に、WordPressのダッシュボード画面から「外観→カスタマイズ」を選択しましょう。

 

するとテーマカスタマイザーが開かれるので、左側にあるメニューの中から「サイトロゴ・アイコン」を選択。

表示される項目の中にある「ロゴ画像をアップロード」で、先ほどKeynoteで作成したヘッダーロゴ画像をアップロードし設定していきましょう。

 

無事にロゴ画像を設定することができたら、忘れずに「保存して公開」を押しましょう。すると、実際のサイトでは次のようにヘッダー画像が表示されていますね。

 

 

これで大まかな設定はOKなのですが、いかんせんヘッダー部分全体の背景色が作成した画像の色と合っていませんね。

次にカラーコードを使用してヘッダー背景色を変更していく必要があるので、次の項目へと進んでいきましょう。

 

ヘッダーロゴ画像のカラーコードを取得し背景色に設定する

 

さて、SANGO・ STORK共にKeynoteで作成したヘッダーロゴ画像を設定するところまではできましたね。しかしまだヘッダー全体の背景色と画像の色がマッチングしていないので、ここからはカラーコードを取得して背景色を合致させていきましょう。

 

まず、Google Chromeの拡張機能である「ColorPick Eyedropper」を導入していない場合には、以下解説記事を参考に機能のインストールを済ませておきましょう(拡張機能を利用するためにもブラウザは”Chrome”を使っていくのがオススメです)。

 

無事に拡張機能の導入が済んだら、ColorPick Eyedropperを使用して、設定されているヘッダー画像の背景色のカラーコードをコピーしましょう(今回の例で言えば紺色の部分)。

 

無事カラーコードをコピーすることができたら、ヘッダー全体の背景色をそのカラーコードの色に設定していきましょう。

WordPressのダッシュボード画面から「外観→カスタマイズ」を選択していただき、ここからはSANGOとSTORKで少し名称が違うので、それぞれの解説をもとに設定を進めていってください。

 

  • SANGOの場合

テーマカスタマイザーの左側にあるメニューから「色」を選択し、「ヘッダー背景色」の部分に先ほどコピーしたカラーコードをペーストしましょう。

 

  • STORKの場合

テーマカスタマイザーの左側にあるメニューから「サイトカラー設定」を選択し、「ヘッダー背景(メインカラー)」の部分に先ほどコピーしたカラーコードをペーストしましょう。

 

最後に忘れずに「保存して公開」をクリックすれば、これで設定は完了です。お疲れさまでした。

実際にサイトを見てみると、次のように作成したロゴ画像とヘッダー背景色が同色で馴染んでいますね。

 

 

ちなみに、ロゴ画像の大きさを少し変えたいというような場合には、SANGOとSTORKそれぞれ他サイトで解説されている記事があったので、ぜひ以下記事を参考に設定してみてくださいね。

 

最後に

 

以上、オシャレなWordPressサイトのヘッダーロゴ画像を無料で作る方法について解説しました。いかがだったでしょうか?

 

少々手間に感じる作業かもしれませんが、デフォルトのデザインと自作のデザインでは読者が抱く印象というのも大きく違ってきます。実際に「運営者の世界観やコンテンツの質はいいのにヘッダー画像が…」というようなもったいない事例もこれまでたくさん見てきましたが、サイトのデザインというのは読者との良質なコネクションを生み出すための大切な要素です。

サイトの”顔”と言っても過言ではないヘッダー画像、ぜひ今回の解説を参考にオシャレなものを仕上げていきましょう。

 

 

コメントを残す

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