ワードプレスのテーマをインストールしたら、次はサイトのデザインを少しずつ整えていきましょう。
まずは、初心者でも簡単にできるロゴ画像の作り方をご紹介します。
ペンペン
えな
当サイトの一番上に表示されている「イエナカブログ」という文字も、画像として作成したものです。
簡単&無料でブログやサイトのロゴ画像を作る方法とは
ヘッダーに表示されるタイトルは、読者がいちばん最初に目にするところ。
印象に残るロゴ画像で、サイトやブログのイメージが大きくアップします。
ペンペン
えな
ロゴの作り方はいろいろあるのですが、今回はPhotoshopなどの難しい画像ソフトは使わずに、初心者でも簡単にできる方法をご紹介したいと思います。
もうひとつ、ロゴ画像と一緒に、ファビコンも作ってしまいましょう。
ファビコンとは、Webブラウザでページを開いた際、タブに表示されるアイコンのこと。
たくさんページを開いた時には目印になりますし、読者がお気に入りに登録したときにファビコンがあれば、一目であなたのサイトだと認識してもらえます。
作成の手順は次のとおりです。
ロゴ画像&ファビコンの作成手順
- Canva（キャンバ）でロゴを作成する
- 「バナー工房」でサイズを変更・切り取り
- 「バナー工房」で画像を透過させる
これらのツールはどれも無料で使えます。
他にも、ロゴを無料で作れるサービスはいろいろとあるので、使いやすいものを見つけてみてくださいね。
手順1 Canva（キャンバ）でロゴを作成する
Canva（キャンバ）は、日本語に対応したデザインツールなのですが、かなり便利✨
今回のようなロゴ以外にも、記事中で使う画像も作れるのでぜひ使ってみてください！
えな
まずはCanvaにアクセスします。
Canvaに会員登録（無料）する
一番下の、「個人」を選んでクリックします。
「Canvaへようこそ！」という画面が現れます。
登録方法は3種類の中から選びます。
FacebookやGoogleのアカウントを使う方法なら、認証（パスワードを入力）するだけで登録が完了します。
メールアドレスで登録する場合は、「名前（ニックネーム可）」と「アドレス」を入力するだけで完了です。
登録完了 ⇒ ダッシュボード
このようなデザイン作成画面が現れたら登録は完了です。
えな
今回は、「ロゴ」というデザインを選んで作業していきます。
他のデザインでも、ロゴとして使えそうなものがあれば、そちらを使ってもOKです。
レイアウトの中から好きなものを選ぶ
左側の「レイアウト」の中から、デザインの気に入ったものを選びます。
イラストは、同じく左側の「素材」から選んで変更することもできます。
背景の色や、文字、フォントの種類、大きさなど、好きなように変更することができます。
見本では、背景色を白に、文字色をコーヒーっぽい茶色に代えて、文字も「Coffee Lovers」と打ち代えてみました。
できたら保存してダウンロード
①編集したデータに名前をつけることができます。
名前を付け忘れても、Canvaが適当につけてくれているので、あとでわかりやすく変更しても大丈夫。
②Canvaではシステムが自動保存をしてくれるので、「保存済み」と表示されます。
「未保存」のときには【ctrl＋S】キーを実行すれば上書き保存できます。
画面右上の「ダウンロード」をクリックします。
ファイル形式をPNG、JPEG、PDFから選んでからもう一度「ダウンロード」をクリックし、作成したデザインを画像データとして自分のPCに保存します。
ロゴ画像やファビコンとして使いたいので、「PNG」を選んでダウンロードします。
作業が終わったら、そのままブラウザを閉じてしまってもOKです。
一度デザインした画像は自動で保存されているので、修正も思いのまま。
ファイルサイズが大きすぎることがあるので、次に紹介する「バナー工房」で容量を下げるといいでしょう。
手順2 「バナー工房」でサイズを変更・切り取り
「バナー工房」は、登録・インストール不要の無料WEBアプリです。
誰でも簡単にオンラインで写真と画像を加工・編集できるので、初心者だけでなくずっと使えるツール。
画像の縮小、拡大、切り取り、文字入れ、スタンプ加工などの基本的な画像加工処理はもちろんのこと、「GIFアニメ」と呼ばれる動く画像を作成することができます。
まずは「バナー工房」にアクセスします。
バナー工房
画像を選んで、加工する
使い方は超簡単🎵
トップページから画像を選んで、あとは加工していくだけ。
よく使うのが、「拡大縮小」「切り取り」「容量減」の3つ。
今回は、Canvaで作成したロゴを、好みの大きさに切り取ったあと、サイズを変更しました。
コーヒーカップのイラストをファビコンとしても使おうと思いますので、こちらも切り取っておきます。
手順3 画像を透過させる
手順1と2で作成したロゴ画像やファビコンは、背景が白色の状態です。
もし、あなたが作成するサイトの背景が白なら、このままロゴとして登録してもきれいに表示されますが、背景色を変えたり背景画像を使う場合は、ロゴのまわりが白く囲まれた状態になってしまいます。
そこで、ロゴのまわりの白い部分を透過させる作業が必要になってきます。
先ほどの「バナー工房」で簡単にできますので、続けてやっていきましょう。
使い方はすごく簡単で、画像を選んだら、透過させたい部分をクリックするだけ。
「背景透明」というメニューをクリック。
これで、透過されたロゴ画像が完成しました。
他にも無料で使えるツールが配布されていますので、使いやすいものを選んで作ってみましょう。
初心者でも簡単にできるサイトロゴ画像の作り方 まとめ
今回作成したロゴ画像とファビコンはこんな感じになりました。
アイコンやファビコンは、STORK（ストーク）というテーマで必要なサイズで作っています。
他のテーマを使っている人は、それぞれのマニュアル等を参考にしてくださいね。
ペンペン
えな
他にも、無料で本格的な画像加工ができるGimpなどもすごく便利ですし、画像アプリを使ってオリジナルなロゴやアイコンを作ってみるのも楽しいですよ！
