ワードプレステンプレートの『賢威6.0』導入記録。
今度はロゴ画像を変更してみます。
これが初めの状態。
テキストにしちゃったんですけどやっぱり味気ないですよね。
というわけでこの『ちゃぼログ！』の部分を前のように画像にしてみます。
まずはphpの確認。テーマ編集から該当の場所を探してみます。
<a href=”<?php bloginfo(‘url’); ?>”>~</a>で挟まれている部分を変更すればいいみたいですね。
<?php bloginfo(‘name’); ?>の部分に作成したロゴ画像をぶち込めばOKなのかな。
SEO的にもしかしたらやばいのかもしれないけど下にh1テキストもあるし気にしないことにします。
（phpとかの知識は全くありません・・・）
ヘッダー画像やロゴ画像の作成にはいつもシリウスのヘッダー･ロゴ画像作成機能や『GIMP 2』を使っています。
ですがGIMP2はまだ使いこなせないのでいつもどおりシリウスを起動することに。
シリウスの作成機能は柔軟性はあまりないんですがフォントのバランスが絶妙なのが特徴。
GIMP2でも同じようなフォントで作ることは出来るのでしょうが、面倒なので文字を入れるときは大体こちらを使っています。
まえと同じように隣にかがみんの画像を入れてみました。
画像はサーバーにアップロードしてそれを読み込んだほうがいいのでしょうが面倒だし良く分からないんでワードプレスに上げたやつをそのままいれることにしました。
適当な記事にロゴ画像をアップロードします。
そしてソースをコピー。
それを先ほど確認したヘッダーロゴの部分に挿入します。
うーんなんか、かがみんが浮いている感じ。
賢威5.0を使っていたときのものを確認してみます。
かがみんの画像がななめになっていて文字も入ってますね。
画像の文字入れはともかく画像を斜めにするのはシリウスのツールじゃ無理なのでしぶしぶGIMP2を起動します。
今更ですがソースをいじるときは万が一に備えてメモ帳に該当箇所をコピペしておくことを忘れずに。
完成。
出力するときはJPEGだと斜め以外の場所も背景として白くなってしまうので注意。
とりあえず貼り付けてみました。
うーん、ロゴ画像の位置は問題ないですが右側のヘッダーテキストの位置がちょっと気になる。
もう少し下にしたいですよね。
ってなわけでまたテーマ編集にもどってスタイルシートから「design.css」を選択。
ヘッダーテキストの箇所に「margin-top」を加えました。
これを入れることで該当の位置を設定した値だけ下に押しやることが出来ます。
いい感じになりました。
この後微調整を行い最終的に「margin-top： 23px;」で落ち着きました。
やっぱりロゴ画像を設定したら一気にブログの個性が出てきます。
(今回のやり方はSEO的にやばいかどうか私の方では判断しかねますので参考にされる際は自己責任でお願いします。)
関連コンテンツ