それぞれの記事がある中で、どうしても伝えたいことや

お知らせは、メッセージボードに記入してね。

で、そのメッセージボードを目立たせるためには。。。

CSSの編集で、画像を用意してもいいかもだね～♪

ただし、メッセージの量が毎回増えるようだと、

その画像が繰り返し表示されてもおかしくないものを用意してね。

3カラムの幅は470ピクセルなので、

メッセージ画像はこの幅を超えるとおかしくなるよ。

↓　↓　↓　↓

/* (3-5) メッセージボード
--------------------------------------------*/

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background-image: url(http://stat.ameba.jp/user_images/20140320/16/happysmile-navi/42/a5/j/o0470028112881160939.jpg);/ * ←メッセージボードに背景を敷きたいとき */
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:65px 30px;
}

↑　↑　↑　↑

赤文字のところは、画像がどこにあるかの場所だから、

そのままコピペするとおかしくなるよ。

自分の画像がどこにあるかチェックしてから

コピペしてね。

border:5px double #ffffff;/*線の太さ 種類 色*/

↑↑

二重にしたい場合はこの記述をプラスしてもかわいくなるよ。

初期設定では、

全体の幅が980

細いバーが180

太いバーが300

残り計算したら。。。500やんって思ってたけど、

画像が500ピクセルの幅にすると、

ちょっと切れる。

どうやら470ピクセルの幅表示なんだそう。

きちきちで計算すると500やけど、

各カラムの間に余白もあるわけやから、

数値が少ないみたいねぇ。

もちろんCSSでこのカラムの幅を変更できるけど、

アメブロの広告が300なので、

変更したら、ちゃんと広告が表示されなくなる分、

違反になってブログを削除されても、

文句がいえないわけ。。。

だって、無料でブログつかってるんやもんね。

アメブロ側になにかあれば

削除されたとしても文句いえないっす。

そういうわけで、確実な人は、独自ドメインをゲットして、

有料サーバーで場所を借りてブログなり、

ホームページを作るわけです。

カラムの幅を忘れてしまうので、記録しました(笑)おわり

ＣＳＳでなくせます。

CSSのいちばん下の記述に足せばオッケー。

/* その他、拡張があれば記述 */
.imageListBtn{
display:none;
}

今度は、文字を太字に設定しちゃいます。

↓　↓　↓　

/* 強い文字 （NEW! 更新!など）*/
.skinStrongColor,.skinBaseStrongColor{
color:#ff3300;font-weight:bold;
}

↑　↑　↑

赤字のfont-weight:bold;
を追加するだけでオッケーです。

今回は、ブログ更新されたら『NEW！』と表示されるでしょ。

その文字をちょっと太字にしてみました。

え？フォントって文字のかたちのことだよん。

見やすいかどうかは、好みだからねぇ～。

変えなくてもいいよ。

でも、フォントを変更してたら、ちょっとだけ見やすかったりします。

でも色々変えすぎると、逆に見えにくかったりも。。。

それに、文字のかたちなんて、

ネットを見ている人のパソコン環境で変わってきますから～。

Windowsなのか、Macかだけでも見た目違うのよ。

だって、パソコンに入っているフォントの種類ちがうでしょ。

なので、そのあたりはお好みで変更したいなら、

変更してねぇ～☆

もちろん、CSSをいじりますので、

？？？？の人は触るべからず(笑)

ではでは、方法教えちゃうよぉ～♪

↓↓↓

/* (1-1) 全体の文字
--------------------------------------------*/

ずばり、

そんなことないでーす！！

無料で簡単に、しかも一発で写真を加工できちゃうんです。

そんな夢のようなことが

WEB上で行えちゃうというホームページを紹介します。

いいのかなぁ～。

いいです(笑)

簡単写真加工するなら「 写真加工.com 」のサイトです　>>

簡単に行えるんですから、利用しちゃってください。

みんなそれぞれでっす。

インターネットにつないで、

ホームページを見るブラウザだって、

意識していないかもだけど、

インターネットエクスプローラーって聞いたことあるかな？

ホームページを見るソフトの一つなんだよ。

でもGoogle　chromeで見てる人だっているし、

いろいろだよね。

WEB上で大差なく色を表示できるのが、

WEBセーフカラーといわれるもの。

このセーフカラーでないと、

若干パソコンの環境によっては、色の見え方が違ったりします。

というわけで、

WEBセーフカラーを参考にしたい場合はこちら　 >>

参考にして、文字の色やリンクの色を変更してね！

CSSの編集するんだよーん。

ログインして、

（ブログデザイン）→（デザインの変更）→（CSSの編集）をクリックしまーしょ♪

そして～、ヘッダーの画像を登録しちゃいましょう。

（参照）をクリックしたら、パソコンから画像をアップロードしましょうね。

 

参照の場所は、あなたのパソコンに保存している場所を指定するだけでっす。

画像なら、たいがいピクチャに保存していると思うよぉ～☆

そして、ここからがいよいよCSS編集なのよ。

 

こんな感じに画像がアップされたら成功！

さらに下にスクロールすると、

CSSが表示されるので、

以下の個所を探してちょうだい！！

以下のように書いてある部分です。
　



/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

 

そしたら、{}の部分がありますでしょ。

その、{　と　}　の間に、以下をまるごとコピペで貼り付けるんであります。



background-image: url(コピーした画像のパス);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;




.貼り付けたら、貼り付けた上の記述の中には

　　　　　コピーした画像のパス
　　　　　
と書いてある部分があるでしょ。

ここへですね、さきほどアップロードした画像のパスをコピペしていくのです。

　　　　　「アップロードされた画像」のところを見ると
　　　　　画像の下に「この画像のパス」とあります。

　　　　　クリックしてコピってね。

 

このウインドウの中に記述されているのが、画像のパスです。

画像のパスとは、

いわゆる、この画像がインターネット上に保存されている住所です。

この場所にありますでぇ～という

住所になりますので、

一文字でも違うと表示されません。

コピペがいちばんなんです！

はい！では、　　　　　

background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20131220/23/20/de/p/o09800300happysmile-navi1387550097530.png );
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;

上と比較してもらったら、わかりますが。。。わたしの場合はこうなります。

もちろんこれをコピペしちゃうと、私の画像があなたのブログに表示されるので、
画像パスをまちがえないで！！！！

ヘッダーって、いちばん上の部分のことね。

写真やイラストを駆使して、
うまいことちゃちゃっとしちゃいましょう。

まーず、用意するのは、画像です。

ヘッダー画像の大きさの目安ですが。。。

980ピクセル×300ピクセルでございます。

目安ってことは、

もっと大きくても、小さくでも高さがもっとあってもいいわけで。。。

そのあたり、自由が利くのがWEBの世界って思っておいてちょ。

なので、９８０×４００でもいいわけです。

９８０は横幅やから、これより大きいと表示がおかしくなると思います。

毎回忘れるので、

その度に検索するのがたーいへん。

メモ帳を何個も作って、ファイルを増やしても‥

忘れてしまうこのあたいのための備忘録を作ることにしよう。

とりあえず、ブログデザインはデザイン変更で、

「カスタマイズ可能」なものを選ぶ。

さらにこだわりたい。。。

つまりＴＯＰページのとこのいちばん上の部分に（ヘッダーっていうんだけど）

「かっこよーく表示させたい」なんて

思っている場合は、

カスタマイズ可能ブログのデザインの中でも

CSSカスタマイズ可能なものを選ぶ必要があります。

このあたりまでは忘れないよなぁ。

選ぶだけやし。。。

選んでみたら、結構シンプルすぎて

だいじょーぶか？と思う(笑)

でも、だいじょーぶなのよん。

土台となるデザインなので、

これに化粧していくわけだから、

最初っから厚塗りやと、化粧できないでしょう(笑)

というわけで、

カスタマイズしたい！と思ったら、

ここからは、無料サービスでおしえちゃおぅ！

まずは、ログインしてから、

（ブログデザイン）→（デザインの変更）→（カスタム可能）

→（CSS編集用デザイン）

→（ブログデザインの表示確認・レイアウト変更）

※ピンクのところが、メニューバーになります。
好みになるので、すきなものを選んでね。

しかも、レイアウトはいつでも、簡単にすぐ、変更できちゃうぜ！

→（CSSの編集をする）

もぉいったん、ここでやめてもいいよ。

とりあえず、おつかれっさーん。

基礎のきそでした！