ロゴの作り方とWordPressストークでヘッダーにロゴを入れる方法を解説!(画像18枚で図解)

初心者ブロガーの一歩先を行く、なかのっちです@fumikondatackle

ブログ初心者でもロゴを自作できる方法をシェアしますね。ブログ初心者のボクでも作れたやり方です。このページを読めば、こんなロゴが数分の作業で作れます。本当です。

 ↓

出来上がったロゴ画像

 

ググったり、ブログ内検索をかけたり、ストークの公式サポートページを見たり、またググったりすること約90分、、、なんとかストークのヘッダーに「自作のロゴ」を表示させることができました。

なかのえいじ
むっちゃ疲れた…

 

そこで、ボクと同じような悩みを抱えているであろう「ブログ初心者」のあなたに。こんな苦労をさせてはいけない!と想い。

なかのえいじ
一発で悩みを解決できる記事を書きたい!

というモチベーションで、この記事を作成しました。画像を18枚使いながら、なるべく、わかりやすいことばで書きましたので。参考になればうれしいです(^^

ロゴの作り方(無料)

まずは、ロゴの作り方を調べました。ググってもいい情報が見つけられなかったので。おしゃれなトップページを作られているブロガーさんのブログを訪問し「ブログ内検索」をかけてみました。すると、ロゴをかんたんに作れるサイトを紹介しているページを見つけることができました!

今回は、イントラサロンで知り合ったMURAKICHI(むらきち)@murakichi_yさんのブログで紹介されていたサイトを利用しました。「LOGASTER」というサイトです。こちらのサイトでロゴが自作できます。

LOGASTERさんのサイトはこちらです。

このブログで使用しているWordPress有料テーマ『STORK(ストーク)』の販売ページはこちらです。

なかのえいじ
ググるよりも、信頼できるブログでの「サイト内検索」が便利ですね!

 

では、実際にロゴを作成してみましょう。手順は3つです。

  1. ブログ名とロゴのイメージを入力する。
  2. ロゴのデザインを選択する。
  3. ロゴのデザインを編集する。

クリックと簡単な操作だけで、きれいなロゴが作れます。本当です。順番に解説していきますね。

 

1.ブログ名とロゴのイメージを入力する

LOGASTERさんのサイトへいきます。緑色の「ロゴを作成」のボタンをクリックします。

LOGASTERのトップページ

 

「会社名」のところに、ロゴで使用したい文字を入力します。ぼくはブログ名を入力しました。ロゴの文字を1列ではなく、2列で表示させたい場合は、「スローガンを追加」をクリックします。

ブログ名を入力します

 

「スローガン」に入力したい文字を入れます。

次に「ビジネスタイプの選択」をします。あなたが作りたいロゴのイメージに近い「業種」を選択すればOKです。

スローガンを入力します

 

ぼくは、商売やお金をイメージさせるロゴを作りたかったので「ファイナンス」を選択してみました。※ロゴのイラストは、後で変更が可能なので、どれを選んでもらってもOKです。

ビジネスタイプを選んだら、「次へ」をクリックします。

ビジネスタイプを選択することでロゴのデザインが絞り込まれます。

 

ロゴに表示したい文字を入力するだけで、ロゴの一覧が作成されました。あまりにも簡単に出来上がってしまうので驚きです。

ワンクリックで作成されたロゴの一覧です

 

ものすごい数のロゴが作成されています。どれにするか迷ってしまいますね。これがすべて無料で利用できます。

 

2.ロゴのデザインを選択する

自分のイメージに近いロゴを選択します。イラストや文字の色などは、あとからでも変更が可能です。※もちろん、そのまま使用してもらっても、ぜんぜんOKなレベルのクオリティですよね。

ロゴを選択したら、つぎは緑色の「次へ」をクリックします。

作成されたロゴの一覧

 

3.ロゴのデザインを編集する

「ロゴデザインの編集」をクリック。

ロゴデザインの編集をクリック

 

  1. イラストをクリックすると、大きさや配置を変更できます。
  2. イラスト自体を変更することもできます。
  3. 色も変えられます。
イラストの大きさ、色、変更が編集できます

 

イラストと同じように、文字も編集が可能です。

  1. 文字をクリックすれば、文字の大きさや配置を変更できます。
  2. 色やフォントも変更可能です。
文字の大きさや配置や色も編集できます

 

ドラッグ&ドロップで、イラストとロゴを並べ替えてみました。大きさも変更してあります。

配置や大きさを変更してみました

 

つぎに、色の編集方法を解説します。色をクリックすると、プルダウンメニューが出るので、「さらに色…」をクリックします。

 

色を変更できます。ぼくはヘッダーの上に「白抜き」でロゴを表示させたかったので、白色に変更しました。

色を選択します

 

「損する店舗」と「儲かる業者」の文字が見えなくなりましたが。白色なので見えにくくなっているだけで、文字は消していません。

文字を白色にした

 

「次へ」をクリックします。

最後に「保存」をクリックしたら完成です。

保存をクリックしたら完成です

 

「ロゴファイルをダウンロード」を選択して、「無料ー透かしマーク入り小サイズロゴ」を選択します。こちらは無料ですが、大きなサイズは有料となります。

無料版がダウンロードして利用できます

 

以上です。かんたんな操作でロゴが完成しました!

ここで、ちょっとコーヒーブレイク…

ここらで一息ついてコーヒーブレイク

(※こんなアイキャッチ画像も、ブログ初心者でもかんたんに作成することができるんですよ。アイキャッチ画像の作り方の記事はこちらをクリック。)

次は、作成したロゴをブログのヘッダーに表示させる作業です。もうちょっとですので、がんばりましょう!

 

WordPressテーマ「STORK(ストーク)」でヘッダーにロゴを表示させる方法

では作成したロゴを、ヘッダーに表示させる方法を解説していきます。ぼくはWordPressの有料テーマSTORK(ストーク)を利用しているので、ストークでのやり方を説明しますね。

手順は3つです。

  1. 「外観」→「カスタマイズ」をクリック
  2. 「サイト・ロゴアイコン」をクリック
  3. 「画像を選択」をクリックし、挿入したい画像を選ぶ

 

(1)「外観」を選択し、「カスタマイズ」をクリック。

テーマからカスタマイズを選択する

 

(2)このとき、ヘッダーのロゴの位置には、テキストで「ブログ名」が表示された状態になっています。

「>サイトロゴ・アイコン」をクリックします。

ろご・アイコンをクリックする

 

(3)「画像を選択」をクリック。

画像を選択をクリック

 

ヘッダーに表示させたい「ロゴ画像」をクリックすればOKです。

ヘッダー内のロゴの位置に表示させたい画像を選択する

 

こんな感じに仕上がりました。以上で、完了です。おつかれさまでした!

損する店舗 儲かる業者のヘッダーロゴです

 

ブログ運営に関するおすすめコンテンツ

▼おすすめのサービス一覧

ボクがブログ運営で利用しているサービスの一覧をシェアしますネ。

  • PC環境:Windows7※本当は、カフェでMacBookを開きノマドワーカーを気取ってドヤりたい(笑)
  • レンタルサーバーエックスサーバーのX10プラン
  • ドメインお名前.comとバリュードメイン
  • ネット環境:NTTの光からauひかりへ乗り換え申請中
  • Google:Gメール、Analytics、SearchConsole、AdWords(キーワードプランナー)、フォト、youtube
  • WordPressテーマSTORK(ストーク) 「はぁ?ワードプレスって何??」ていうブログ初心者のボクでも、このブログくらいの見た目であれば、超かんたんにカスタムすることが可能。ざっくり言うと、ストークは「ホームページ作成ソフト」や「超使いやすいホームページビルダー」みたいなものです。
  • サロン:八木仁平さんのイントラサロン、勝間和代コミュニティ
  • 画像加工系:WinShot、PhotoScape、Unsplash、Canva、集中線追加ツール、等など
  • SNS:LINE@、twitter、facebook、Messenger
  • その他amazonプライム、Kindle、note、FeBe、Podcast

 

何か質問があれば、ツイッターでボクをフォローしてDMを飛ばしてください。もしくはfacebook Messengerでメッセージしてくださいね。

なかのえいじ
ググってもわからないときは知ってる人に聞くのがベスト!

 

▼参考書籍

  • 「ブログ運営の教科書」八木仁平
  • プロブロガーによる「ブログ運営の教科書」イケダハヤト

 

2 件のコメント

    • 参考にしていただけて、よかったです!

      いい感じのロゴに仕上がりましたね!

      ぐっちーさん、記事のご紹介ありがとうございましたm( _ _)m