エキサイトブログのヘッダー画像でロゴを作る

カスタマイズ用のスキンを使用するときに、
このグレイの部分いらないのになー、と常々思います。

a0342241_14471804.png

もはやサイトのタイトルとかは画像にしたいなーと思う方も多いはず。
やれSEOだのでブログのタイトルはテキストの方が良いなど言われておりますが、やっぱり画像だと見栄えがいいですよね。
そんなわけで今回はブログのロゴを作って背景画像を自分で作成しようと思います。

オリジナルのロゴを作る

最近のサービスは本当にありとあらゆることがweb上でできますね。まずはロゴサービスから。
割と有名でしょうか?知る人は知るロゴ作成サイト。結構格好いいロゴができます。

a0342241_14494036.png
http://www.squarespace.com/logo

今回はこんなロゴを作ってみました。あなたのブログタイトルで作るといいですね!

a0342241_14532372.png

背景となる画像を用意する

ロゴができたら上に載せる背景を探しましょう。ロゴだけでも良いのですがやっぱり背景があった方が雰囲気が出ますね。
今回は女子向け画像に定評のあるGIRLY DROPというサイトで画像をゲット。女子っぽい。

a0342241_14555132.jpg
GIRLY DROP

画像を合成する

画像が二つ用意できたら合成しましょう。合成って言ってもこの場合は空いた真ん中のスペースにロゴを配置します。
だけどphotoshopなどのペイントソフトなんて持っていないよというあなたに朗報です!
これまたweb上で完結できるサイトがあるんですね。便利。

a0342241_14580535.png
pixlr.com

上部メニューのファイル→画像を開くから背景となる画像とロゴ画像を開きましょう。開いたら右側のレイヤーを背景画像にドラッグ&ドロップ。

a0342241_15065193.png

やっつけですがこんな感じで完了!

a0342241_15074645.jpg

スキンに反映

できた画像をエキサイトブログにアップロードしてURLを控えましょう。それができたらスキンに反映させていきます。まずはデザインスキン→カスタマイズから、お好きなカスタマイズカラムをチョイスしてください。
編集から画面に入ります。

a0342241_15130277.png

HTMLの修正

画像はHTMLに書かれているので、HTMLの上から2番目の行をみてください。赤枠の箇所がURLになります。
ここに先ほど作ったロゴ入り画像のURLを入れます。一回保存。

a0342241_15130256.png

不要なものを消していく

保存してプレビューするとスキンが崩れているのがわかります。せっかく画像にロゴ入れたのでこの灰色の部分はまるっと不要。
CSSを使って消していきましょう。CSSの一番下に下記を挿入しましょう。

a0342241_15121311.png
#titlearea { display: none;}

display: none;は、画面上から要素を消してくれる便利なCSSです。
他にもこれはいらないなー、という部分があればクラス名を指定してセットしてあげると消えてくれます。
削除するとなくなってしまいますが、display: none;は、タグ自体はそこにあるけど非表示にしているだけ、という概念なので
また戻したいときなどに便利ですね。

a0342241_15210232.png

そんなわけで、ブログスキンのカスタマイズの完成です!
ちなみに元画像のサイズは、800×300です。これを目安につくると変に崩れたりしないのでできればこのサイズで作るといいかも。
あなたのブログでも是非試してみてくださいね。


[PR]
名前
URL
画像認証
削除用パスワード
by exblog-tips | 2016-02-25 16:07 | ヘッダー周り | Comments(0)

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブロまん