TOP秋葉原地図秋葉原ショップリスト秋葉原ニュース秋葉原掲示板秋葉原書籍リスト

2005年04月03日

ひとりごと (2005.04.03)

ブログのレイアウトを3カラムに変更してみました。 


今までの2カラムだと、左のサイドバーに商品などをいろいろ載せるとどんどん下の方に行ってしまい見にくくなってきてました。他の方のブログを拝見すると、みなさん自分でいろいろとレイアウトをきれいに改造されてるんで驚きます。自分にも自由自在に変更できればいいのですが、HTMLを少し使える程度でCSSは難しくてわかりません。

自分のブログをあらためて見てみると、右側に少しスペースがあります。ブログ本体を少し詰めて商品リンクなんかはこっちに移せるのでは?そう思うと思い切ってこの週末でCSSをいじってレイアウトを変更することを決意しました。

まずはインターネットで検索して3カラム化の記事を参考にしたり、同じlivedoor Blogの3カラム化の成功事例などを参照して、何度かトライしてみましたが上手くいきませんでした。なぜか表示が思うようにいかず、サイドバーが下の方にいってしまったり、本体と重なってしまったり。

そこでCSSの本を見て、自分でなんとかしてみようと長時間の試行錯誤の末、なんとか成功しました。

今まではダイレクトでCSSをいじっては再構築、直しては再構築とオンラインで改造作業をしていたので、その時にブログを見ていた人はとても見にくかったと思います。

今回は、以前別のIDで取得したブログを利用しました。現在はほとんど更新していなくアクセスもないブログでしたので、まずはこちらでCSSを修正して基本レイアウトを構築して、それを秋葉原マップのCSSにコピーして細かい部分を手直ししました。そのおかげで今回はアクセスしている人にはあまり迷惑をかけずにできたと思います。

右側のサイドバーには、主に商品リンクを掲載するようにしていますが、トップページ、カテゴリー別、個別記事に別々にコードを書くのは面倒なので、左側と同様にJavaScriptでテキストファイルを読み出してそれぞれ同じ内容を表示しています。

他にはタイトル画像のシェイプアップや、細かい表示の修正なども合わせて行いました。

今回参考にした書籍はこちらです。ちょっと前に買ったものです。

 
詳解 HTML&CSS&JavaScript辞典

この本はHTMLとCSS、JavaScriptが1冊に載っていて大変便利です。ただし辞書のようなものなので、ある程度知識がないと難しいかもしれません。今回はこの中でCSSのボックス表示位置の説明が役に立ちました。

これでレイアウトの改造はほぼ完了しました。今後は大きな変更はないと思います。

「アフィリエイトの商品リンクをたくさん貼りやがって、見にくいじゃないか!」とお思いになる方も多いかもしれませんが、儲けようというよりは何かを売る、という行為が好きでやっている部分が多いんです。インターネットショップというのも興味はありますが、さすがに本業をやりながらだとできません。でもアフィリエイトなら自分で気に入ったものをリンク貼るだけであとはすべてやってもらえるので気楽にできます。

どの商品にどれだけクリックがあるかなど、それだけでも見てて面白いです。 さすがにまだまだ普通のお店のようには売れませんが、それでもポツポツくらいには売れているようです。実際にもらえるのは微々たるものですが。
このアフィリエイトで得られた収益は、取材費に回して(今まで結構掛かってます)さらに良いブログにしてくことで還元しよう、と自分に都合の良い考えを持っています。

途中から話しの内容が変わっちゃいましたが、いずれこのアフィリエイトについても詳しくお話しできればと思います。





関連おすすめアイテム


詳解HTML&XHTML&CSS辞典 [Book]


スタイルシート スタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術 [Book]


ブログをもっと楽しく活用する本―カスタマイズのための基礎知識&カスタマイズのためのHTML・CSS入門 [Book]


速効!図解ホームページ作成 (HTML&CSS編) 速効!図解シリーズ [Book]




Twitterに投稿
この記事についてTwitterでつぶやく





この記事へのコメント


 
 
 
 
※管理人が承認作業完了後に表示されます。関係ないものや誹謗中傷、内容がふさわしくないと判断したものは削除させていただきます。







秋葉原マップへのリンクはフリーです。
情報は記事作成時点のものですので、現在と違う場合がございます。
秋葉原マップに掲載されている写真の無断転載はご遠慮願います。
文章・画像の著作権は秋葉原マップまたはその提供者に属します。


サイトについて会社概要掲載希望広告掲載

Copyright ©2004-2013 秋葉原マップ株式会社 All Rights Reserved.
■秋葉原マップ表示
地図からお店選んで記事を選択できます。まずは見たいエリアをクリックして下さい。
エリアA −中央通りに面するゲーム・ホビーショップと、PCパーツ・中古PCショップ+メイドカフェが集まるディープゾーン エリアB −中央通りに面するゲーム・ホビーショップと、秋葉原UDXゾーン エリアC −昭和通りと秋葉原クロスフィールドの新開発ゾーン エリアD −大型家電・PCショップの電気街+メイドカフェゾーン エリアE −JR秋葉原駅を中心にラジオセンター、ラジオ会館の電気街口ゾーン エリアF −ヨドバシカメラとJR秋葉原駅の中央改札口〜昭和通り口の繁華街ゾーン
■ブログ内検索
■月別書庫
■秋葉原ショップリンク
■お問い合わせ
秋葉原マップについて

※現在は一時掲載を中断しております。

お問い合わせはメールにて
info@akibamap.net



情報蓄積型レビューコミュニティ zigsow(ジグソー)
ドスパラ
ソフマップ

■スポンサード リンク

■秋葉原関連ガイドブック

秋葉†無双 〜ドキッ★otakuだらけの秋葉原120%活用ガイド〜
妄想美少女三国志『真・恋姫†無双』のキャラクターがアキバの街を紹介

Akiba Days―秋葉原120%活用ガイド
秋葉原を楽しみ尽くすためのスポットを、ジャンル別に280店以上を紹介

るるぶ千代田区神田丸の内秋葉原
江戸情緒を感じる神田や趣味の街・秋葉原のオススメスポットなどを紹介。


その他秋葉原に関連する書籍を網羅したリストはこちら→秋葉原書籍リスト