タイトルロゴの作り方

タイトルロゴによってホームページの印象もずっと変わるもの。
当サイトも以前から気になっていたのだが、ようやくタイトルロゴを作ってみた。
といっても、簡単にバナーを作成できる「バナープラス」を使った。
「バナープラス」を使ってタイトルロゴを作り、賢威テンプレートに設定する方法を解説します。

「バナープラス」とは?

賢威テンプレートでは、タイトルは文字かロゴを選べる。
私が所有する他のサイトでは3年ほど前に無料ツールを使ってロゴタイトルを作成したのだが、そのツールが何だったのか失念した上、記録もない為、その後、作成した新規サイトのタイトルは文字のままであった。

賢威テンプレートはSEOに優れているが、デザインは色を変えることしかできないので不満があった。
「賢威」テンプレートの詳細はこちら

そこで、簡単にロゴやバナーが作成できるという「バナープラス」というツールを購入。
ただ、1年近く、使わないまま放置。

ようやく、先日、「バナープラス」を使ってロゴタイトルを作成した。
従って、「バナープラス」でどこまで完成度の高いロゴやバナーを作成できるのか、どうやってそれを実現するのか、については今のところ分からない。

とりあえず、直感的に作ってみたという程度。
今後、記事タイトル等のバナーも作成していきたいと思う。
「バナープラス」の詳細はこちら

タイトルのサイズを測る

ロゴを作成するには、幅×高さサイズが必要だ。
まず、文字タイトルの幅×高さサイズを測る必要がある。

Webページ内のサイズを簡単に測れるGoogleクロームの拡張機能「Page Ruler」が便利。
下記からインストールできる。
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

「+ 無料」等のバナーをクリック。
「Page Ruler」を追加しますか?→「追加」をクリック。

使い方は簡単。
ツールバーの「Page Ruler」(物差しマーク)をクリック。
計りたいエリアを囲む。

page-ruler

範囲は微調整できる。

タイトルロゴの背景色を透明にする場合、必要のない作業だが、私はヘッダーの背景色も調べる。
というのは、ロゴとその背景との相性があるからだ。

サイトの色を調べるのにはGoogleクロームの拡張機能「ClorPick eyeDropper」が便利。

色がコードで表示されるのでこれを使う。

「ClorPick eyeDropper」色

「バナープラス」でタイトルロゴ作成

「バナープラス」を起動。
●ステップ①キャンパス設定
◇キャンパスサイズ
サイズは、「Page Ruler」で調べたサイズを入力。
◇キャンパス色
「塗りつぶし」はデフォルトでは、「#FFFFFF」となっているが、「ClorPick eyeDropper」で調べたコードを入力。
◇枠線
デフォルのまま
●ステップ②画像設定
デフォルのまま
●ステップ③文字設定
「新規追加」をクリック→「新規追加」の右横のスペースに文字(タイトル)を入力。
当サイトの場合は「アフィリエイトサイトの作り方」。
右の「あ」の中から適当なものを選ぶ。

「バナープラス」文字

●ステップ④画像出力
保存する形式にはJPEG、PNG、GIFの3種類あるが、使い分けは次の考え方で良いと思う。
写真が入ればJPEG、それ以外はPNG。
但し、JPEGでは背景色を透明にできない。

形式を選んだら、右横の「バナー生成」をクリック。
任意の場所に名前をつけて保存。
この時、「ファイルの種類」を前に選んだ形式(拡張子)にすること。

ロゴタイトルを「賢威」に設定

①まず、作成したロゴタイトル(画像)をアップ。
「賢威」ダッシュボードの「メディア」をクリック。
ローカルに保存した画像をドロップ。
「タイトル」と「代替テキスト」に名前を入力。
URLをコピー

②ロゴタイトルを「賢威」に設定
「外観」→「テーマの編集」→「テーマヘッダー(header.php)」
下記のソースを探す。

<div id=”header-title”>
<p class=”header-logo”><a href=”<?php bloginfo(‘url’); ?>”><img src=”<?php bloginfo(‘template_url’); ?>/images/logo.png” alt=”<?php title_keni(); ?>” /></a></p>

上記の<img src=”<?php bloginfo(‘template_url’); ?>/images/logo.png” alt=”<?php title_keni(); ?>” />を下記に変更。

<img src=”画像をアップした時にコピーしたURL” width=”xxx” height=”xxx”>

「ファイルを更新」をチェック。
これで完了。


ワードプレスの関連記事

このページの先頭へ