タイトルロゴによってホームページの印象もずっと変わるもの。
当サイトも以前から気になっていたのだが、ようやくタイトルロゴを作ってみた。
といっても、簡単にバナーを作成できる「バナープラス」を使った。
「バナープラス」を使ってタイトルロゴを作り、賢威テンプレートに設定する方法を解説します。
「バナープラス」とは？
賢威テンプレートでは、タイトルは文字かロゴを選べる。
私が所有する他のサイトでは3年ほど前に無料ツールを使ってロゴタイトルを作成したのだが、そのツールが何だったのか失念した上、記録もない為、その後、作成した新規サイトのタイトルは文字のままであった。
賢威テンプレートはSEOに優れているが、デザインは色を変えることしかできないので不満があった。
「賢威」テンプレートの詳細はこちら
そこで、簡単にロゴやバナーが作成できるという「バナープラス」というツールを購入。
ただ、1年近く、使わないまま放置。
ようやく、先日、「バナープラス」を使ってロゴタイトルを作成した。
従って、「バナープラス」でどこまで完成度の高いロゴやバナーを作成できるのか、どうやってそれを実現するのか、については今のところ分からない。
とりあえず、直感的に作ってみたという程度。
今後、記事タイトル等のバナーも作成していきたいと思う。
「バナープラス」の詳細はこちら
タイトルのサイズを測る
ロゴを作成するには、幅×高さサイズが必要だ。
まず、文字タイトルの幅×高さサイズを測る必要がある。
Webページ内のサイズを簡単に測れるGoogleクロームの拡張機能「Page Ruler」が便利。
下記からインストールできる。
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn
「＋ 無料」等のバナーをクリック。
「Page Ruler」を追加しますか？→「追加」をクリック。
使い方は簡単。
ツールバーの「Page Ruler」（物差しマーク）をクリック。
計りたいエリアを囲む。
範囲は微調整できる。
タイトルロゴの背景色を透明にする場合、必要のない作業だが、私はヘッダーの背景色も調べる。
というのは、ロゴとその背景との相性があるからだ。
サイトの色を調べるのにはGoogleクロームの拡張機能「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”>
「ファイルを更新」をチェック。
これで完了。
