美しいカテゴリー分けを実践してみる。

 見たぁ~目ぇ~のためぇ~なぁ~ら、エン~~~~~ヤコぉ~ラ。
 おまぁ~えぇ~のためぇ~なぁ~ら、ナン~~~~~ダコぉ~ラ。


 そんなわけで、今回の問題解決の巻。
 試行錯誤すること約40と8分。
 途中チェスで2度の息抜きを交えながら2度負け、腹いせにもう1回やったらまた負けたので、先に終わらせようということに相なりもうした。
 そして今は、ブルボン“プチシリーズ”の“チョコ・ラングドシャ”を食べつつ書き綴る。つづるとたらら。


 なので、早速始める。


 まずは、今回のカスタマイズにおける変更点を箇条書きとする。
 え~とえ~と、なにやったっけか……


  1. 日付につけれるタイトルを活かす!!

  2. サイドメニューの“最新タイトル”に余計なタイトルはつけさせない!!

  3. 日記内容部分にも出てくる不必要な“[カテゴリー]タイトル”のとこを表示させない!!

  4. あとはチョイチョイ。


 つまり、今回のカスタマイズのすべてを集約すると、こうだ。



美しいカテゴリー分け!!


 ではいってみよう。
 実際やると、かなり面倒な日記更新になりそうなため、あまり見た目にこだわらない方にはオススメせぬ。


 ヤバい……早くも“チョコ・ラングドシャ”が残り2枚しかない。
 急遽、もう1つ追加。今度は“プチ・ショコラ”……糖尿街道まっしぐら。


 まず 1 の項。

日付につけれるタイトルを活かす!!


 これは、当初、日付の横のタイトルにも、自分で書けばカテゴリーを設定できるのかと思っておったのじゃ。
 一番デッカいタイトルなんだし、それカテゴリーで分類できなきゃ意味ない。その下のタイトルだけ分類したって、その日は全部で1日じゃけぇ。


 とはいえ、細かいジャンルの事柄が集まって、その日1日になるってな考え方もできる。それこそまさに“日付”っていうカテゴリーに入ってるわけ。
 But, それは Bad.
 それはそれ。


 なにはともあれ、それはできぬ。


2007-05-31*[日記]俺様日和。

 とか書いてみたところで、そのまんま表示されるだけなのだな。


 ならばどうする?


 日記を書くスペースの上にボタンがあって、一番左に“フォルダ+下向き矢印”のボタンをクリックすると、カテゴリーの一覧が出る。
 で、なかから適当なのを選んで“登録する”ってーと、表示されるのはこう。







[]
日付
タイトル
カテゴリー
設定できない!!


※スペースの関係上、改行入れた。


 ここは消せるからいい。
 でも、一応でそれぞれ区切られてるとはいえ、たとえば“カテゴリー”の部分だけ消したいと思っても、そこを挟んでる両サイドの“[ ]”だけが表示されてしまうわけだ。
 それじゃ~なんとも美しくない。


 ならばそこの区切りを全部消してしまえばいいわけよ。
 CSSで、こんなふうに設定するがよろし。



.hatena-body .main .day .body .section h3 {
position: absolute;
font-size: 0.1px;
padding: 0px;
margin: 0px;
height: 0.1px;
visibility: hidden;
}

 なんか実にこざかしい“font”とか“padding”、“margin”、“height”に関しては、なくてけっこう。っていうか、いらね。
 まあ、これがあると、なんとなく気持ちが安心する程度なもんでしょう。
 結局のところ、“position: absolute;”で設定してるから、大きさなんざどんなにデカくても構やしない。
 ただ、そこの部分を“position: relative;”にすると、その分だけ空白ができてしまうわけ。


 この“absolute”ってのはだ。
 “絶対ここじゃなきゃダメなんじゃ!!”って頑固ジジイ。絶対位置指定というやつで、動きやしない。
 つまり、何個も何個もタイトルをつけて表示させるようにしてみると、つけたタイトルが全部そこに集約されて重なっとるのだな。
 たとえ1つの日記の、一番上と一番下のタイトルだったとしても、全部そこ。


 それが“relative”ってほうだと、“相対的な位置指定”ってなんか小難しい単語だけど、要は“まんま”ってことだな。
 いくつもつけたタイトルは、それぞれそれにともなった記事の上について見えるのよ。ちゃんとタイトルと内容として表示されるってわけ。


 まあ、そうしないとわかりゃしないんだし、別にいんじゃね?


 でも、どぉ~~~~~しても見えてないとこまできっちり整列させたいなんて潔癖な方は、たぶん“margin-top”とか設定して“マイナス”の値でも設定しときゃできそうな気配。


 あ、そうそう。
 とはいってもこれ、もう“ブログ形式”の表示としてイジッてるんで、“日記形式”だと、

のとこまた別の表示になる。
 たしか、

のなかに全部“ブックマーク”のアイコンとか入ってたような気がした。
 そうなると、“hidden”にして“absolute”で設定しても、たしか画像分のスペースができちゃうのさ。


 さらに書くと、ここ“visibility: hidden;”は、“display: none;”とは、見た目にまた違った影響を与えるのさね。
 “display: none;”っつーのは、たしかソースコードにすら表示されないんじゃなかったっけか?
 それだとさぁ~……やっぱさぁ~……


 完全に消しちゃうとこれ、やらしい話、あれ“SEO”っつの?
 そこらへんによろしくないんじゃないかなと……
 まま、テンプレートとか配布してるわけじゃないし、いいや。
 もう次いこ、次次。


 ってもうめんどくせぇ。最初で早くも力尽き。
 なので、ズバズバいくとする。
 


 次はこれ。
 ─── なんだっけ? 自分でなに書いたか忘れたべ。
 あ、そうそう。それよ、それ。


サイドメニューの“最新タイトル”に余計なタイトルはつけさせない!!


 これはだ。
 日記の内容部分で、ただカテゴリー分けのタイトルをつけただけだと、またまたたまたまサイドメニューにゃ“■”しか出ないわけ。
 でも、サイドメニューの“最新タイトル”のカテゴリーが表示されるっつー件は、““最新タイトル”のカテゴリー部分は、ハナッから非表示対応。”のほうで解決済みなため、カテゴリー部分は表示されず、タイトルのみが表示されるっちゅーわけだ。
 だから、最初につけたタイトル部分のカテゴリーの横にも、その日のそれと同じものをつけるか、なんか暗躍したいなら、また別のタイトルをつけるがよろし。


 たぶん、日付の横のタイトルだと、字数制限があるのかないのか知らんが、あまりに長いと途中で切られるらしい。
 でも、こちらは切られないで済むらしい。


 まま、やったことは上のやつに含まれてるわ。
 それで良し。


 あ、“最新タイトル”に表示されるのは、どうやら“*”1つでつけたタイトルまでらしいのだな。
 だから、日記の内容で見やすさのために見出しつけたいけど、サイドメニューに表示させるまでもないってときは、“

”を使うとよろしいんじゃなかろうか?
 “*”2つだったっけ?
 今後は目に優しい日記を目指そうということで一応使っていこうなんて検討中だけども、改めてここでやってみるとこんな感じ。


CSS万歳!!


 次。

日記内容部分にも出てくる不必要な“[カテゴリー]タイトル”のとこを表示させない!!


 嗚呼、これも上に同じ。


 最後。

あとはチョイチョイ。


 実際特になんもやってない。


 以上!!
 長くてすまん!!

  • May 31, 2007 7:28 AM
  • 松田拓弥
  • [ ゲロ古 ]

ランキング参加中なので、これ乳首。

  • 人気ブログランキングにて俺様を応援するためのクリック用小バナー
  • ブログランキング・にほんブログ村での応援バナー
  • BlogPeopleの応援用バナー:人間・哲学
  • BlogPeopleの応援用バナー:自分のこと
  • BlogPeopleの応援用バナー:芸術・文学

メッセージありがとう : 0

俺様へのメッセージはこのフォームに入力すべし

だれかの T バック : 0

俺様に T バックを届けるための URL
http://www.matsudatakuya.org/tm/mt-tb.cgi/888
T バックリスト
美しいカテゴリー分けを実践してみる。from 現在なまら進行形

ホーム > ゲロ古 > 美しいカテゴリー分けを実践してみる。

RSS & Atom Feeds
月刊『俺様』
俺様の輪
ランキング
人気ブログランキング

人気ブログランキング

BlogPeople

BlogPeople「自分/自分のこと」ブログランキング

BlogPeople「人間・哲学/人間考察」ブログランキング

BlogPeople「芸術・文学/小説家予備軍」ブログランキング

ブログランキング・にほんブログ村へ

にほんブログ村

ツール
ブログスカウター
track word
Creative Commons License

Creative Commons License

Creative Commons License

松田拓弥.オルガズム
総合入口 & ギャラリーブログ。
Love Life
詩とか詩とか詩とか...
現在なまら進行形
こちら、日記。
おれと映画
俺様が観てきた映画の感想やなんか。

ペントハウス。