CSS攻略第三弾！『タイトル画像』 メランコリーなスキン

これは昨日の晩ご飯。ホタテとカシューナッツの炒め物。うん、うまかった。

しかし、本日、ﾜﾀｸｼ結構ご機嫌ナナメ。

理由はいくつかございます。































その１：




せっかく作った自家製チャーシューのホイコーローが、シーチキン状態に・・・・＿|￣|○


前回はうまくいったのに・・・


多分ね、今回はチャーシューを作るときに糸でちゃんと縛ったんですよね。それできっとやわらかぁーく出来たんだろうと思うんです。
やわらかさがｱﾀﾞになった・・・・次回からはバラブロックで作ろう。

しかもお気に入りのＹＯＵＫＩの甜麺醤が品切れだったから、仕方なくかわりに買った甜麺醤があんまりおいしくないし。
なんかＸＯ醤の味がするし、絶対混ざってるしこれ。


あぁーあ、メランコリック！


メランコリック　［melancholic］

憂鬱(ゆううつ)なさま，胸ふさいでいるさま．〈昭〉

ご機嫌ナナメな理由その２は

















新しく出来たスキン

オイオイオイオイオイオイオイオイオイオイ！

たのむよーアメブロさん！
個人的には今回の改修以降でもっともインパクトのある事件。
これはまじで困ります。思わずプレビュー画面作っちゃったよ。なんだよこの色合いは。ヘイヘイヘーイ。


一番イヤなのが「コンプレさんってあのスキンの真似して作ったんじゃない？ね？ｸｽｸｽ」とか言われること・・・・


違う！違うのだ同志よ！このスキンが私の真似をしたのだよ！


あーーーブルーーーーーーー
せつねーーーーーーーーーー





でもいいの、うん。
どっちにしてもたいしたことじゃないし。ホイコーローも変な甜麺醤使ったわりには味がよかったし。
さて、気を取り直して・・・


とりあえず始めたCSS攻略。なんかアメブロもいろいろ対応をはじめていますし、とりあえず「どうしても必要な内容のCSS編集」というのは減ってきていると思います。
記事編集の文字サイズも小さくなり、改行も普通にEnterキーで出来るようになりました。
（でもやっぱPタグなんやなぁ。謎だ）

しかしマック環境はなんかここでちょっと触れられていますが、「環境を変えてくれ」だなんてむちゃくちゃなことを言っています


ちょっと専門的な話になりますが、今回の改修ではダイナミックHTMLという技術がたくさん使われています。
JavaScriptのソースなども見てみましたが、思いっきりブラウザ依存のinnerHTMLっていう命令が使われていたり、ソース自体が別の外国の会社が作ったみたいなことが書いてあったりして、どうやら記事を書く画面は自社で開発しているわけではなさそうです。
しかもコピーライトに2002-2004って書いてあるってことは、開発自体だいぶ前にされたやつですね。
ようこんなもん使おうと思ったなぁ。

アメブロが今回自社開発したっぽいソースも見ましたが、なんかコメントも不ぞろいでいいかげんさが満載でした。
これは設計段階でマックユーザに不具合が出るってことは私にだって分かります。
そもそもダイナミックＨＴＭＬを多様するのは御法度なんです。


ＣＳＳを編集することで解決する表示上のトラブルは、もうありませんよね。あったら教えて下さい。
このスーパープログラマー（５位以内／１００人中）が一瞬で解決してご覧に入れます。

でもとりあえず私が知る限りはもうなさげ。
あとは趣味のＣＳＳですよね。

しかも、私がなんだかんだやっている間にいろんなブロガーさんが既にスクロールバーの色変更とか紹介されています。
もし分からないことがあったら聞いて下さいね。同じようにやったら、こうならなかった！とか、どうしても同じように出来ない！とか。他のブログで紹介されている内容でも、私に聞いてくださってかまいません。


今日は趣味のCSSとして、タイトルの右側に画像を表示する方法をご紹介します。
私のヒヨコがぶにゅーってなってますね。あんな感じ。
あーあーアメブロにスキンﾊﾟｸられたよほんと。


/* ----------------------- header ----------------------- */
#header{
height: 100px;
background-color: #FE9F11;
background: url(http://ameblo.jp/user_images/0f/b0/10000443854.gif);
background-repeat: no-repeat;
background-position: right;
}

私のCSSはこのようになっています。赤字で表示したところが追加した部分。
追加して記入する必要があります。

この部分は結構上のほうにありますが、

#header{

で検索するとすぐ見つかるでしょう。

background: url(http://ameblo.jp/user_images/0f/b0/10000443854.gif);

この行は画像のURLを指定します。もちろん画像のURLはご自分でアップしたURLです。
（URLが分からない方はどこかの記事に画像をアップして、私にその記事のURLを教えてください）

background-repeat: no-repeat;

この行は画像の繰り返し方法。具体的には「繰り返しするな！」っていう命令をしているんです。

このno-repeatのところに指定できるのは

repeat　　　　　　（規定値：敷き詰める）
repeat-x　　　　（横方向のみ並べる）
repeat-y　　　　（縦方向のみ並べる）
no-repeat　　　（並べない、いっこだけ）

となります。

background-position: right;

これは表示位置。私は右に表示していますが左や中央も可能。その場合は　left　や　center　などと書くといいです。

CSSについてリクエストがあったら教えてください。私のブログはそうとういじくりまわしていますので「ここはどうやってんの？」っていう質問でもかまいません。