css_div_block CSS div block (April 27, 2007)

Movabletypeのテンプレートをまたいじった。
今回は主にCSS。人気ブログをよく見ているとレイアウトが上手い。

ここ数ヶ月モニタリングしていると、blogのヒット数は500/day以上で
一時期に比べようやく回復してきた。adsenceのクリックもかなり
少ないがある。

しかし自分の記事を読んでいるときに、眼の動きは下から上で
左右のブロックには当然ほとんど行かない。
ということで今回はadsenceありきのレイアウト変更をしてみた。
エントリーの最後にタグを挿入する。

そして左右にあったブロックを右に持って行く。
ここでいったん見てみたのだが、問題はエントリーが画面の左に
寄りすぎていて見にくい。

全部のブロックを真ん中に持って行きたいが、
position absoluteで指定してるので
出来ねえなあと思ってググってみると世の中
頭のいい人がたくさんいるわけで。

最初に作っているページの幅を出しておく。
通常800ピクセルとかで作るとベストだ。

まずdivでくくられたブロックを

#ブロック名 {
position:absolute;
left:50%;

のように、左から画面真ん中に持ってくる。


次にマージン指定でブロックの始点を動かす。
例えば今まで左から600で作っていたとしたら、
ページの真ん中は400なので600-400で200、
左にマージンを取る。

margin-left:200px;
width:幅

逆に真ん中より左の場合、例えば今まで10の位置に置いていた場合は
10-400で-390、
margin-left:-390px;
と置けばいい。

それによってこのページのようなレイアウトが達成できた。

ちなみにこのページは7つのブロックで出来ており、

バナー　ランダムカウンタ
　　　　トップバー
ブログ　リンク　リンク
　　　　　　コメント

というようなブロックをtop属性で高さ方向もいじって配置している。



April 27, 2007 12:45 PM | E
Copyright© 2004-2007 Yukito Inoue All rights reserved.

Link
« hostility | Main | accessibility »
Category: webdesigning
Tag: movabletype
Related ESCAPE>>
bookshelf_full_of_mystery bookshelf full of mystery 海外ミステリの本棚
　　- 父親が書いているブログ海外ミステリの本棚のデザインを いじった。右上にナガマルが登場している。 真ん中の本はTokyo Style、 右にはグラス。DSC-T10で撮影した。 海外

mt3_mt4_export_import_with_tags_comments_and_pings_ MT3 -> MT4 export import with tags, comments, and pings. movabletypeでタグもエクスポートする。
　　- 何らかの理由でMovabletype3からエントリーをエクスポートして Movabletype4にインポートする場合、エントリータグ、コメント、トラックバックが エクスポートされな

mt4 MT4 まだまだ先は長い
　　- 新しいサーバ木太郎の登場で MT4の導入でいきなり手間取ったのがインポート/エクスポート。 これはコッチンの弟であるオステタンが出てきて解決してくれた。 彼は非常に礼儀正しいので、

mt4_movable_type_4 MT4 Movable Type 4 バージョンアップ
　　- 記事の自動保存、静的ページの管理、 複数ブログをまとめたポータルページの構築など 欲しいなあと思っていた機能が追加された Movable Type 4バージョンアップは もうそろそ

repair repair Movabletypeを再構築
　　- Movabletypeの難しいところは、例えDreamweaverのプラグインで コンテナタグ対応のwysiwygな状態で編集をしたとしても、 CSSをオンラインから読み込んでくれ

rss_feed_encoding_eucjp_utf8 RSS feed encoding = EUC-JP -> UTF-8 フィードの文字コードがクロールに影響しているかも
　　- まじめにGoogle sitemapにサイトマップを登録し、 htmlの文法も直した。 しかし全然テクノラティとgoogleブログ検索に 引っかからないのはなんでだろうとだいぶ悩ん

html_seo html seo 文法の正しさは検索エンジンに影響する
　　- この前-546点だったこのblogのHTMLのソースを直し 平均50点くらいまで持って行ったのが3月3日。 その他のページに関してもゆっくりと修正をかけているのだが、 一昨日あたり

mttaginvoke MTTagInvoke 同一カテゴリーの最新タイトル・内容表示
　　- movabletypeで投稿された記事と同じカテゴリーの記事の一覧を表示する MTTagInvokeプラグインを入れた。 こんな感じで同じカテゴリーのタイトルと、最初の38文字を抜

mt334 MT3.34 エントリー画面カスタマイズを継続する
　　- movabletype 3.34の導入をした。 updateでやっかいなのはカスタマイズしているエントリー画面なのだが、 今回はあっさりDEKITA。 エントリー画面でamazon

tagging_again tagging again
　　- tagを利用して関連エントリーを抽出する手法は広く知られていたが またプラグインを新しくした。そのため全てのテンプレートの再構築が 必要になってしまった。 これやるとタグクラウドも

google_webmaster_tools Google Webmaster tools ウェブマスターツールを真面目に使う
　　- Google sitemap改めGoogle Webmaster toolsの ページ分析を見ていると、このサイトのコンテンツとして googleのクローラーが認識しているのは、

captcha_plugin Captcha Plugin movabletype スパムコメント対策
　　- Ogawa::Memorandaで公開されているCaptcha Plugin を入れたのだが、かなり苦労したので同じような苦労にあっている 人向けに何をどうしたかを書いてみる。 ま

tagged tagged. タグ付け
　　- ということで、高校の同級生まっつぉがタグについて まじめに考察している間にも全く無意味な自分用の言葉で エントリーにタグをつけ、実装してみました。 tanzaniaとかthaila

mtentryiftagged MTEntryIfTagged タグクラウド
　　- Movabletypeが3から対応したTag、なのだが、 このところトレンドになっているソーシャルタギング、 タグクラウドを見ているうちにそのビジュアル的な かっこよさに惹かれてそ

333_melancholy 3.33 melancholy メランコリー
　　- MTの脆弱性が発見されバッチを当てないと行けないんだけど 色々カスタマイズしたエントリー周りの事を思うと憂鬱になってしまう ただでさえ寝不足なのに！！！！ くそう！！ MTユーザー



Trackback:
http://www.j-love.info/cgi-bin/mt_test3/mt-tb.cgi/3228
Comments
Post a comment










認証コードに数字の
0と1はありません。



イノウエのレスポンスに非常に時間がかかります。
ご了承願います。

webdesigning entries
website_for_mobile website for mobile おサイフケータイ
　　- W54Sにしてから、おサイフケータイ関連の アプリをダウンロードしまくっていたら パケットが膨大になりパケット定額の 上

web_design web design 気分はウェブデザイナー
　　- サイト作成の依頼が来た。 これってすごい事だよなあと思う。 僕の会社での仕事は機構設計であってweb構築ではない。 プロ

amazoncom_jp Amazon.com -> jp アメリカのアマゾンの商品を日本で買う
　　- Amazon.comを日本で利用する方法を紹介するページを 作ってから3年半ほどたった。 その間にこのページを通して購入

baiduspider Baiduspider 百度 ウェブ・ブログの登録後クローラーが来た。
　　- 一時期大量に来て問題視されたBaiduspiderがこのところ 1日数十回サイトをアクセスしている。Baiduが正式に日

bookshelf_full_of_mystery bookshelf full of mystery 海外ミステリの本棚
　　- 父親が書いているブログ海外ミステリの本棚のデザインを いじった。右上にナガマルが登場している。 真ん中の本はTokyo

pageviews
today: today / yesterday: yesterday / total