○ 履歴 : 2007「2007.07.26 アロマセミナー皮膚生理学 2007気温データなし
○ 履歴 : 2008「2008.07.26 .MacメルアドのエイリアスをiPhoneで使う方法最低 19.5 最高 29.2
○ 気温 : 今日の 最低 23.9度 最高 26.1度(11:02)

昨夜も、二時頃から雨がやや強く降り出したようでしたが、朝にはやんでいました。そうはいっても、梅雨特有の湿り気の多い感じが強かったです。

午後四時頃から再び小雨が降り出してきました。それほど強いわけではなく、霧雨のような感じです。それでも、最高気温が低かったため、昨日より数段過ごしやすい一日でした。

今日も、午前中に山へ行き、草刈りをしてきました。まるでいたちごっこのようですね。先日、岐阜の友人からスモモが届きましたが、秋田でもようやく実が大きくなってほんの少し色づいてきました。

20090726秋田のソルダム 20090726草刈り1 20090726草刈り2

上の写真、中央と右は、草刈りのすんだ場所。ダマスクローズやサルスベリ、花梅、枝垂れ桜、ラベンダーなどが植え込まれているところです。

下の写真、左は、愛子で、中央は、豆太郎です。こちらの小屋の周りも草刈りがすみ、風通しもよくなり気持ちよさそうですね。右は、今日のラベンダーの畑です。

20090726愛子 20090726豆太郎 20090726ラベンダーの畑

今日は、午後一時過ぎに帰ってきました。下の写真は、今日のお昼ご飯です。青まめとトロロ、生玉子、カニカマ、ナスのゴマだれ和え、それに薬味ののっかったソバでした。

20090726昼ご飯1 20090726昼ご飯2 20090726豆富やエノキダケのみそ汁

上の写真、右と、下の写真は、今日の晩ご飯です。豆富とエノキダケなどが入ったみそ汁、そして、鶏肉やピーマン、バジルなどをナンプラーで味付けし目玉焼きをのっけたタイ風ご飯、キュウリとモモの酢のもの、生ハムとトマトのサラダでした。

テレビで、フランスのブドウ畑の風景が写っていました。ワインを作るためのブドウでした。先日、岩手のセミナー受講生の方から、岩手産のワインをいただいていましたが、今日、それをちょっと味わってみました。

20090726タイ風料理 20090726トマトと生ハムのサラダ 20090726岩手産ワイン

昨日は、午後から、ブログのカスタマイズをしていました。今日も、昨日に続いて、何とかならないものかと思案中でした。それは、昨日もご紹介した

2. 個別記事選択時に表示されるカテゴリ別記事一覧
・スタイルを整えたい

という内容でした。これは、個別記事を選んだ場合に末端に表示される「カテゴリの最新記事」の一覧でした。もともと、今回のブログデザインには、今日のタイトルにもある「RelatedArticles」というタグ??が、個別記事のページに書き込まれていましたから、オリジナルのデザインのままでそれらを表示する事ができました。

ところが、オリジナルデザインでは、「
カテゴリの最新記事」というタイトルが個別記事のすぐ真下に表示され、その次に、リスト形式で指定件数が表示される仕組みとなっていました。

そこで、

1. 個別記事とカテゴリ最新記事タイトルの間隔
・各々の間を一行あけて見やすくしたい
・文字のスタイルを変更したい
2. カテゴリの最新記事のリスト
・記事リストの先頭に丸印をつけ見やすくしたい

ということで、いろいろブログデザインを修正しては、再定義などを繰り返していました。まだ完全ではありませんが、ようやく上記要件を何とか満たすことができました。

下の画像は、ひまわりブログのトップページから「個別記事」を選択したときに表示される「日付、カテゴリ、タイトル、個別記事の内容」が示されています。

「カテゴリ」は、この「個別記事」を分類したときに選択したカテゴリーでした。この個別記事には、二つのカテゴリーが割り当てられています。「ブログデザイン」と「このブログの仕組み」がそれらのカテゴリーです。

・・・・以下は画像です・・・・

20090726ブログカテゴリ

・・・・以上は画像です・・・・

カテゴリーに関しては、「管理トップページ」から「ブログの設定」を選択すると「ブログの基本設定」の画面が現れます。こちらに、表示設定という項目があり、「カテゴリ最新記事の表示形式」をどのようにするかの設定ができるようになっています。

ひまわりブログでは、それを、10件「両方」としています。両方というのは、個別記事に割り当てることのできる二つのカテゴリー区分の事です。

下記の画像は、それらの条件で「カテゴリ最新記事の表示形式」を、実際の個別記事に追加して表示するための「個別記事ページ」の記述ですが、その呪文の言葉が「RelatedArticles」でした。そして、それは「ArticleTagsList」の前に記述されていました。

・・・・以下は画像です・・・・

20090726個別記事ページの記述

・・・・以上は画像です・・・・

このままでは、先ほどのように「
カテゴリの最新記事」というタイトルが、個別記事のすぐ真下に表示されてしまいます。そこで、スタイルシート(CSS)に、上記最新記事の表示形式をどのように配置し、どのようなスタイルで表示するのかを記述しないといけません。

記述しようにも、ひまわり自身も門外漢ですので、見よう見まねで、何度も繰り返し書いては実際の表示具合を確かめ、下記の画像のように設定してみました。

下のピンク色の文字で記述されている部分がとても重要なポイントになりました。「padding:0px 0px 0px
20px;」ですが、これは、余白を指定する記述だそうで、四つの要素があるそうですが、ここでは、上、右、下、左 の余白を決める要素となるんだそうです。

三つの要素が 0 で、左 20 分余白を残してから、表示が行われるという事のようです。この指定が、リスト形式で表示される最新記事のタイトルの真ん前に「丸印(circle)」を残してくれるよう働いてくれます。

リスト形式の記事がただ数件表示されているよりも、丸印を先頭につけて表示された方が一覧しやすいからです。そして、その丸印をつけて表示する記述は「list-style-type:circle;」でした。

それよりも上の方に記述されているものは、カテゴリの最新記事をどのように表示させるのかを決めている書式が設定されているようです。

「background:〜」の続きが途中でとぎれていますが、これは「
カテゴリの最新記事」というタイトルと個別記事とを仕切っている「点線で示される画像」を指定しています。

・・・・以下は画像です・・・・

20090726CSSの記述

・・・・以上は画像です・・・・

このように、スタイルシート(CSS)に記述することで、ようやく下記の図のように表示する事ができました。

・・・・以下は画像です・・・・

20090726最新記事一覧表示OK

・・・・以上は画像です・・・・

下の画像は、上のスタイルシート(CSS)で記述した「padding:0px 0px 0px
20px;」を、10px にした場合です。

「list-style-type:circle;」で設定された丸印が、リスト表示で表示される最新記事のタイトルに半分以上隠されてしまっています。だから、
20px なんですね。

もちろん、文字の大きさや文字間隔などをいろいろ設定されている場合には、その数字を調整して見やすくしなければなりません。

・・・・以下は画像です・・・・

20090726最新記事一覧表示NG

・・・・以上は画像です・・・・

ブログデザインがようやく落ち着きました。でも、昨日投稿したカテゴリー月別一覧表示についてはまだ解決していませんけど・・・。

● 関連記事
2009.07.25 カテゴリ別月別記事一覧表示の仕組み
2009.07.11 コメントのツリー表示化
2009.07.10 ブログデザインの仮設定
2009.07.08 ブログデザインの変更中
2009.05.30 三列表示のブログが二列表示へ
2009.05.30 ブログパーツのHTMLソース変更