2015年05月10日

ああもう、ブログCSS

毎俺。

ブログをここ(さくらのブログ)に引っ越した時の記事で「いったんありもののデザインテンプレートをかぶせておきます」と書きましたが、あまりにも字が小さくてガマンならなくなったので少しだけいじります。本文12pxとかありえんだろ! 老眼の敵め!

あ、あくまでも今のこのデザインは仮のもので、本番はまったく違う私のオリジナルデザインを準備中です。なのですが、テンプレートをサラから組み直すためにこのブログCMSの変数を調査するところからやっていますので(詳細なマニュアル・ドキュメントの類が用意されていない)、完成はいつになるかわかりません。

ということは、この暫定デザインをいつまで使い続けるかわからないわけで、それじゃあ使いにくいままにしておくのもどうかということで、ほかにも気になるところはちょこちょこと見栄えを細かくいじっています。もう修正前の状態が見れないので比較はできませんが。

游ゴシック読みにくいんじゃヴォケとなどといったご意見ありましたら遠慮なくコメントをお寄せ下さい。

タグ:CSS
posted by Gyochan at 00:56 | Comment(15) | ブログ
この記事へのコメント
あー、字を大きくしたらさっそく破綻してる箇所あるな。
俺だったらこうは組まない!
Posted by gyochan at 2015年05月10日 01:00
破綻箇所は自分で修繕したさ。
想定文字数の最大を入れてみてテストするなんて鉄則でしょう。記事タイトルが2行になるとボーダーが途切れて浮くなんてお粗末だよ。
Posted by gyochan at 2015年05月11日 19:28
俺のコメントだけ扱いを変えているのと同じ仕組みで「記事のカテゴリを判別してそのカテゴリ用のclassを追加する」というスクリプトをjQueryで実装してみた(スタイルをあてていないので表示は変わらない)。ぜったいもっとエレガントな書き方があるはずだけど今の俺には書けない。
Posted by gyochan at 2015年05月11日 19:34
サイドバーの行間隔がやけに間延びしているので見てみたらリストですらなく全部ただの改行だった。手抜きにもほどがあるやろ……
Posted by gyochan at 2015年05月12日 00:10
今日もプチいじり。
h1(題字)を白字+距離ゼロぼかし10pxのtext-shadowに。んでこれらともどもopacity 0.66に。要素ごと半透明にするのと、文字と影の色をそれぞれrgbaで半透明にするのとでは、透過率が同じでも違う結果になるのはわかるね。
Posted by gyochan at 2015年05月15日 01:22
プチいじりその2。
画像キャプションの行間隔調整。
課題。
画像幅が狭くてキャプションの文字数が多い時、画像左右の余白が必要以上に広がってしまうのを解消したい。画像の幅でキャプションを折り返させればよいのだね。jQueryさんにお願いしましょう。
Posted by gyochan at 2015年05月15日 01:30
プチいじりその3。
欧文フォントをGoogle Fontsで見つけた 'Maven Pro' に変更。似たテイストの書体はいくつかあったけど、スペース感がよさげ。
Posted by gyochan at 2015年05月19日 14:52
プチいじりその4。
画像の幅とキャプションの幅を一致させるjQuery書けた。
「画像幅が狭くてキャプションの文字数が多い時、画像左右の余白が必要以上に広がってしまう」問題を解消。所要時間9分。
Posted by gyochan at 2015年05月19日 15:01
プチいじりその5。
画像LightBoxもどきを自作。
サムネ拡大プラグインなんかいくらでも出来のいいものが配布されてるのに、なぜわざわざそれらに及ばないモノを自分でコーディングするかというと、勉強だから(←jQuery初心者)。
Posted by gyochan at 2015年05月20日 16:35
早くもプチいじり5にバグ発見(笑)。そうか、そういうケースがあったか……。
Posted by gyochan at 2015年05月20日 16:41
プチいじり5.1。
なんちゃってLightBoxにキャプション表示機能を追加。
いつもの組み方をしていれば問題ないが、絶対自分で例外的な書き方をしてる場所がありそう。
Posted by gyochan at 2015年05月20日 18:54
プチいじり5.2。
サムネ+実寸画像へのリンクの場合だけではなく、リンクなしでsrcが実寸画像の場合もLightBox化。大半は同じ大きさなんだけど、このブログの横幅の関係で実寸より小さく表示されている画像も多いため。ついでにオンマウス効果つけた。
Posted by gyochan at 2015年05月21日 17:58
プチいじり4.1。
画像の読み込み完了を待ってからでないと幅を取得できないことが判明、一応対策らしきことはしたが効果は不明。
Posted by gyochan at 2015年05月21日 18:05
プチいじり5.3。
LightBoxをリンク先が画像の場合のみ動作するように修正。バナーのリンク先がブログ村というケースがあったんだった。そりゃブログ村に遷移しなきゃだめよ。
Posted by gyochan at 2015年05月21日 18:54
プチいじり5.4。
ぐだぐだだったナンチャッテLightBox、ようやくまともになった。ここはもおええやろ。
あとはHTMLがイレギュラーな箇所をこつこつ直そう。
Posted by gyochan at 2015年05月26日 19:30
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: