毎俺。
ブログをここ(さくらのブログ)に引っ越した時の記事で「いったんありもののデザインテンプレートをかぶせておきます」と書きましたが、あまりにも字が小さくてガマンならなくなったので少しだけいじります。本文12pxとかありえんだろ! 老眼の敵め!
あ、あくまでも今のこのデザインは仮のもので、本番はまったく違う私のオリジナルデザインを準備中です。なのですが、テンプレートをサラから組み直すためにこのブログCMSの変数を調査するところからやっていますので(詳細なマニュアル・ドキュメントの類が用意されていない)、完成はいつになるかわかりません。
ということは、この暫定デザインをいつまで使い続けるかわからないわけで、それじゃあ使いにくいままにしておくのもどうかということで、ほかにも気になるところはちょこちょこと見栄えを細かくいじっています。もう修正前の状態が見れないので比較はできませんが。
游ゴシック読みにくいんじゃヴォケとなどといったご意見ありましたら遠慮なくコメントをお寄せ下さい。
タグ:CSS
【「ブログ」カテゴリの最新記事】
俺だったらこうは組まない!
想定文字数の最大を入れてみてテストするなんて鉄則でしょう。記事タイトルが2行になるとボーダーが途切れて浮くなんてお粗末だよ。
h1(題字)を白字+距離ゼロぼかし10pxのtext-shadowに。んでこれらともどもopacity 0.66に。要素ごと半透明にするのと、文字と影の色をそれぞれrgbaで半透明にするのとでは、透過率が同じでも違う結果になるのはわかるね。
画像キャプションの行間隔調整。
課題。
画像幅が狭くてキャプションの文字数が多い時、画像左右の余白が必要以上に広がってしまうのを解消したい。画像の幅でキャプションを折り返させればよいのだね。jQueryさんにお願いしましょう。
欧文フォントをGoogle Fontsで見つけた 'Maven Pro' に変更。似たテイストの書体はいくつかあったけど、スペース感がよさげ。
画像の幅とキャプションの幅を一致させるjQuery書けた。
「画像幅が狭くてキャプションの文字数が多い時、画像左右の余白が必要以上に広がってしまう」問題を解消。所要時間9分。
画像LightBoxもどきを自作。
サムネ拡大プラグインなんかいくらでも出来のいいものが配布されてるのに、なぜわざわざそれらに及ばないモノを自分でコーディングするかというと、勉強だから(←jQuery初心者)。
なんちゃってLightBoxにキャプション表示機能を追加。
いつもの組み方をしていれば問題ないが、絶対自分で例外的な書き方をしてる場所がありそう。
サムネ+実寸画像へのリンクの場合だけではなく、リンクなしでsrcが実寸画像の場合もLightBox化。大半は同じ大きさなんだけど、このブログの横幅の関係で実寸より小さく表示されている画像も多いため。ついでにオンマウス効果つけた。
画像の読み込み完了を待ってからでないと幅を取得できないことが判明、一応対策らしきことはしたが効果は不明。
LightBoxをリンク先が画像の場合のみ動作するように修正。バナーのリンク先がブログ村というケースがあったんだった。そりゃブログ村に遷移しなきゃだめよ。
ぐだぐだだったナンチャッテLightBox、ようやくまともになった。ここはもおええやろ。
あとはHTMLがイレギュラーな箇所をこつこつ直そう。