背景画像 それって扁

　前回の背景画像設定で、ようやくSafariでも背景画像が表示されるようになりました。すると、今までズッと気になっていた↓コレが余計に気になるようになりました。

　記事欄が短く、右サイドが長いと段々に表示されてしまいます。右サイドは自動で下へ伸びるのですが、記事欄はどうやっても下へ伸びません。mainの背景画像を作りcssで設定してみましが、表示させることが出来ませんでした。
　main用の画像をbodyの背景画像にすればいいのでしょうが、bodyに２つの画像を指定することは出来ないので、他に背景画像を２つ使う方法がないかとネットで検索して、方法を見つけました。

　main用に作った画像Aをhtmlの背景画像に設定します。

　今までbodyの背景画像に使っていた画像Bはそのままbodyの背景画像に設定します。

　下記の設定をカスタムCSSに書き加えます。

html {
background: #a5c3ca url("画像Aのurl") repeat-y center bottom !important;
  }

body {
font-family: Verdana, 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif !important;
letter-spacing: .1em!important;
margin: 0px;
padding: 0px;
word-wrap: break-word;
font-weight: normal;
font-size: small;
background: transparent url("画像Bのurl") repeat-x center top !important;
}

　最初は画像AとBを逆に設定して変な背景になったのですが、変更して上手く表示されました。

　しかし、その所為でブログを表示完了するまでに時間がかかります。チョット見苦しいのですが、ま、いっか、と自己満足しています。

背景画像 とりあえず解決扁

　以前に「背景画像」で書いたように、Safariでこのブログを見ると背景画像が表示されていません。

　作成したカスタムCSSはリッチテンプレートのCSSを参考（パクった）にして書き換えたものなので正確な記述ではない所為もあるのでしょうが、他のブラウザでは問題なく背景が表示されているので理由が判りませんでした。
　ちなみに、利用プランはココログ・ベーシック。その後、バナーの画像を差し替えたので現在のバナー画像とは違っています。

　話は変わって今日、Firefox3をインストールしました。Firefox2用にインストールした21個のアドオンの内、Firefox3で使えるのは12個でしたが、その使えるアドオンの１つWeb Developerというアドオンで何気なくCSSを表示させ見ていました。
　ココログではrichbase.cssというCSSが必ず最初に表示されるのですがその次のStyles.cssのbodyを見てあれっ？何か変だぞ（＾＾；）
　よく見るとbodyの値がカスタムCSSで書いたモノと違っています。と今頃になって気付きました。

　今までずっと、Styles.cssがカスタムCSSで作ったCSSファイルだと思っていたのですが、どうやら違うようです。コピーしてStyles.cssというファイルにして保存しテキストエディタでじっくりと見てみました。一行目は見知らぬ（＾＾；）body。

　カスタムCSSのbodyは365行目になってやっとuser cssとして出てきます。

　backgroundのcolor値や他の値を見ると、このStyles.cssというのはカスタムテーマで設定した（下図参照）内容のcssファイルなんですね。カスタムCSSで書いた内容はuser cssとしてオマケで付いているといった感じです。

　と言う事は、Safariでは灰色の背景しか表示されないのでStyles.cssを読み込んだ後でuser cssを読み込んでいないのでしょうか？!importantって書いているのですが効いていないのか……。
　カスタムCSSさえ書けば、全て設定出来ると思っていたのは甘かったのですね。はい。

※2008/07/07追記
　CSSファイルは後の記述が優先されるそうなので、カスタムCSSの内容が反映されているという事ですから、CSSの書き方が悪いって事ですね。

　どうやったらカスタムCSSで設定した背景画像がSafariで有効になるのだろうか？素人考えですが、これは1つのcssファイルに2つのcssが入っているのがマズイのではなかろうかと（＾＾；）

　そこで、以前きたへいの悠々自適樣の記事を参考にしてリッチ・テンプレートのフォントを変更させた手をもう一度使う事にしました。arcadiastyles.cssというファイルを作ってカスタムCSSの内容を全て書き込み、カスタムCSSは空白にします。

　次にarcadiastyles.cssをblogディレクトリー（フォルダ）にアップロード。

　次にarcadiastyles.cssを呼び出すタグを書きます。

<link rel="stylesheet"
href="スタイルシートのパス"
type="text/css" />

　blogのサブタイトル欄に上記の内容を書き込みます。

　これをやるとCSSファイルを読み込むのに時間がかかり、ブログを表示する時に見苦しいのですが、仕方ありません。ひょっとしたら、arcadiastyles.cssにはbackgroundの指定を書くだけで、他はカスタムCSSに残していても良かったのかも知れませんが、ここまでやったのだから取りあえず実行（＾＾；）
　では、変更を保存して反映！

　さて、結果は――。

　おーっ！Safariで背景画像が表示された。

　ついでにIE6とFirefox3での表示も見てみます。
　Firefox3の表示は綺麗ですねー。と言うか、本当は全てのブラウザーで同じように表示されなければいけないのですが。

　おっと、Operaを忘れちゃイケマセン。

　日付と記事タイトルのフォント設定は欧文フォントのGeorgiaにしているのですが、Operaの和文だけが明朝体で表示されています。Georgiaはserif（髭付き文字）系のフォントなのでOperaの方が正しいのかな？

　いや～、良かった良かった。

　良かった良か……。

　良かっ……。

　良……。

　……。

　      ○
  ＿|￣|

  ＿|￣|○　

　記事に貼り付けたYouTubeの動画と、サイドバーに置いたジオターゲティングのブログパーツがOperaで表示されない。

　＿|￣|（（（（（（ ○

　禍福とは……。

　Operaをお使いの方、原因と解決法を御存知でしょうか？
　FlashPlayerプラグインが入っていないって事はないだろうし。

※2008/06/19追記
今日、arcadiastyles.cssにはbody設定だけ書いて、他はカスタムCSSに戻しましたが、Safariでも背景画像が表示されています。

ブックマークボタンの表示

　「みんなで解決！広場」の質問を見て知ったのですが、テンプレートのデザインで表示項目を開くと、記事表示欄の一番下に「ブックマークボタンの表示」という項目が、知らないうちに追加されていました。
　説明には「記事のフッターにブックマークボタンが表示される」とありますが、チェックを入れてもフッターには何も表示されませんでした。

　ところが今日、テンプレートのカスタマイズをしていて何気なくフッターを見ると、一番右にボタンが表示されています。これはいつの間に？
　ポインタを近づけるとヒントが表示されます。

　何をブックマークするのか分からないので、一旦はクリックするのを止めたのですが好奇心に負けてクリックしてみました（＾＾；）

　すると……開いたのは「はてなブックマーク」のエントリー登録画面でした。
　そうなんです。このボタンは→ 「はてなブックマーク」の登録ボタンなのです。知ってる人には直ぐに判ったのでしょうが、知らないものだから何だろうと思ってしまいました。

　ブックマークって、つまり「はてなブックマーク」の事だったんですね。だったらそう表記してくれたら質問された方もわたしも悩まなかったのに～。え？当然ですか。そうですか。
　しかし、はてなブックマークを利用するにはユーザー登録してユーザーアカウントを取得しなければいけないそうで、直ぐには利用出来ませんでした。って、自分の記事のブックマークボタンだから意味ないか……。

　と思っていたら、いつの間にかブックマークボタンがフッターから消えています。デザインにある表示項目の記事表示欄からも綺麗サッパリと消えています。

　これは実装試験中だったのでしょうか？
　今は表示されていませんが、その内にまた表示されるのかな。　

記事を角丸四角で囲う

　正確には「記事本文の背景画像を角丸四角にする」ですね。

　参考にさせて頂いた、と言うか記事のサンプルCSSをほとんどそのまま使わせて頂いた（＾＾；）のは【初めてのココログ・カスタマイズ】様の【記事欄を角丸の画像で囲ってみよう】です。
　森イチロー樣の【まろぶろぐ】からも角丸四角画像作成ソフトをダウンロードさせて頂いたので、実に簡単に背景画像を作成する事が出来ました。
　お二方には感謝！感謝！です。

　先ずは背景画像を作成します。自動的に三分割された背景画像が出来ますので、それをアップロード。このブログで使っている背景画像は作成されたオリジナルではなく、TopとBottomの影の部分を加工（それぞれ下へ5px右へ5pxずらす）したものです。
　次にカスタムCSSに以下の項目を書き込みます。●の数値は適当に（＾＾；）。【初めてのココログ・カスタマイズ】様のサンプルCSSでは【.entry】ですが、記事本文だけに表示させたいので【.entry-body】にしました。

.entry-body-top{
background-image:url("Top画像ファイルのurl");
background-repeat:no-repeat;
padding:●px ●px ●px ●px;
margin:●px ●px ●px ●px;
background-position:top center;
}

.entry-body{
background-image:url("Middle画像ファイルのurl");
background-repeat:repeat-y;
padding:●px p●x ●px ●px;
margin:●px ●px ●px ●px;
background-position:
}

.entry-body-bottom{
background-image:url("Bottom画像ファイルのurl");
background-repeat:no-repeat;
padding:●px ●px ●px ●px;
margin:●px ●px ●px ●px;
background-position:top center;
}

　後はCSSファイルの変更を保存して反映させればオシマイ。
　IE、Firefox、safari、Operaで確認しましたが、多少の違いは有りますがいずれも破綻なく表示されています（わたしの環境では）。思いの外に簡単でした。

　ところが、それ程甘くはないのが世の常でして、コメント欄などに影響がないかとブログ内を色々と見ていたら、何と【続きを読む】に背景画像がない！

　しかも、クリックすると悲惨な状態で表示されます。好事魔多しとはよく言ったもので、世の中意外な所に落とし穴があるものです。って、それ程大袈裟な事ではありませんが……。

　この部分のHTMLがどうなっているのかSleipnirのHawkeyeでHTML構造を見てみました。Hawkeyeというプラグインを使ったのは初めてですが、そうかこんな時に使うのか……と納得。

　どうやら続きの部分はentry-moreというclassで表示させているようです。そこでカスタムCSSにentry-moreを追加しました。

.entry-more{
background-image:url("Middle画像ファイルのurl");
background-repeat:repeat-y;
padding:5px 30px 5px 30px;
margin:-12px -10px ;
background-position:top center;
}

　素人判断は当たっていたのか？果たして結果は……？
　実際の記事でご確認下さい（＾＾；）
　カテゴリー「思い出」→「期末テストのプレゼント」

昔の絵 その15

　新しくなるほど下手になっていきます（＾＾；）

　元画像サイズの1024px×768pｘで見るほどではないので、R13で2000px×1500pxに拡大し、何とか見られる顔の部分を800px×600pxでトリミングしました。こちらはクリックで元画像（の低容量版）が開きます。絵は描き続けないとダメだと痛感。

　あの時君は若かった（2006/04/25）
　PhotoShop CS
　WACOM Intuos2
　800×600（original 1024×768）

笑える

久しぶりに笑った。