アメブロ、簡単なカスタマイズ方法~
アメブロは、ちょっと編集したり、自分でカスタマイズが簡単にできるから面白い。
そんなカスタマイズ方法を簡単にご紹介!
▼『CSS』って!?
まず「CSS」とは、
Cascading Style Sheets、カスケーディング・スタイル・シート
の略。一般的には、「スタイルシート」って呼ばれているやつです。
これは、『HTML』という言語と組み合わせて使います。
イメージでいうと、
「HTML」が家の土台とか柱、骨組みで、
「CSS」 が壁紙とか装飾を担当。
つまり、アメブロでは大枠になる「HTML」は決まっているので、
ブロブページのトップの画像とか色とかの「CSS」が編集できるわけです。
ちなみに、ブログの記事を書いたりしているのもHTML。
HTMLのタグ(書き方)を覚えるとブログを書く時にも役立つかも!
※ここで編集できるものは、「CSS編集用デザイン」or「ベイシック」
などの限られたもの。
※今回は「ベイシック」verで解説します。

▼まずはトップの画像!
トップの位置をここでいれます。
※画像サイズは、横980ピクセル×横300ピクセルに合わせて作るとちょうどいい。
どんなサイズでもオッケーといえば、オッケーですが合わせた方がキレイ!

▼いざCSS編集へ…の前に!
画像を入れたら、その下にある・・・
「現在使用中のブログデザインCSS」の項目へ!

画面の下部に「編集前の状態に戻す」ってところがあるので書き間違えちゃり、
あれぇーΣ(×△×;)…ってなったら、押せば戻る。
けど、保存してから、やっぱり戻したい(>_<)ってなったときは戻らないから、
別のタブかウィンドウで編集前のページを残しておけばいつでも戻れる。
もしくは、このCSSをメモ帳とかにコピーしておくとか残して置く事をオススメします!
▼いざ編集へー!
さてさて、CSSの中身をみてみると…。
『/*============ ☆ かんたんスキンカスタマイズはこちら ☆ ==============*/』
が出てきます。
ここでは、メインに編集したい部分がピックアップされていて、
ここの中のものを書き換えれば、簡単にブログのトップ画のとこを変えたり、全体の文字の色を変えたり、背景を変えたりできます!
まず、
「/*」と「*/」でかこまれているところは、実際のページには影響出ない、この間はCSSの効力は無効になってます。
つまり、ここはメモだったり、解説が書いてあるわけです!
ここに注目すると分かりやすいかも^^)b
では、ここからが解説本番です!
日本語で解説が書いてあるから、
どこの部分をそのCSSのソースが表しているかは分かると思います。
でもどうやって書けばいいの・・・?
というのが、次にくる問題。
◆まずは基本ルール!
#○○{××:----; }
※これが分かりやすい様に途中で改行されています。
○はどこの場所が指定
{ }の中がルール付け。
××は文字サイズとか色とか編集したい事
----は文字サイズとか色とかの具体的な数値
:は、×と----の間にある仕切り目。
;は、終わりましたよーの合図。
◆文字のサイズを変える!
「font-size: 3.0em; 」
文字のサイズの単位が「em」。他には「px」があるけど、
ホームページを作る上では、「em」が推奨されてる事が多い。
この辺は、調べるより、数を変えていっぱい試して見ると文字サイズをつかんでいけると思います!
◆色を変える!
「color:#333333; 」
今度は色。色はカラーコードという色に番号(コード)が決まっていて、そのコードを書く事でそこの色を決められる。
いろいろなカラーコードがあるけど、多くは「16進数」というのが採用されている。
6桁の数字とアルファベットの組み合わせで表現する。
たとえば、黒なら#000000/白なら#111111/緑#008000/赤#FF0000
ってな風に!
けど、これは覚えなくても、コード表見ながら選べばよし!
…並びの基準が分かると覚えなくてもだいたい分かる様になるので^^
http://www.netyasun.com/home/color.html
◆画像を入れる!
「background-image:url();」
つぎは、画像。このソースの()の中に貼りたい画像のURLを入れればOK!
えっ?画像のURLってなったら、ブログ書くときみたいにまず画像をアップして、そのURLをコピーすれば解決!
◆ブログの説明文を消したい!
「display:none;」
を追記する!
/*3)ブログ説明の文字サイズを変更する*/
#header h2{
display: none;
}
◆ブログのトップ画像をクリックするとトップページに戻りたい!
CSSの一番下に以下のコードをコピペ!
/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
padding:0;}
#header h1,.skinTitleArea{
display:block;
padding:0;
text-indent:-9999px;
}
#header h1 a,.skinTitle{
display:block;
height:300px;
}
▼もっと細かい箇所の編集は!?
その「☆かんたんカスタマイズ」の下には、
「/*============ ★ その他のスキンカスタマイズはこちら ★ ==============*/」
という箇所があり、
ここから先は、目次でどんな内容がでてくるか表記があって、CSSのコード。ここから先も #○○{××:----; } のルールは同じ。なのでそのコードの意味が分かれば編集可能!!
どうでしょう(^ー^)?なんとなくでも分かってもらえば嬉しいです!




















