超攻撃的ゴレイロ “じゅんぼ~” No.16

フットサルチーム『Passion』のゴレイロのメモ帳

amebloをカスタマイズしてみる<其の弐> ~CSSをイジってカスタマイズしてみる~

『見た目をカスタマイズしてみる』

 

ブログのデザインを決めた次は、ヘッダ部分や背景、サイドバーなどの

色を決めていきます。

そのために、適用中のデザインと書いてある下にカスタマイズとあるので、

それをクリックします。

f:id:junkichi16:20130215074530j:plain

すると、次のような画面に移動します。

f:id:junkichi16:20130215080732j:plain

ヘッダ、バックグラウンド、メインコラム、サイドコラムの色をここで選択します。

[ プレビュー ]ボタンをクリックしてどんな感じになっているかを確認しながら

各部分の色を決めていきます。

※ちなみに私は、ヘッダは「CCCCCC」、バックグラウンドは「000000」、

 メインコラムとサイドコラムは「FFFFFF」を選択しました。

色が決定しましたら、[ 保存 ]をクリックして保存します。

 

「色をつけただけじゃなんか寂しい」という方はデザインのカスタマイズのページか

デザインの変更のページからCSSの編集をクリックします。

 

ブログデザインのCSSの編集のページでは、CSSをいじれます。

どのソースが何処を指しているのかがわかるようにコメント(/*と*/で挟まれた文)で

きちんと説明されているので、変更したい箇所を変更するのは容易に行なえます。

f:id:junkichi16:20130215082721j:plain

 

「/*1)ブログタイトルの文字サイズを変更する*/」は言葉の通り

ブログタイトルの文字サイズを決める部分です。

初期値で構わないと思います。

ただ、ブログタイトルが長い方は文字サイズを小さくすると良いかもしれませんね。

 

「/*2)ブログタイトルの文字色を変更する*/」も言葉の通り

ブログタイトルの文字の色を決める部分です。

ヘッダで決めた色と同じにならないようにすることは当然のこと、

見やすい色にした方が良さそうですね。

“#”以降の6ケタを変更すれば色を変えられます。

 

「/*3)ブログ説明の文字サイズを変更する*/」はブログタイトルの下に表示される

ブログの説明文の文字サイズを変更する部分です。

ブログタイトル同様に長い方は文字サイズを小さくすると良いかもしれませんね。

 

「/*4)ブログ説明の文字色を変更する*/」も言葉の通り

ブログの説明文の文字の色を決める部分です。

ブログタイトル同様にヘッダで決めた色と同じにならないようにし、

見やすい色にした方が良さそうですね。

“#”以降の6ケタを変更すれば色を変えられます。

 

「/*5)ページ背景に画像を入れる*/」では背景に画像を入れることができることを

示唆しており、画像フォルダで追加した画像を入れることができます。

画面左のリストから投稿・編集の下にある画像フォルダをクリックします。

f:id:junkichi16:20130215084230j:plain

この画面では、背景に入れる画像だけではなく、ヘッダに使用したい画像や

その他のパーツで使用したい画像をアップロードすることができます。

ただし、背景に入れる画像以外はヘッダや各カラムの幅(width)や高さ(height)を

CSSで設定し、それに適したサイズの画像をアップロードし、

CSSにて使用できるように設定しなければなりませんので注意が必要です。

 

「/*6)ページ全体の文字色を変更する*/」はブログで使用される文字色です。

各カラムの色によっては見にくくなる場合がありますので、

初期値で構わないと思います。

もし、初期値で文字が読みにくい場合には変更して最良の色にしてください。

 

「/*7)記事タイトルの文字色を変更する*/」も言葉の通り

記事のタイトルの文字の色を決める部分です。

次に書きます記事のタイトルの背景色を変更される場合には、

記事のタイトルの背景色に合わせて色を変更してください。

 

「/*8)記事タイトルの背景色を変更する*/」も言葉の通り

記事のタイトルの背景色を決める部分です。

記事のタイトルの背景色を変更した場合には、

記事のタイトルの文字の色が読みにくくないか確認してください。

読みにくい場合にはどちらかを変更してください。

 

「/*9)サイドバーの見出し文字色を変更する*/」はサイドバーの

PRやプロフィールといった文字の色を決める部分です。

次に書きますサイドバーの見出しの背景色を変更される場合には、

サイドバーの見出しの背景色に合わせて色を変更してください。

 

「/*10)サイドバーの見出し背景色を変更する*/」はサイドバーの

PRやプロフィールといった文字の背景色を決める部分です。

サイドバーの見出しの背景色を変更した場合には、

サイドバーの見出しの文字の色が読みにくくないか確認してください。

読みにくい場合にはどちらかを変更してください。

 

ここまでの1から10までは、誰でも簡単に変更できる部分でした。

ここからは難しくないと思われる部分で、見た目をより良くできる部分の

説明をしていきたいと思います。

 

まず、書いておかなくてはならないのは、

上の方で書いたソース(命令文)は、下の方つまり後で書いたソース(命令文)に

上書きされる形になります。

どういうことかと言いますと、先に命令されたことを打ち消したいなら、

後に書けば良いということです。

amebloのCSSの編集で言えば、「/*■■■■■■■■■■■ カラムタイプ ■■■■■■■■■■*/」と

書かれた最後のソース(命令文)の後に自分の命令したいことを書けば良いのです。

ブログ全体の横幅の変更も可能ですし、ヘッダ部分の高さも変更可能です。

ただ、ブログ全体の横幅を変更するとサイドバーの横幅の調整や

メインカラムの横幅の調整をしなければならなくなるので、少し面倒くさいです。

が、CSSを上から下まで見ていくとコメントのおかげで

何処を書き換えれば調整できるかがわかりますので、

変更される方は根気強く変更してください。

widthが横幅でheightが高さなど簡単なものもあれば

marginやpaddingなどちょっとだけ勉強が必要なものもありますが、

調べれば簡単に覚えられると思います。

 

それから、ヘッダに画像を入れる場合には、ヘッダの横幅と高さに合った

画像をアップロードした後、CSSの最後に

#header {

width:XXXpx; ←横幅の数値

height:XXXpx; ←高さの数値

background-image:url(CSSの上部に表示されている画像のパス); ←ヘッダ画像

}

と記述すればOKです。

ただ、これだけでは画像を入れただけですので、

画像にトップページへ戻るための細工をします。

#header h1 a{

width:900px;

height:300px;

display:block;

position:absolute;

text-decoration:none;

}

これで、ブログタイトルの大きさが900px×300pxとなり、

ヘッダ画像と同じ大きさになりました。

そして、ヘッダ画像にタイトルが入っている場合には

text-indent:-9999px;

と記述しておけば、ブログタイトルが画面から消えるので邪魔になりません。

ブログの説明文も邪魔であるのならば、

#header h2{

display:none;

}

と記述することで、画面には映らなくなります。

 

また、ヘッダ画像だけではなく記事タイトルやサイドバーの見出しの背景にも

画像が入れられます。

 

 

最後に、ヘッダ画像の下にナビゲーションを入れる方法を説明します。

CSSの最後に

#wrap{

margin-top:50px;

}

と記述します。

そうすることで、ヘッダ画像の下に50pxのスペースができます。

次に、画面の左のリストからサイドバーの下にある

フリースペース編集をクリックします。

f:id:junkichi16:20130215093354j:plain

このフリースペース編集のテキストエリアに

<div id="topmenu">

<ul>

<li><a href="http://ameblo.jp/xxxxxx/">ホーム</a></li>

<li><a href="http://peta.ameba.jp/p/showPeta.do">ペ タ</a></li>

<li><a href="http://msg.ameba.jp/receiveBox.do">メッセージ</a></li>

<li><a href="http://ameblo.jp/xxxxxx/bookmark.html">リンク</a></li>

</ul>

</div>

と記述します。

※上記はわかりやすいように改行しておりますが、

 フリースペースに記述する際には、改行せずに続けて記述してください。

 また、xxxxxxには自分のIDを記述してください。

f:id:junkichi16:20130215094555j:plain

[ 保存 ]をクリックしたら、またまたCSSの編集のページに戻ります。

CSSの一番最後に、

#topmenu {

width:XXXpx;/*ヘッダーの横幅サイズ*/

font-size:XXpx;/*文字のサイズ*/

font-weight:bold;/*太字*/

line-height:2;

display: block;

}

 

#topmenu ul{

margin:0;

padding:0;
}

 

#topmenu li {

width:XXXpx;/*メニュー1つの横幅サイズ*/

margin:Xpx;/*メニュー間の隙間幅*/

border:Xpx double #FFFFFF;/*境界線の線種と色*/

background-color:#009900;

text-align:center;/*中央寄せ*/

display:inline;/*IE6対策*/

list-style:none;

float:left;

}

 

#topmenu li a {

color:#FFFFFF;/*リンク文字の色*/

border:1px solid #FFFFFF;

margin:1px;

text-decoration:none;

display:block;

}

 

#topmenu li a:hover {

color:#FFFFFF;/*オンマウス時の文字の色*/

background-color:#99FF00;/*オンマウス時の背景色*/

}

 

#frame {

position:relative;

}

 

#topmenu{

position: absolute;

top:0px;/*上から*/

left:0px;/*左から*/

z-index:100;

}

と記述します。

ナビゲーションを下げる場合には、上記の下に

#topmenu{

position: absolute;

top:XXXpx;/*上から*/

left:0px;/*左から*/

z-index:100;

}

と記述すればOKです。

 

amebloのカスタマイズは難しくありませんので、

CSSの練習に使ってみてはいかがでしょうか?