カテゴリ:ヘッダー周り( 6 )

今回は、エキサイトブログのシンプルなスキン「ベーシック2」のヘッダーの色を変更してみたいと思います。

a0342241_15352309.png
現状選べるカラーは
  • black
  • dark brown
  • brown
の三種類。早速変更してみましょう。

1. 変更する色を決める

このスキンではヘッダーと日付の部分の二箇所に色がついています。
ヘッダーだけ変えただけだとちぐはぐになってしまうので、「二色」色を決めておきましょう。
基本的に何色でも構いませんが、1色だけなんとなく色が決まっているという方は下記のサイトで色を決めるのがオススメです。
>指定した色の明るい色・暗い色を作成するツール

a0342241_15400787.png
こちらのサイトは、1色の色を入れるだけで、暗い色明るい色でカラーパレットを作ってくれます。
下の方に行くと細かいグラデーションパターンも出てくるので気に入った色を入れてみましょう。

また、色何色にすればいいかも悩む…というあなたにはこちらがオススメ。
>Flat Inspire

a0342241_15422122.png
フラットデザインを紹介するサイトですが、色ごとにまとまっているページがあります。
こちらはいけてるデザイナーさんたちが使っている色なので安心な感じ…w

今回は下記の2色に決めました。
a0342241_15442413.png
a0342241_15442480.png

2. CSSを変更する

色が決まったら早速CSSを変更しましょう。今回変更するのは下記の2箇所です。

*ヘッダー部.header-wrap .ttl-wrap .header-inner

a0342241_15480505.png

*日付部#blog-main .post-outer .post-inner .post-date

a0342241_15480522.png

それぞれ、backgroudの箇所にさっき選んだ色を入れて保存しましょう。

完成です!

a0342241_15355325.png


[PR]
by exblog-tips | 2016-05-13 16:00 | ヘッダー周り
a0342241_15115443.png

ブログスキンの「梅」背景の水彩はとってもいい感じですよね。でもこれ、梅なしの方がいい気がする…
と勝手に思ったのでカスタマイズしてみましょう。

1. ブログスキン「梅」を編集する

設定>デザインスキンから梅を探しましょう。

a0342241_14361007.png

編集を押したら、CSSから下記のクラスを探します。

.header-wrap .ttl-wrap:after

a0342241_14360351.png

2. クラスを削除orコメントアウトする

このクラスごっそり消すと、梅が消えます。
心配な方はコメントアウトしてみましょう。こんな感じで不要なテキストをくくるとコメントとしてみなされてCSSに反映されません。/* 不要なテキスト */

/*
.header-wrap .ttl-wrap:after {
content: '';
position: absolute;
background: url(http://md.exblog.jp/skn/img/a/01/34/6/top_visual.png) no-repeat right top;
width: 630px;
height: 250px;
top: -10px;
right: -134px;
background-size: contain;
z-index: -1;
}
*/

3. できあがり

作成ボタンを押して、マイスキンに登録しましょう。
a0342241_15014162.png

こんな感じで梅が消えました!簡単ですね。
代わりの画像を入れてみたい方は上記のurlの部分をお好きなurlに変えてみましょう。


[PR]
by exblog-tips | 2016-05-12 15:12 | ヘッダー周り

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

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 | ヘッダー周り

エキサイトブログでは、ブログのタイトルはテキストになっていますが画像にしてちょっと格好良くしたいですよね。最近ではロゴジェネレーターなるものも登場していて、自分でロゴを作ることのハードルもかなり下がってきています。

Squarespace Logo
簡単!ロゴ作成やフライヤー作成にオススメのツール22選

そんなわけでブログタイトルを画像化してみましょう。

ヘッダーのタグを探す

「デザインスキン」→「編集」→「HTML&CSS編集」→「全体」の中から下記のタグを探しましょう。

<$header$>
a0342241_10310442.png

このタグはエキサイトの独自タグになっていて、自動でブログのタイトルを出力してリンクを貼ってくれるタグです。ですがこのタグ、なんと必須ではないのですw
なのでこのタグを消して、新しいタグと入れ替えてあげましょう。

HTMLを差し替える

画像を入れる場合は下記のタグを入れてみてください。画像が表示されるはずです。

<a href=“自分のブログURL”><img src=“画像URL”></a>
a0342241_10342952.png

差し替え完了です!


[PR]
by exblog-tips | 2016-01-14 10:35 | ヘッダー周り

エキサイトブログではかなり自由にナビゲーションを作ることができます。
上部にナビゲーションが欲しかった方は是非お試しを〜。


a0342241_13281251.png


【本文】

<div class="nav-wrap">
<ul class="nav-list">
<li><a href="#">TOP</a></li>
<li><a href="#">はじめに</a></li>
<li><a href="#">プロフィール</a></li>
<li><a href="#">メール</a></li>
</ul>
</div>

【CSS】

.nav-wrap {
background: #E4E9ED;
margin-bottom: 48px;
padding: 18px 0; }
.nav-list li {
display: inline-block;
margin-right: 48px; }
.nav-list {
text-align: center;
font-size: 14px;
font-size: 0.875rem;
line-height: 14px; }

本文の挿入位置はhederの下らへんがいいでしょう。
headerのdivタグが終わった後に入れてみましょう。
<a href="#">の#の中にリンクさせたいURLを入れます。テキストは好きに変えてください。

背景の色を変えたい場合は、CSSの background: #E4E9ED; を変えてみてください。


IE8以下は崩れるかもしれません。



[PR]
by exblog-tips | 2015-12-24 18:29 | ヘッダー周り

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


by エキブ