道しるべ

火酒とは・・・ ジン、ウォッカ、ラム、テキーラといったスピリッツと呼ばれる酒を指す。 そんなことは全く関係ないこのブログ

<<071234567891011121314151617181920212223242526272829303109>>

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


続・ブログ設定調整中


 こんばんは、火酒です。昨日に引き続き、ブログの設定をいじり倒しまくっています。しかし昨日の記事、サトシの反響がなかなか大きく、ホッとしたようななんというか、ドヤ顔をしてたような気がします。

 テンプレート等々を色々いじっていますが、カラム幅、プラグインやエントリ領域の幅調整について、僕がどうやったかというのだけ説明しておきます。
 僕の使っているテンプレートは物凄くシンプルなので、画像等は使っていないのです。画像を背景やエントリ枠等に使っている方が僕のやり方をやっても、デザインが崩れてしまう可能性があるので気をつけてください。また、FC2ブログ以外に適用できるかどうかは知りません。

 さて、当ブログですが、現在3カラムレイアウトを適用しています。そして左のカラム幅は300ピクセル、右のカラムが160ピクセル、中央のエントリ領域の幅が540ピクセルとなっています。
 もともと左が200ピクセル、中央380ピクセル、右が200ピクセルの合計780ピクセルだったのですが、500ピクセル程度の画像を使いたくなったので調整を行いました。(ちなみに今540ピクセルの画像をアップしても500ピクセルまでの表示になります。余白領域に左右20ピクセルづつ取られているようです。)

 一昔前のモニタサイズについて、画面解像度が横幅800ピクセルというのが主流で、ブログの元々のレイアウトもそれにそっていることが多いらしいです。ブログに限らず各種サイトを巡回していても、なぜこんなに両側の余白が多いのだろう?というサイト様も多数あると思いますが、それはこの800ピクセルに合わせている、というところに拠っています。

 しかし最近のモニタサイズは1024ピクセルであったり1960ピクセルだったりします。800ピクセルのモニタを使い続けている方のほうが少ないかと思います。
 ちなみに最初テンプレートを改変しようと思った時は、1280ピクセルを基準にする予定でした。しかし、Sony Tablet P が1024ピクセルであったために計画を変更しています。

 さて、説明が長々となってしまいましたが、更にもう一つ。1024ピクセルを基準にページを調整する、となった場合でも、1024ピクセル限界で作ってはレイアウトが壊れます。理由はスクロールバーの存在で、スクロールバーだけで20ピクセルほど消費します。

 では、このピクセル数を弄ぶためには何をいじればいいか、なんですが、管理画面からテンプレート設定を開いて、CSSの編集を行うことになります。

 CSSの中をスクロールしていくと、こんな感じの記述が。

 2011120801.jpg

 さて、一応注意しておきますが、僕は専門家でも詳しい人でもありません、推測で何がどうなっているかをここから書いてきます。

 まず、CSS内のBody、この画像で言う1000pxというのが恐らくページ全体の幅を決めています。そしてColumn内、2つの記述の塊がありますが、上の塊のwidth:800px;が左+中央カラムの幅を決めているものと推測しています。その下の塊は右のカラム。

 CSS編集画面で、上の画像の続きをアップします。

2011120802.jpg

 ここにも記述の塊が2つありますが、上の塊が中央カラム、下の塊が左カラムとなっています。

 とまぁ、僕の場合はこんな感じでした。色々とひたすら弄んでいじくって、今のレイアウトまで持ってきています。

 また、地味に苦労したのが拍手ボタンの置き場。これ、ブログについてくる機能を使うと、置き場所が「追記の開閉」リンクの前か後に固定されます。これもブログのテンプレートによってはレイアウトが崩れる原因となるわけでして・・・
 そして見事に僕のブログはレイアウトがおかしくなったので、FC2IDで拍手のサービスを登録、タグを取得してHTMLの記述の中に追加した次第です。

 CSS、HTMLともに、編集するのに抵抗がある方は多いでしょうが、PCのテキストやら何やらに丸コピしてバックアップを取っておけばなんとかなりますw
 適当にいじって、いじくり倒して素敵なホームページに!なればいいなぁと思いつつ、しばらくはHTMLとCSSと格闘する日々が続きそうです・・・

 見事に文字ばっかりのエントリになってしまいました。文字ばっかりの記事って読みにくいから読まないんですよね~、それはわかっているのですが、書いてしまった以上、消してしまうのはMOTTAINAI!(ぇ

 あ、プロフィールやらプラグインの位置やら中身やらも色々いじくり倒しています。僕はデザインセンスとかそういったものがわりと皆無なので、パッと見「ここをこうしたほうがいい!」とか、「こんな感じでお願い!!」とかがありましたら、挑戦しますので是非ともご意見、ご指摘の程を・・・!

関連記事


comment

こんにちは^^

コメント&ご訪問ありがとうございます^^

私、CSSやHTMLって難しいものだと思い込んでいて
迂闊に触ってはいけないものになってましたが、
そうでもないのですね^^

前記事のサトシくん!
別のヒーローものかと思っちゃいました

それではまたお邪魔しますね~^^






*am*blue|2011/12/09|edit
コメントありがとうございます!

>*am*blue様

こちらこそありがとうございます!

 HTMLもCSSについて、僕も食わず嫌いな所がありました。難しそうだし、失敗したら((((;゚Д゚))))ガクガクブルブルって感じで。
 適当にいじってみて、何かが変わると楽しくなりますよ!そこから深みにハマるのもまたイイかもしれませんw

 意外とサトシについての反応が多くて嬉しい限りですw
 こちらこそまたよろしくお願いします~

火酒|2011/12/09|edit

comment form

管理者のみ閲覧可能




Profile

火酒

Author:火酒


 基本的には、火酒の日常を。そして時には皆様のお役に立てるようなエントリも書ければいいかな、程度につづっています。

 ほぼ火酒の実体験ですが、特定避けのため、所々改変しています。もし特定した場合でも、気づかなかったコトにして下さい(笑)。

 一言だけでもコメントを頂ければ元気が出ます、火酒の何かのレベルがきっと上がります。


壁|д・) ソォーッ…

壁|∀・)Ξスッ
このブログをはてなブックマークに追加
壁|д=) ジー
FC2ブログランキング
壁|ロ゚)ハッ
Counter
About 道しるべ

 ”道標(みちしるべ、どうひょう)”とは、目的地までの距離や方向を示すために設置されたもの。マイルストーン、一里塚、Milestone。by Wikipedia。
 ですが、このブログはただひたすらに迷っている火酒が、書きたいことを書き連ねているだけですw
 ここに書き連ねた”記録”が、いつか僕の糧になる。勝手にそう信じながら。
 管理人への連絡についてですが、メールアドレスを公開します。michishirube☆kasyu.net(☆→@で)。もし連絡したい状況になったらお使いくださいb
Links
 当ブログはリンクフリーです、そして相互リンク募集します。”原則”受け付けられますb
 リンクについて、詳しくはコチラのエントリをお読みください。
 また、このブログをリンクに簡単に追加するためのリンクはコチラです(FC2限定の機能となります、悪しからず・・・)。

→このブログをリンクに追加する
Diary
Everything
RSS URL
最新エントリのRSS URL


最新コメントのRSS URL


最新トラックバックのRSS URL
All Links

Click to expand





Information

 かねてから僕が運営していたRedStoneの★BACCARAT★ギルドサイトですが、この度、勝手ながら閉鎖させて頂きました。関係者の方々、散々放置してしまっていて申し訳なかったです。
 この跡地に、新たなサイトを立ち上げます(RedStone関係無いです)。まだまだ構想中ですが、これから公開できるよう、整備を行います。
 2012年、1月1日

 新たなサイト 道しるべ を開設しました。これからコンテンツを充実させていきます、よろしくお願い致します!
 2012年、4月21日

copyright © 道しるべ. all rights reserved.
copyright © 2004 powered by FC2. all rights reserved.
javascript by Harukiya Archives. all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。