タグ:カスタマイズ ( 4 ) タグの人気記事

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

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]
by exblog-tips | 2016-02-25 16:07 | ヘッダー周り

エキサイトブログの「夏の海」のスキンを作って、イラストの差し替えを行ってみましょう。
スタンダードなテンプレートのヘッダーは下記です。

a0342241_15512737.png

好きな画像を用意する

ヘッダーに置く新しい画像を書くorフリー素材などで探してみましょう。
今回はガーリー素材のイラストサイトからイラストをいくつか落としてみました。
どれにするか決めたら、エキサイトブログにアップロードしてURLを控えておきましょう。
細かいアップロードの仕方はエキサイトブログのcolorfulのブログを使って背景画像をアレンジの記事で確認してください。

a0342241_15443573.png

とても可愛らしいイラストが満載の素材サイトです。
ガーリー素材

CSSを変更する

CSSから .header-wrap を検索しましょう。下記のコードからURLを入れ替えます。

a0342241_16011401.png

サイズを調整したい場合は、background-size の数値を変更してみてください。

background: url("ここにURLを入れる") no-repeat right center;background-size: 200px;

完成です!

a0342241_16041181.png

[PR]
by exblog-tips | 2016-02-03 16:05 | ヘッダー周り

エキサイトブログで、メニューのカテゴリやタグをクリックすると、それに紐付いているブログの記事が一覧で出てきますよね。
ですがこれ、ぐしゃっとしていてわかりにくい・・・。
むしろ消したいなーと思ったので消し方をあげときます。

a0342241_18533339.png

全部消すとなんのページだかわからなくなってしまうので、最低限カテゴリ名の部分だけ残しました。

a0342241_18540782.png

CSS

基本的にはCSSに追加しましょう。背景が白い場合はうまくいくと思います。

#category-page .post:first-child { padding: 0; margin: 0; }
#category-page .post:first-child .post-body { display: none;}
#tag-page .post:first-child { padding: 0; margin: 0; }
#tag-page .post:first-child .post-body { display: none;}
#archive-page .post:first-child { padding: 0; margin: 0; }
#archive-page .post:first-child .post-body { display: none;}

色をつけたい場合

場合によっては下記のように白が残ってしまい変な感じになってしまいます。背景色と同じ色にしてなじませましょう。

a0342241_19000704.png
#category-page .post:first-child .post-title,
#tag-page .post:first-child .post-title,
#archive-page .post:first-child .post-title { background: ここに背景の色を入れる;}

[PR]
by exblog-tips | 2016-02-01 19:06

エキサイトブログでも背景を大きく使ったスキンが増えてきましたね。
今回はエキサイトブログスキン「Photo Style」を使って背景画像を自分の好きなものに変えてみましょう。

a0342241_11445901.png

マイスキンを編集する

今まで適用してから編集していたのですが、編集してから保存もできたのでまずは編集からいきましょう。

a0342241_11514646.png

CSSのタブを開いて、下記のタグを探しましょう。

#main-area
a0342241_11514065.png

background: urlの中に反映したい画像のアドレスを入れましょう。
既存の画像の幅は1280pxですが、高さに合わせて拡大縮小されるので小さい画像を入れても大丈夫でした。
ただし、背景画像いっぱいに表示されるので、画像によってはいい位置にできない、などあると思います。
その場合はbackground-attachmentを消してみましょう。

background-attachment: fixed;

表示したい位置が明確に決まっている場合はbackground-positionを変更してみましょう。

右、下を表示したい場合

background-position: right bottom;
a0342241_12062610.png

写真を変えるだけでガラッと違うイメージになるので、ぜひ好きな写真に変えてみてくださいね。


[PR]
by exblog-tips | 2016-01-21 12:07 | マイスキン

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


by エキブ