賢威8の設定(ロゴ設定)

ハワイの鳥

WordPressブログにロゴを設定しようー!

「ブログのロゴの作り方は?」「賢威8 WordPress版に、ロゴ画像を設定する方法を知りたい」というかたへ。

WordPressブログを運営する私が、ロゴの作り方と、賢威8に設定する方法を図解!

ロゴ画像の最適サイズと、ブログ幅にカスタマイズする方法も図解します。

当サイトは賢威8を使っています


この記事を書いた人

・ウェブの初級資格を保有、PCインストラクター経験が少しあり
・ブログに本気で取り組む、A8アフィリエイトBASE(2020年)を1年間受講し学んだ
・賢威8 WordPress版を選び、挫折しないでブログを作成できた

WordPressブログにロゴは必要?

WordPressのロゴ画像(アイコン)

ハワイの鳥

WordPressブログに、ロゴ画像は必要ー!

ロゴとは、ブランドのイメージを図案化したもの。ロゴには下記のメリットがあります。ロゴがあると、ブログをすぐに覚えてもらえますよ!

  • ロゴにより、読者に覚えてもらえる
  • ロゴにより、ブログのイメージを伝えられる
  • ロゴにより、認知度が上がる

ロゴの簡単な作り方

WordPressのロゴ画像(作り方)

ハワイの鳥

WordPressブログにロゴを入れよう! ロゴ画像はすぐにできるよ!

ブログのシンボルマーク、ロゴを簡単に作りましょう。作り方は下記の3種類です。自分で作る方法も図解します。

  1. プロに外注する:ココナラ、クラウドワークス、ランサーズ
  2. プロも使うデザインサイトを利用する:Canva Pro
  3. 自分で作る:Macのプレビュー機能を使用

1. プロに外注する(ココナラ、クラウドワークス、ランサーズ)

  • ココナラ:ロゴ・アイコン画像制作など、スキルのオンラインマーケット
  • クラウドワークス:ロゴ・アイコン画像制作など、仕事のマッチングサイト
  • ランサーズ :ロゴ・アイコン画像制作など、仕事のマッチングサイト

クラウドソーシングサイトを利用すると、ロゴ画像をプロに格安で発注できます。

料金やデザインはいろいろ。5,000円前後から、予算に合わせてロゴを作成できますよ。

2. プロも使うデザインサイトを利用する(Canva)

WordPressのロゴ画像(作成サイト)出典:Canva Pro

プロも利用する、無料でも使える、おすすめのデザインサイト「Canva7500万点の素材が無料」。当ブログのロゴも作ってみました。

好きなデザインを選び、文字を変更するだけで、簡単におしゃれなロゴ画像が完成! 

WordPressのロゴ例(Canva)

ロゴをいくつか作ってみました。スタイリッシュなデザインが多いです。

25万点を超える無料デザイン、7,500万点を超える有料デザイン。ブログにぴったりのロゴが見つかります。

3. 自分で作る(Macのプレビュー機能を使用)

WordPressのロゴ画像(作り方)

Macのプレビュー機能を使うと、ロゴ画像を自分で簡単に作成できます。作成方法を下記の記事で図解しました。

ロゴ画像の最適サイズと設定方法(賢威8 WordPress版)

賢威のロゴ設定(完了)

ハワイの鳥

賢威8はロゴ画像の設定も簡単すぐだよー!

賢威8 WordPress版に、ロゴ画像を最適サイズで設定する方法を図解します。

賢威のロゴ設定

WordPressにログインし、「賢威の設定」をクリックします。

賢威のロゴ設定(画像アップロード)

「ロゴ画像」の「画像をアップロード」をクリックし、画像を選択します。

賢威のロゴ設定(画像設定)

ロゴ画像(512px)を設定しました。ロゴ画像を512px以上で設定しておくと、ファビコン設定にも使えますよ。

賢威のロゴ設定(画像設定保存)

下の「変更を保存」ボタンをクリックします。

賢威のロゴ設定(画像サイズ設定)

ブログのプレビューです。ロゴ画像を最適サイズに調整しましょう。

賢威のロゴ設定(画像サイズ設定2)

外観」、「カスタマイズ」をクリックします。

賢威のロゴ設定(画像サイズ設定3)

追加CSS」をクリックします。

賢威のロゴ設定(画像サイズカスタマイズ)

下記のコード(賢威8マニュアルより)をコピーし、「追加CSS」に貼り付け、「公開」ボタンをクリックします。

※ロゴ画像の最適サイズは150px前後です。「width: 150px;」の数値を変えて、サイズを調整します。

.site-title img{
width: 150px;
}

賢威のロゴ設定(完了)

ロゴ画像のプレビューです。

賢威のロゴ設定(カスタマイズ)

ロゴの位置を中央にし、右のブログ説明文を非表示にするには、下記のコードも「追加CSS」に貼り付けします。

.keni-header .site-title,
.keni-header_col1 .site-title{
float: none;
max-width: 100%;
text-align: center;
}

.keni-header_col1 .keni-header_cont{
max-width: 100%;
}

.keni-header_col2 .keni-header_cont{
display: none;
}

.site-description {
display: none;
}

賢威のロゴ設定(カスタマイズ2)

ロゴ画像が中央になり、右の説明文が非表示になりました。

ロゴ画像をブログ幅にカスタマイズする方法

賢威8の設定(ロゴのブログ幅設定)

ハワイの鳥

ロゴ画像をブログ幅にすると、ブログのインパクトが強くなるよー! 賢威8なら、ブラウザ幅のロゴも簡単!

賢威8 WordPress版で、ロゴ画像をブログ幅にカスタマイズする方法も解説しましょう。

当ブログは、賢威8 WordPress版を使い、ロゴ画像をブログ幅に設定しています。設定方法を下記の記事で図解しました。

まとめ

賢威(公式サイト)

出典:賢威8&7.1 – 信頼と実績のSEOテンプレート 公式サイト

ハワイの鳥

賢威8 WordPress版は、ロゴの設定もすぐだよー!

ロゴの作り方と、賢威8 WordPress版に、ロゴを最適サイズで設定する方法を図解しました。WordPressのテンプレート「賢威」は、ロゴの設定とカスタマイズも簡単です。

ワードプレスのテーマ「賢威(けんい)」 詳細情報

  • 名称:賢威(けんい)
  • 内容:ウェブサイトのSEOテンプレート(ワードプレス版とhtml版があり)
  • 価格:24,800円 ※2020年10月現在

賢威8&7.1 – 信頼と実績のSEOテンプレート 公式サイト


2万人を超えるユーザーが選んだ
SEOテンプレートの大ロングセラー



あわせて読みたい記事

「賢威って正直なところどう?」というかたは、こちらをチェック!

私が「賢威を選んで本当によかった」と思った理由です。

賢威8 WordPress版を使ったブログの始め方・作り方を、初心者向けに完全図解しました。

賢威の設定方法を初心者向けに図解しました。初期設定も簡単にできる!