2007年09月07日

難題、テンプレート

Seesaaブログを開設し、ラフな記事をメモ代わりに書いていこうと思っていたのですが、初っ端から面倒事が出現です。

公式テンプレートが物足りないので、何とかしたいと思っているのですが、一から扱うのは大仕事です。

仕方が無いので、公式テンプレートを少しずつ融合させて使うことにします。ライトグレー三段若草風のスタイルにしつつ、雰囲気を変えて行きたいところです。少しずつ進めて、追っかけ記事にしておきます。



posted by 台場一 at 01:48 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2007年09月09日

記事日付と記事見出しスタイルの変更

Seesaaのスタイルシートを見てみました。記事日付の部分は、要素h2、記事見出し部分は、要素h3に対応しており、そのままセレクタとなっています。

h3 aは、子孫セレクタ(文脈セレクタ)になっていて、字体と文字色が設定されています。記事見出しのアンカーにだけ有効です。

該当する部分を若草のスタイルと丸ごと差し替えました。日付部分は、日毎の仕切りになっていますので、色付き枠でまとまりが見やすくなったと思います。

変更前は、簡単な仕切り線と日付が書き置かれているだけでした。

posted by 台場一 at 01:50 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

スタイルシートの微調整と下準備

スタイルの改変で記事見出し付近が不恰好になりましたので、記事見出しの字体を太く大きくして、上下の余白を調整しました。

本文の始めと終わりの上下余白も目立つので、クラス属性.textのプロパティpaddingと、.blogbodymargin-bottomを詰めました。

記事で説明に使うための表記があれば便利ですので、スタイルシートにクラス属性を加えました。

スタイルシート中に書かれているコードの表示用に.renew-emと、画像表示の位置決め用に.renew-marginを書き加えています。

毎度、記事作成の時にクラス属性を書くのが面倒なので、要素codeをセレクタに追加しています。

code, .renew-em{
font-size:larger;
font-family:Verdana;
font-weight:bold;
margin:0em 0.3em 0em 0.3em;
}
.renew-margin{
margin-left:20px;
padding:15px;
background-color:#EAEAEA;
border:1px solid #C9CCB6;
}
posted by 台場一 at 03:40 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2007年09月22日

テーブル枠付とリンク下線とブログタイトル部分の改修

テーブルに枠をつけます。シンプルな線で仕切られます。サイドのカレンダーも影響を受けますが、一律に変更します。要素tablethtrをセレクタとしましたので、HTML記述の時にクラス属性を書かずに済ませることができます。

table,th,td{
border-collapse: collapse;
border: 1px solid #C9CCB6;
}

通常の文章と区別が付きにくいため、リンク部分に下線をつけます。既に、要素aがセレクタになっています。プロパティtext-decorationの文字装飾無効を変更します。

この場合変更が記事見出し部分にも及びますが、子孫セレクタh3 aでは、以前のまま文字装飾無効を維持します。プロパティtext-decorationを加えて設定しておきます。

ブログタイトル部分の背景に色を付けます。セレクタh1部分にプロパティbackground-colorを加えて設定し、子孫セレクタh1 aで文字色を変更します。

ブログタイトル部分の領域を調整します。元々不均衡に設定されている上下幅が同等になるように要素h1のプロパティpadding-bottomを変更します。

変更前は、ブログタイトル部分の左側と下側に余白ができています。

ページ左側のマージンは、要素bodyで設定されており、これを無効化します。左段とブログタイトル部分の左側マージンで置き換えます。

左段へは、元のページ左側マージンをID属性#links-leftに設定します。ブログタイトル部分は、文字位置のみ調整します。子孫セレクタh1 a部分にプロパティmarginを加えて同様に左側マージンを設定します。

posted by 台場一 at 19:10 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2007年10月03日

記事中の画像、表の調整

UA(ユーザーエージェント、俗に言うブラウザ)の表示領域が小さいと、画像が記事領域からはみ出す場合があるので、調整しました。

画像用のコンテナに使用しているクラス属性.renew-marginにプロパティoverflowとプロパティ値autoを追加しました。はみ出し時には、たいていスライダが付くと思いますが、処遇はUA依存ですので確定ではありません。

表の外枠幅の変更と外枠上下のマージン対応で、tablethtdのセレクタ一括指定からtableを分けて個別に設定しました。要素tableを使用している個所全体に影響しますが、とりあえず容認です。

table{
border-collapse: collapse;
border: 2px solid #C9CCB6;
margin:1em 0em 1em 0em;
}

表の列幅設定の追加は、XHTMLの要素colで対応しました。画像の非推奨属性borderは削除しました。

posted by 台場一 at 21:24 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2008年02月10日

IE6での表幅、列幅とフロートの欠陥対策

普段は使っていないIE6(インターネットエクスプローラー6)で当ブログを見てみると表示が見苦しい状態になっていました。問題の部分は、表の幅と列幅と右側フロートです。本質的な解決はブログ作成側では難しいと思いましたので、応急的対策を行いました。

ブロックの領域幅を使うという考えで、表幅は指定していませんでしたが、IE6での表示では寸詰まりとなっていました。どうやらスタイルシート上で先に記述があるどこかの無関係なプロパティwidthのプロパティ値を再利用しているようです。この件に当てはまるかどうかは分かりませんが、IEでは似たようなバグがあるとのことです。

対応策として、スタイルシート上で既にセレクタとなっているtable部分にプロパティwidthを加えてプロパティ値を設定しました。フロートの問題にも影響しているので、値はひとまず98%としました。

表の列幅についてはスタイルシートではなくXHTMLの要素colでの相対比指定としていましたが、IE6ではうまく機能していないようです。表幅の指定方法には関係ありませんでした。コード記述で対処できないので、要素col自体を削除して列幅をUA依存としました。

フロートについては、UA全体の表示幅によってフロートが無効となります。表示幅を狭めていくと右側のフロートが順次下側に再整形されます。IE6のmarginpaddingの計算に不具合があることも影響しているのか、ブロックなどの領域が衝突すると再整形しているように見えます。

本文を読む場合に大きな障害にはならないので、少しブロック間の余白を詰めるのみでそのまま静観します。小手先のソース変更は他に影響が出ますし、構造的には段組自体に少々無理があるということも感じます。

個別のUAであるIE6向けの対策でしたが、メーカーが不具合を修正せず規格を軽視する姿勢は疑問です。ちなみに普段はFirefox2を利用しています。

posted by 台場一 at 12:37 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2009年04月19日

全体の配色と文字サイズの変更

開設時からブログデザインがテンプレートの継ぎはぎになっていますが、夜中にゲームということに引っ掛けた当初からの構想である黒地へと模様替えします。

全体の背景を黒にするため、セレクタbody配下のプロパティbackground-colorのプロパティ値を変更します。背景色に合わせて各所多数にわたり調整の必要があります。

全体が単一背景色となり区別できなくなるブログタイトル領域部分と本体部分を境界線で分けます。セレクタh1にプロパティborder-bottomを加えて線幅線形と色を設定します。外枠線の下側のみ描画されます。

非緑系統の文字色をブログタイトルの緑色に変更します。既定のレイアウトではID属性#containerが表示部分全体に対応します。配下の文字色設定となるプロパティcolorの値を変更します。

各箇所の見出し部分の配色を変更します。見出しとなっている記事日付部分に対応するセレクタh2配下のプロパティborderの値を先に設定した緑色にします。プロパティbackground-colorでは値を前色からやや黒寄りに変更します。

段組両サイドの各見出し部分はクラス属性.sidetitleで設定されています。配下のプロパティbackground-colorは廃止して外枠線のみに変更します。プロパティborderを加えて線幅線形と色を設定します。

以前の白背景に比べて文字が収縮した印象を受けるため、文字サイズを大きくします。ID属性#container配下のプロパティfont-sizeの値を変更します。表示部分全体に対応していますが個別設定が優先されるため無効となる箇所もあります。

Seesaa既定のレイアウトの全容は表示部分全体にID属性#containerが設定され、区分としてブログ上部のタイトル部分が#banner、ブログ下部が#footer、中央の段組部分については左段が#links-left、記事領域が#content、右段が#linksとなっています。設定は論理的なもの(上記のように整理して使われているということ)です。

個別設定されている文字サイズも大きくします。ID属性#links配下のプロパティfont-sizeの値を変更します。ID属性#links-left配下では、文字サイズの設定がありませんので左右同一文字サイズとするため、同様のプロパティfont-sizeと値を加えます。段組両サイドの見出し部分の文字サイズが変更されます。

段組両サイドの本文とアンカー(リンク)部分の文字サイズは、クラス属性.side.side aで設定されています。両方のプロパティfont-sizeの値を変更します。

見出しとなっている記事日付部分の文字サイズはクラス属性.dateで設定されています。プロパティfont-sizeの値を変更します。

タグクラウド本文は個別に設定されているため、以前と文字サイズに変更はありません。

posted by 台場一 at 01:28 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2009年04月20日

強調表現の変更と検索ボックスの改変

背景の黒地への変更に対応して強調表現を変更します。独自に設定しているセレクタcode.renew-emにプロパティborderpaddingbackground-colorを加えてプロパティ値を設定します。文字列に外枠と枠内の背景色をつけて強調されます。

要素strongをセレクタとして独自設定に追加します。内容は外枠の新規設定です。

code, .renew-em{
font-size:larger;
font-family:Verdana;
font-weight:bold;
margin:0em 0.3em 0em 0.3em;
border:1px solid #759E03;
padding:0em 0.4em 0em 0.4em;
background-color:#340;
}
strong{
margin:0em 0.5em 0em 0.5em;
padding:0em 1em 0em 1em;
border: 1px solid #759E03;
}

SeesaaのコンテンツHTML編集でブログ画面サイドに設置してある検索ボックスを改変します。当初は検索エンジンの変更を考えていましたが手間が必要なため、ひとまず現行のままでブログ内の記事検索のみにします。

二箇所あるradio1を含むブロックレベル要素divを丸ごと削除します。別の箇所にあるid="radio2"の後にchecked="checked"を追加するとラジオボタンが単一選択で固定となります。

posted by 台場一 at 00:17 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2009年04月22日

アンカー文字色の変更

記事領域が黒地に緑一色となるため、区別がつくようにアンカー(リンク)部分の文字色を変更します。対象は記事中のアンカー部分と記事下のタグワード部分です。基本として記事中の表やリスト内のアンカー部分は対象外とします。

記事下のタグワード部分にはクラス属性.tag-wordが指定されているので配下のアンカー要素aに対して子孫セレクタ.tag-word aとして独自にアンカー文字色を設定します。

記事本文中のアンカー部分の特定を考えます。厳密にコード記述されているなら記事本文中の文字列はブロックレベル要素の配下にあるはずです。Seesaaブログでは投稿記事はブロックレベル要素div class="text"の子要素となります。

スタイルシートの一仕様であるCSS2.1準拠とするならセレクタを柔軟に指定できるため、記事本文を含むブロックレベル要素直属のアンカー要素で子セレクタ(上の例ならdiv.text > a)とすればよいのですが、UA(ユーザーエージェント、俗に言うブラウザ)側の事情に難があります。

CSS2.1準拠を測るAcid2でみるとWindows向けの主なUAでは、v3が初版のSafari全版、v9以降のOpera、Mozilla Firefox 3以降、Internet Explorer 8以降で適合となります。

IE6前後とその描画エンジンを利用した派生UAの利用者が多数だと思われます。非準拠の副作用も考えられるためCSS1で対処します。CSS2が登場して10年ほど経ちますが、IEの対応度は酷いものです。独自路線を標榜しているようですが実態はCSSの劣化実装となっています。

安直に対処するなら、記事本文中のアンカーと表やリスト内のアンカーの文字色を個別に設定することになりますが、後々の取り回しが煩雑になるため好ましくありません。

Seesaaで作成したブログは、XHTML-1.0-Transitional仕様となります。仕様ではブロックレベル要素の表やリスト内にブロックレベル要素の段落を置くことは適合ですが、逆は不適合です。

当初から段落要素pを適用して記事本文を段落分けしているので、対象のアンカーを一意に指定できませんが次善策でセレクタを子孫セレクタp aとします。

.tag-word a{
color:#DDAE8E;
}
p a{
color:#DDAE8E;
margin:0em 0.2em 0em 0.2em;
}
posted by 台場一 at 23:59 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2009年04月26日

IE6での表内の文字色とアンカー画像枠色の継承不具合対応

表内の文字色は特に指定していませんので親要素の設定値を継承するはずです。Firefox3では表内文字色は既定の緑です。

IE6の場合は黒となり背景の黒と同化して文字が見えませんが、表内アンカー文字色は既定の緑を継承するという一貫性のない表示をします。

cctbl.png

セレクタやプロパティの個別設定を横行させると継承の考え方が無効化されます。本来なら不要な設定ですが、IEの不具合対応ということで止む無く以前に独自設定としたセレクタtableに文字色設定を加えます。

現状の設定ではアンカー画像にはアンカー設定色の枠が付きます。記事本文内では、段落要素p配下の場合は既定の桜色となりそれ以外では緑色です。IE6では場合によらず強制的に既定外の青色になります。

acimg.png

表の場合と同様にアンカー画像の枠色についても止む無く個別設定を加えます。セレクタをdiv.text a imgとしてアンカー画像の枠色を設定します。記事本文内では緑色で統一することにします。

div.text a img{
border-color:#7C9907;
}

追記です。記事投稿でSeesaaのファイル項目からサムネイル有りとして画像を追加するとソースにborder="0"という属性が付きます。

スタイルシートの設定より優先されますので、利用の際は取り敢えずその都度削除します。余談ですが同時に付くalignborderは非推奨属性(スタイルシートでの設定を推奨)となっています。

posted by 台場一 at 23:09 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。