役に立つツールの紹介とレイアウト変更の話や広告の裏ワザの話

ぼんごれ

忘れないうちに記事にしとこうか。レイアウトをちょいといじくったので、メモしときます。
記事にしとけば色んな人が見に来て、レイアウトの悩みが解消されるかもしないね。
欲しい情報の橋渡しになれれば光栄です。

まず、俺のHTMLやCSSの知識なんて初心者クラスです。多少ホムペやブログをやってりゃ
誰にでもわかるような、そういう知識しか持ってないことが今回の話の前提です。

ちょっと前からCSSを使った綺麗な表の作り方に憧れてて、すっきりした表の
作り方が知りたかったんです。それと、このブログはシンプルすぎるのが気になってたんだ。
もう一つ、人気記事ランキングの表示場所に困ってた。タイトルが長いからw。
そこで記事の上に箱を作って、ランキングをそこに表示させればいいことに気付いた。

CSSで綺麗な箱を作るのに参考になったのが、
ホームページを小粋に』さんのCSSを使ったテーブルタグの記事なんだ。
これこれ!この「Sample1 超シンプルで定番のテーブル」が欲しかったんだよ。

HTMLでTABLEタグで作るよりもカッコいい!シンプル!
CSSとHTMLは何となく知ってたから、このブログでやってみた。
四苦八苦の末になんとか箱だけは出来た。

次にこの箱に何を入れるか。俺は2chまとめサイトにあるRSSを使った最近記事一覧
のような便利なものが欲しかった。
で、『ブログパーツ 「単眼RSS」』さんの、
記事のタイトル(RSS)を自動的に取得してリスト化するブログパーツが良かった。

2chまとめサイトなどで使われてるサービスを、広告がほぼ無しで利用できる、
優れたブログパーツなんだ。表示される記事は相互リンク済みのブログさんのRSSを
取得して、一つ一つ入力していくだけ。細かい調整をして、生成タグをブログに
貼るだけの楽ちん作業。これで記事トップのRSS最新記事ができた。良い感じでしょww。

ここまでくるのに苦労したんだよーww
俺は頑張った。滅茶苦茶頑張ったw。

次に俺は人気記事ランキングの場所を作ろうと、記事上の箱を1つ増やしたんだ。
2段にした。そこにランキングを表示させれば、すっきりするだろうと思ったんだ。
箱はすぐにできた。コピーだからね。CSSをいじってHTMLの一部を変えてコピー。
CSS・HTML連合軍と俺との戦いは、ここから始まったんだ。

何をどうしたのか、ランキングが間延びしてとんでもなくなっちまった。
俺はランキングをスクロールさせて見えるようにしたかったんだ。
ランキング全部を表示させたかったわけじゃない。スクロールさせたいんだ。
それから何度も何度もCSS・HTML連合軍の攻勢に負け続ける俺軍。まさに孤軍奮闘。
レイアウトが崩れて半べそしかけて、必死に検索しまくってた時、

CSSを
.rank{
overflow: auto;height: 150px;
}
にして、HTMLを
<div class="rank">ランキングのスクリプト</div>

てやったら、崩れてたレイアウトが直ったではないか!
それからも色々直すことはやったけど、大事なこと一つ覚えた。
テンプレートはいじる前に必ずコピーしておく。

解ってるけど、直すことに熱中してると忘れちゃうんだよね。でも大事なことなんだ。
このoverflowで助かったんだけど、教えてもらった記事のURLが解らなくなっちゃったんだ。
必死だったからね、履歴を見ても分からない。アメブロさんだと思うんだけど、
わからない。リンクさせていただきたかった。申し訳ないことをしてしまったorz

追記:ブックマークしてました。教えていただいたアメブロさんが解ったので紹介します。
パソコンが好きになるブログ 表技・裏技・便利技伝授』の
「アクセスランキングをスクロール表示にしてみた」のページです。
ありがとうございました。本当に助かりました。感謝。

最後に、アマゾンに貼ってある広告以外の写真て使えないのかなーて思ってたら、
ブログ用の写真検索さん』さんに、アマゾンの中の好きな写真にタグをつけて、
正式に広告として使えるつー素晴らしいことが解りました。

アマゾンのリンク動作確認ツールで調べても、問題なく作動してます。
お墨付きじゃないすか!で、早速使ってみましたけど、良い感じじゃないですか!
ブログの情報量が増えて良い感じになりました。いいねw。こういうことがしたかったんだ。

「自分のブログってなんかさみしいなー」って思ったら、是非試してみてください。
ページの情報が増えることは、それだけ訪問者の滞在時間が増えることに直結するでしょ。
ブログ運営者さんの参考になれば嬉しいです。

ただ、CSSやHTMLをいじった後は、IEで見た目を確認してください。
俺はクローム使ってるから、IEで見ると表示に差が出来るんだ。
その表示が許容範囲内ならいいけど、全然違って表示されることはあります。

今までにもそういうことはあったし、CSSやHTMLを変えれば考えられることです
基本的にIE目線でレイアウトを考えた方が良いですね。俺は必ずそうしてます。
だってアクセス解析見れば、どのブラウザが一番使われてるかが一発でしょ。
訪問者さん目線でレイアウトを考えないと、ダメでしょ。そう思うよ。

最後に、IE利用者さん向けに1つ。このブログは字が大きいです。
IEの『表示』→『文字のサイズ』の後で好みの字の大きさに調整願います。
目が良い人だけ見てるとは限らないからね。色んな人向けで書いてます。
俺は目が悪いから、大きい字の方が見やすいんだ。

それと、このブログと相互リンクが完了したブログさん向けに1つ。
RSS最新記事は無断で掲載させていただきます。
ご都合が悪いようでしたら、コメントを頂けると削除させていただきますので、
よろしくお願いいたします。

長くなりましたが、お疲れ様でした。
HTML&CSS標準デザイン講座 【HTML5&CSS3対応】
HTML&CSS標準デザイン講座 【HTML5&CSS3対応】
俺が買った本が無かったorz
今回の記事の件で、CSSやHTMLの事で再確認したなー。
イメージが形になるのは面白い!間違いながらも完成すると感動する!!
俺が初めてホムペを作った時、タグが理解できないから本屋でこういう本を買ったんだ。
オレンジ色しててハンドブックみたいな小さい本なんだけど、どれほど役に立ったか!

HPビルダーじゃなくてフリーソフトを使ったからってこともあって、凄く勉強になったんだ。
それで学んだ知識は今でも役に立ってる。これからもね。
本てのはネットと違って、いつでも好きな時にタダで読める。電気代も使わない。
便利なんだよね。欲しい情報を得る時間はネット検索より早い。目も疲れない。

FC2が用意してるテンプレートは、基礎的なことなんだよね。基本的な体裁が整えられる。
それ以上のカスタマイズは自分でやるしかない。レイアウトが崩れても自分のせい。
でも俺はいつまでもそのままのテンプレは使いたくないんだ。俺だけのレイアウトを作りたい。

別に凝ったレイアウトじゃなくていい。凝り過ぎると自分でも訳が解んなくなるから、
ちょっとだけ工夫したいんだ。箱を作ったり、位置を動かしたりね。
そういう時にこういう本があると、すごく便利なんだ。俺も経験があるから良くわかる。
今すぐ直したい時に、ネットじゃ遅いんだよな。検索じゃ遅いんだ。

レイアウトが崩れた時ってのは、誰かが自分のブログを見てるかもしれない。
その時に崩れたレイアウトを見て、もっと見てほしいのに工事中だと思って
帰ってしまうかもしれない。情報を探しに来てくれたのに、ブログのどこかに
情報はそこにあるのに、去って行ってしまうことが、何よりも悲しいんだ。

だから急いで直したくなるんだな、俺はw。
そんな時に手元に解説本があれば落ち着ける。パニクることもないし凄く便利なんだ。
落ち着いて対処できる。重要なこと。一度パニクると連鎖するんだ。怖いくらいにw。
こんなことは俺一人だけか?そうじゃないはずだ。みんなパニクる。
そん時に解説本があれば間違えることなく対処できるんだ。そういう便利な本だぜ!
関連記事
Posted byぼんごれ

Comments 0

There are no comments yet.

Leave a reply