アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！ -288ページ目

お使いのみなさま・・・

本日、アメブロのブログ内検索の変更にともないＣＳＳの修正をお願い致します

ＣＳＳ　検索窓をかわいく　は

#search .searchbox を　#search .inputText に変更下さい

検索窓が大きくてボタンが下についている場合はwidth:100px;を入れてください

サイズは見ながら調整ください

ＣＳＳ　検索窓をかわいく・・・　ボタン　は

#search .searchbtn　を　#search .searchButton に変更下さい

　今まではアメブロ以外の検索も出来るgooのエンジンを使っていました

そのためgooに合わせたものだったのを

アメブロ内だけに検索を絞って独自の検索仕様にしたために変更になったものと思われます

・・・・アメブロ以外の検索をしない、たんなるサイト内検索なんですけどね

今日は忙しくてアップが遅くなってすみません m(_ _)m

なぜ忙しかった・・・って？

あと何時間かあとの記事を見ればわかります・・・・

・・・自分のところもまだだよ～　　

でも、この後の記事を仕上げなくては・・・　　　ウツにはいる暇がない・・・？

飽きてしまった・・・

6/20 ＣＳＳコメント欄をなんとかしちゃおう　7 こちらをどうぞ

画像作りに飽きてしまった・・・・
コツコツ同じことの繰り返し・・・・一番嫌いな作業です
ウツはいちゃいそうです・・・・
そんなときは・・・
違ったことをやるにかぎる・・・・・

/* ゲストコメント　*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#ffd000;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 25px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 15px 0 5px;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:40px 0 10px 60px;
color:#ffd000;/*←コメントタイトル文字色変更の場合*/
}
.comment_footer span.comment_author{/*名前*/
padding-left:40px;
}
.comment_footer span.comment_date{/*日付*/
padding-left:20px;
}
#comment_module .comment_footer{/*フッタ上の点線を消す*/
border-top:none;
}
.comment_gotoform{/*[コメント記入欄を表示]を消す*/
display:none;
}
#comment_module .comment_author a {/* 名前の右にアイコン */
padding-right : 20px;
background-image : url(画像のURL); /* ゲストのアイコン */
background-position : right center ;
background-repeat : no-repeat ;
}

※今回は上と下の画像だけです・・・中の画像は触らないでそのままで

あはっ・・・　キラキラっていうより線香花火に見えてしまうんですが

画像は上の組も下の組も同じ画像です（上の画像と下の画像の2枚です）

上はバックを黒にしてみただけ・・・

これはキレイに透過してますね・・・どんな背景に合うんでしょ？

バックが黒のときはリンク文字色も変えないと・・・・

・・・黒バックをすでに使っていれば余計なことは言わなくてもすでに変わっていますよね

また飽きたら他の色も作ってみます・・・・・

せめてもう1色作らないと管理人の分がない・・・・

ウツ気味の人には「頑張って～」は禁句だって知ってました？

だから

「頑張って他の色も作ってください」　は、言っちゃダメ！！！！

画像のＵＲＬって・・・？

画像のＵＲＬってなんですか・・・・？

URLはサーバ上の位置を示す住所のようなものです

画像を貼ったのをHTMLでみると<img src="画像のURL">こんなふうになっています
画像は　http:・・・・ってURLにありますよ　って書かれているんです
（実際には他にもサイズとか枠をつけるつけないなどが入っている場合もあります）

決して記事に画像を直接貼りつけているわけではありません
なので、記事に貼った画像は画像フォルダーから削除しないようにしてください
見に行ったけど無かったよ～って×をつけられます

画像のURLを知る方法を説明しておきます・・・・

手に入れたい画像の上で右クリック

名前を付けて画像を保存　　　で、適当なところに保存します

ちなみに一番下の

「プロパティ」を選ぶと、アドレス（URL）が表示されます
これは私の画像フォルダーに入っている画像のURLです

もちろんＣＳＳにこの画像のURLを入れても普通に表示されます・・・が、
あくまで私の画像ですから私が削除、あるいはアメブロをやめた場合は表示できなくなります

よく言われている「直リン」「直リンク」とはこの画像のURLを使っちゃうことです
私が画像を置いてあるのも皆さんが使っているブログも同じアメブロですから「直リン」って言っていいのかは・・・？ですが
自分のブログに貼り付ける画像は必ずダウンロードして自分の画像フォルダーにアップしてから使うようにしてください

画像を表示するためには画像のURLにしたがって画像を読み取りにいきます、

その時、画像を置いてあるサーバーとやり取りが行われます
あっちから、こっちから画像を見せて～って問い合わせがあるとその分サーバーが重くなったり、

あまりに多い場合はサーバーから他の方に迷惑だからと解約を迫られる場合もあります
また場合によっては通信量によって料金が発生する場合もあります
まっ、大抵の場合はここまでリンクを貼られることはありませんが直リンを嫌がる理由です、昔の通信がメチャクチャ遅かった時代の残りです・・・今は気にしなくてもいいと思うのですけど）

※アメブロの場合、よそのサーバーからの直リンは表示されない場合があります
あるいは、よそのサーバーが直リンされないようにしている場合もあります

よく、「友人のバナーが表示されません」って質問してくる場合は直リンしている場合がほとんどです

まれにバナーは直リンするよう配布元が指定している場合はそれに従ってください
（直リンしてあれば元のバナーを変更すれば、直ちにリンクされている全部のバナーが新しい画像になる・・・から直リンさせているのかな？）

↑余計なことです、忙しければスルーしてって下に書いても意味ないかっ・・・・

保存した画像を自分の画像フォルダーにアップした後・・・・