FC2ブログ

知的?自己流?普利伊待夢な育児ブログ

主に子育て日記。パソコン関連はソフト紹介や備忘録。
美容/健康・ベビー/マタニティに関する商品も紹介中。

cssc cssc cssc
2009/07/14  Post at Diskenth
Category My Diary Tags カスタマイズ メンテナンス レイアウト
FC2blogをはじめる時、黒ベースのカッコ良いテンプレートを作ってブログをやろう!!って決めていたのですが、最近白系のブログも良いな・・・って信念が揺らぎ始めたので実行しました。ソフトウェア関連から子育て記録がメインのブログになっているので、黒基調はちょっとイメージが暗いかなって気付いた(今更)のも理由ですw

中央カラム・左右カラムを切り替える「Style Switcher」も作り直す予定なので、今は設置していません。「背景黒の文字白」から「背景白の文字黒」に直すと、css全体の細かい部分を直さないとですし、広告のカラーをそれぞれ再度設定するのが面倒でした・・・(; ̄▽ ̄A

まだ細かい部分が直せてないのですがご了承を・・・。
「Style Switcher」完成しました!!
右上のアイコンでレイアウトを切り替えることができます(; ̄▽ ̄A

「Style Switcher」のレイアウト変更ボタン。
↓のようなボタンがブログ右上にあります。
center_botton.png right_botton.png left_botton.png

「Style Switcher」って何ぞや?はこちら↓。
●Style Switcher:JavaScriptによってcssを切り替える小技
スポンサーサイト



2009/06/09  Post at Diskenth
Category html / css Tags Web カラム レイアウト ブログ
今日はふと思ったブログのメインとサブカラムの位置?バランス?ってのをテーマにして考えたことを書いてみました(´=∀=)φ

ブログは大きくわけると、1カラム・2カラム・3カラムありますよね。そこで、私はいつも3カラムを使っているのですが、一般的(圧倒的)に多いのが、メインカラム中央の左右にサブカラムってレイアウトの3カラムだと思います。

私も今までそうしていたのですが、デフォルトのレイアウトを変更し、
左から順番に、メイン・サブ・サブカラムってレイアウトにしました(●´∀`●)

何故かというと、人間の視野?最初に見る範囲は(多分)左→右って順番に目がいくと思い、それならば一番見てもらいたい記事が書かれているメインを左にして、次に重要なアーカイブ・カテゴリ・リンクなどのサブカラムを中央、そして最後に広告系・ブログパーツなどのサブサブカラム的なモノを右にもってくることにしました。
(Mr.Brainでもそんなこと言ってましたw)

でも、ブログを見に来てくれた方を優先したいので、もしこれよりもメインカラムは中央が良い!!って方は、Styleswitcherを使って、このブログのレイアウトを変えて見ていただければ・・・と思います(●´∀`●)

Apple-orange.png
TOPページに出てくる↑か、検索窓上のhead右側にある
black_centermain.pngblack_leftmain.pngblack_rightmain.png
↑のいずれかでカラムの位置を閲覧者の方好みで見ることができます。

皆さんはどうなんでしょうか??
やっぱり中央にメインカラムってのが、慣れ親しんで見やすいのでしょうか??
気になりつつ、何か長文になってしまいました・・・(; ̄∇ ̄A
2009/06/05  Post at Diskenth
Category JavaScript Tags Tips カスタマイズ レイアウト CSS
WebサイトやブログのスタイルシートをJavaScriptによって動的に変化させる小技です。TOPページだけではなく、ページ全体のレイアウトを変化させることができ、更新したり別ページに移動しても変化したスタイルシートを適用できます(cookieが有効なブラウザならです)

このブログでも実装しており、どうやってやるの?という質問をいただきましたので、記事にしようかと思いました(●´∀`●)

サンプルは、私のブログTOPページの目次タブにある、6つのリンクアイコンを押してみてください。レイアウトがパッパッと変わりますw
TOPページのみに表示するこのタブアイコンです。
style_manu.png

  • 黒アイコン1:メインカラムが中央のデフォルトcss
  • 黒アイコン2:メインカラム左でサブカラム右詰めcss
  • 黒アイコン3:メインカラム右でサブカラム左詰めcss
  • 金虎アイコン:メインカラムが中央の背景が金虎柄透過背景css
  • 銀虎アイコン:メインカラムが中央の背景が銀虎柄透過背景css
  • 白アイコン:デフォルトの白版css(ちょい失敗)

気になる実装手順は続きをご覧ください。
Profile

Diskenth

Author:Diskenth

はじめまして。Diskenthです。
30代のしがないリーマンですw
詳しくは ... 自己紹介 »

Archives
Categorise
Comments

Trackbacks
Links

MyBlog Links

Friend Links

Favorite Links

AffiFrend Links

Software | Material Links

Tips | Customize Links

Affiliate Links

Access Up Links

このブログをリンクに追加する

Ad Rakuten

Ad Micro

マイクロアドBTパートナーでおこづかいゲット!

Ad Sense

Ad Trend Match

Ad Adgger

アフィリエイト

ウェルカムボード

大阪 出張マッサージ 鍼灸 神戸 心理カウンセラー 福岡 Gree 広告 DM 制作 ダイレクトメール 代行 ダイレクトメール 発送代行 ショッピング枠現金化 リサイクルショップ 大阪

AccessUp Parts

キーワードアドバイス
ツールプラス

PING送信プラスSEO対策

RSS | Parts