やりたいことと課題

フォトショやイラレで素材作ったり、cssでスタイル書き換えたり、なんつうかパターンに飽きてきた。
やっぱりある程度デザイン的にも限界があると思う。

否
（自分にセンスがない、ということは置いといて・・デス）

で、自分的には（自分が使うという設定で）アーカイブだのエントリーだのサイドメニューのリストを、メインカラムに表示させたい。

例えば、６月のアーカイブのリンク先は現状６月の記事が並ぶのだが、まずその上のあたりに６月のアーカイブの一覧表示がほしい。

でもって、カテゴリーも同じく。
欲を言えば、カテゴリータイトルそれぞれに、カテゴリー記事一覧が表示されるような。

変数をどこに配置するのか、表示されるためにはどうするのか、イマイチわからない。

そういった便利な機能自体を利用してのスキン配布は可。という太っ腹なテンプレ作家さんがいらっしゃるのがありがたいし、素晴らしい。
自ら編み出した傑作にもかかわらず、だ。
人のパクリはイヤだけど、ぜひ参考と勉強にさせてもらいたいと思う。
利用の際はきちんとルールと節度を守るのは、言うまでもなく当然のことです。

不明点の改善

思ったとおり　といいますか、ここの記事ろくで書いてませんね（汗）
ひたすらカスタムしまくって、管理のテンプレートページは中途半端なテンプレで溢れてます・・・
このすんごいシンプルすぎて面白くないテンプレもまたそのひとつ。
とりあえずすべて書き直して自分で納得できるベースフォーム、といったところ。

相変わらず試行錯誤しながらちまちまいじってるんですが、どーしてもわからないことにつまずいております。

*其の１　
ここの記事内の文字属性を
font-size: x-small
にすると字がつまるので
letter-spacing: 0.05em
文字間隔を広げると、適用はされるが記事編集時の改行（１行あけてる）が反映されない・・（なぜ？）

【解決】
改善点・・・br{letter-spacing : normal;}を入れたら直りました。

*其の２
メインカラムを両脇borderで上下ぴっちりのデザインにしようとtableを使ってブロックにしました。
（カタチ的にはこのテンプレのスタイルはやや近い）
しかしサイドバーのメニューが長いとき、コメント編集や１記事表示にするとフッター部分があがってしまう・・・・・（なぜ？）
tableのなかにdiv idでスタイルを設定してるんだけどな。
tableでidにした方がいいんでしょうかね・・

【解決】
改善点・・・別記事にて。

テンプレート訂正箇所【marble】

・html内で使用していない不要なcssセレクタの削除。
（#commentlist、#trackbacklist等）

・記事タイトルを#main h3 から.content h3に変更。
content枠へ移動。

・コメント、トラックバック、コメントの投稿、コメントの編集（記事下コメント欄）
#main h3、h3#commmenthed、h3#trackbackheadを
h4に統一してポイント画像（arrow_pink.gif）をつけた。
#side h3と色違いに。

・コメント投稿タイトルをcomment枠に入れた。

・「トラックバックurlはこちら」を
#trackbackbody dt ddを削除、trackback-urlブロック、枠つきに変更。

・#navをnavに変更。余白調節。

↓主にこのあたり。

テンプレコンテスト結果！！

ついにコンテスト結果発表〜！

（i-Pod当たるかなぁ・・ドキドキ・・）
嘘ですｗ

う〜ん、結果に納得。
上位はやっぱりデザインセンスと他にない作り、といったところ。
どうやったらこのブログがそんなになるの？ってブログらしからぬデザインだったりね。
さすがです〜パチパチ（拍手）
私が応援していて入選予想していたタイプがなかったのはちょっと残念。
え？自分の？
いいんです、勝手に「参加賞」ってことでｗ

それにしても投票数がわりと少ないんですね。1位でも73票って。
応募期間がたった10日間だったせいかな。
入賞者以外の投票数は、テンプレ応募した人だけわかるみたい。
自分のテンプレート設定から「テンプレ登録」画面で登録したテンプレ名の横に出ていました。
意外と投票されていたので、びっくり。うれしかった〜！

ではでは、発表します。

marble・・・25票
round_yellow・・・11票

すみません、各1票ずつ自分で入れましたｗ
9位が33票だったから、いい方ですよね？ねっ？？
なによりこんなに投票してくださった方々に感謝です。
どうもありがとうございました。

素材作成−角丸・丸 @Photoshop

*角丸長方形の作り方

選択範囲（長方形）
　↓
「選択範囲を変更」：滑らかに
px数（＝円の半径）で角の丸さを確認する。
　↓
「選択範囲を反転」
　↓
・塗りつぶし
・境界線を書く

*正丸の作り方

選択範囲（楕円）
xy値（サイズ）を確認してShiftを押しながら円を描く。
　↓
「選択範囲」右クリック
　↓
・塗りつぶし
・境界線を書く

対象画像によってアンチエイリアスに気をつける。

３作目。

制作過程バレバレですね（笑）

近々こちらの３カラムもテンプレート登録したいと思います。
素材も全部作りました。
作り始めるとどうにも止まりません。
本当は２カラムで背景を固定画像にしたかったんだけど、段々作ってるうちにイメージが変わってきてしてしまった・・

２カラムにしたい場合は、どっちかサイドバー消して <h3> タイトル以下中身移動してもらえればオッケーです。
両カラムとも <float:left> にしてるので（左位置指定、次の内容が右隣に回りこむ）気をつけてもらえれば。

前作の２点も手直しの部分もあったり素材を足したいと思ってます。
ところで登録後のテンプレの修正って、同じテンプレ名で再度登録すればいいのかな？

カスタムmemo

* 前記事の改善点

・メインカラムのみ両脇borderで上下ぴっちりにしたい。
・サイドバーのメニューが長いと、コメント編集や１記事表示にするとフッター部分があがってしまう。

tableで３つのセルを作る。
メインカラム
メイン（フッター部）
サイドカラム→rowspan="2"セル結合

２カラムそれぞれに、td id でcss（#main-column、#side column）のセレクタを新しく作る。cssで両カラムwidth、メインのみborderを指定。

メイン（フッター部）tdに直接指定。
valign="bottom"　
height="50"

#container
└ table
　　td#main-column（#side-column）
　　　　　└ div#main（div#side）
　　　　　　　　　└ class.content

テーブルtdそれぞれに通常のdiv idが入れ子で入る。

前はテーブルのセル２つに２カラム（div#）をそれぞれ入れてみた。
メインカラムの両脇borderで上下ぴっちりは、div idでなくtd idにborderをcss指定すればセル２つでも問題ない。
あくまでfooter位置（どの状態でも下位置）にこだわらなければ。

反省としては、htmlとcss両方でスタイル指定している部分。
できればtableは使わずdiv（ブロック要素）ですべてcss記述したい派なんだけど、、まだチカラと知識が及ばず。

コンテストの結果はいかに？

テンプレコンテスト、いよいよ今日が締切りですね。
さて、どのテンプレデザインが１位になるのやら・・
まぁ私の場合、参加したことに意義がある、ただそれだけです（笑）

テンプレ作家さんの記事で紹介されていた共有テンプレを評価しているサイトをはじめて知りました。

261点もあるテンプレ作品ひとつひとつに感想やコメントがつけられていて、私の作品２点にもありました。（ドキドキ）

* marble
配色の妙。抑えたトーンの本文と、色を散らしたタイトル画像。このコントラスト。

* round_yellow
これも配色のセンスとバランス感覚が素晴らしい。サイドバーの見出しなどは文字サイズ固定でもよかったような気はします。どんどん文字を大きくしていくと崩れますので。

私のはどうもシンプルすぎて面白みに欠けセンスのなさを感じていたのですが、こんな風にコメントいただけるとは・・（照）

round_yellowの「サイドバーの見出しなどは文字サイズ固定でもよかった」とは、たぶん文字サイズをx-smallに全部統一してるからだと思います。
（固定にすると表示→文字サイズが変更できない＝閲覧環境の不自由を感じたため、あえて相対サイズを使ってます）

画像を使ってる点では部分的にその方がいいですね。
たいへん貴重なご意見どうもありがとうございました！


ちなみにただいまのDL数（登録してから10日）は・・
* marble　　　　407 　　　　
* round_yellow　144

かなり感激しております。
実は、round_yellowの方がデザイン的に苦戦したんだけどな（汗）
さっぱりすぎのmarbleに人気あるは意外ですね。