Bloggerをスマートフォンに対応させる

もうかれこれ2ヶ月程前になるんですが、スマートフォンを買ったのでkdpogを表示させてみたところ、まーPC用サイトなので文字やら写真やらが小さい小さい、、、ズームしても操作しづらいことこの上無いので、Google先生にやり方を聞いてBloggerをスマートフォン対応させてみました。

kdpogホーム (スマートフォン対応前)

LinkWithinでBloggerに関連記事リストを表示。

普段色々ブログを訪れると、良く投稿の下の方に「関連記事」みたいな欄があって、同じラベルとかカテゴリの話がリストされているのを目にします。

おいらもそれに挑戦してみたいなあと思い、Bloggerで関連記事を表示出来るようなウィジェットが無いものかなあとGoogle先生に聞いたところ、こんなのがありました。実は既に導入してから1週間ほど経ちますが、、、

LinkWithin - related posts with thumbnails

Bloggerの表示速度改善を図る #02

以前BloggerでLightboxがデフォルトで動いちゃってる話をして、とりあえずその機能はOffにし自前のjQueryだけ動かすことにしたのですが、結局のところどっちが処理が軽いんだろ、と思い、出来れば軽い方を採用したいなあと思ったのでちょっとしたテストをしてみました。

内容は、

• 自前のjQuery Lightboxのみを動かした状態
• BloggerのLightboxのみを動かした状態

をそれぞれ以前も使ったWebWaitで測定する、というものです。

BloggerでLightboxがデフォルトで動いとる!!

気が向くとちょこちょこ更新しているこのブログ。と言うかBlogger。最近何となく画像表示に違和感が。

左の画像のバックに右の画像が。。。心霊写真!?ｗ

Bloggerの表示速度改善を図る #01

ご覧の通り、このkdpogはGoogleのBloggerを使っていますが、同じようにBloggerの他の人のページを見ていると、表示が遅いという意見をたびたび見かけます。これに激しく同意。

まあ外部に保存したスクリプト(Google Site)やら画像(Picasa)やらを参照しながら組み立てて表示しているので、仕方無いっちゃ仕方無い気もするのですが、簡単に改善出来そうなネタを見つけたので挑戦。で、速度改善策を施す前後で、以下のWebWaitを試して、効果が得られているかどうかを確認したいと思います。

WebWait

Lightboxでうにょーんと広がるサイズを制限する。

Lightboxは、設置した画像をうにょーんと、見た目もかっこよく大きくしてくれるので愛用していますが、ノートPCなど画面が小さい端末で見る場合、画像が大きくなりすぎちゃって、画面をスクロールしなきゃいけない場合があります。

まあ元の画像をも少し小さくすれば良いじゃねーかという話もありますが、それを始めちゃうと今までの画像全部直しますか!?って議論になってしまってイヤなので、Lightbox側で何とかしてみるという記事です。とは言ってもちょうど良い感じの記事が見つかったのでこりゃいいやと思って真似してみるだけですけどね。

写真が表示されない!?

• 2011/06/15 (Wed.)

何か、投稿内に設置した写真が表示されなくなってるです。
picasaへのリンクが変わっちゃってて。。。

何でだろ。

Lazy Load Plugin for jQueryで画像をふわーん。

普段何気なくインターネットしていて、色々ブログなんかも閲覧するんですが、最近どうしても気になることがあったのでやってみる。

だいたいブログってのは記事を上から下に書いていくわけで、毎日書けばそりゃエントリが増えていきますし、どんどんページは縦長になりますよね。で、欲しい記事を探して縦長の下の方に向かってマウスをクリクリとまわすわけです。画像を使ったサイトなんかだと上から下まで画像がたくさんあったりします。で、マウスをクリクリして画面をスクロールする際に、新しく表示される画像(要はページの下の方にある画像)が何となくふわーんとフェードインするようなサイトに出くわしたことありませんかね。

あの「ふわーん」感が気になっちゃって気になっちゃって、どうしても真似したくなったので、導入してみましたというのが今回の記事です。

BloggerをSyntax Highlighterで見栄え良く。

ここ最近、ラベルを階層化したいがためにjQueryを導入したり、それに伴って"prototype.js"を廃止してみたり、何かとブログの中にhtmlやらjavascriptのコードを記述することが多いのですが、なんだか記事が縦長になっちまうし何よりも色気が無い。

で、コード記述をキレイに見せたいなあと思って色んなブログを見ていて気になっていた表示方法が「Syntax Highlighter」によるものであることが発覚。早速導入してみまーす。

当初の目的であるラベルいじりから脱線しまくっているけど気にしない。

LightboxをjQuery化で軽めにうにょーん。

jQueryを導入し、ラベルの階層化をするべく色々いじくってみましたが、なかなかうまく行かず、、、やはりコードの中身を見て検証しないといけないとなると、知識が無い私にはキツイものがあります。

で、jQueryについて調べていると、かつて画像うにょーん化をした際に使ったLightboxが、jQueryのプラグインとしてあるじゃないですか。

これを使うと"prototype.js"を使わなくて良いのかな、と思うと、だいぶブログの表示が軽くなるはず。何しろ"prototype.js"が159KB、"jquery～.js"が89KB、合計248KBものライブラリを表示のたびに読み込んでいるわけだから、そりゃ遅いわ。"prototype.js"を使わなくて良いのなら、3分の1くらいのサイズになるので軽くなるでしょ。

というわけで、ラベルを階層化したいところではありますが、ちょっと寄り道して表題の作業に取り掛かってみようと思います。

ラベルを階層化したい。(jQuery導入編)

bloggerを始めて早4ヶ月。色々記事を書く中で、ジャンル分けをするために「ラベル」を適宜設定しているのですが、これがだいぶ増えてきました。
まーラーメン食うたびに最寄り駅を設定したりするからかも知れないし、縦長なレイアウトの問題かも知れませんが、、、けどレッドウイングネタと、ラーメンネタと、その他とか、色々一目瞭然になるようにラベルを階層化したいので、少しお勉強してみます。
具体的には下のような感じにしたいです。

ラベル
+ レッドウイング
|-+ #8111
|-+ #9024
|-+ アクセサリ
|
+ ラーメン
|-+ 目黒
|-+ 恵比寿
|-+ 日吉
|-+ 水道橋
|-+ 田町
|-+ 綱島
+ ブログ
+ null
...

続 設置した画像をうにょーんとしたい。

先日、ブロガーにLightbox 2を導入してみましたが、単にうにょーんさせるのではなく、ちょっとしたおまけアルバム機能もあるようですので挑戦してみようかと。

設置した画像をうにょーんとしたい。

普段色んなサイトを見ていると、画像をクリックした時に、その画像が別のウインドウとかページが切り替わって開くのではなく、参照しているページ上にうにょーんと表示されることありますよね。

うにょーん、じゃ分からんかも知れませんが。

だけど、そのうにょーんがどうしてもやりたくて仕方無いので調べていたら、これまたまさにヒットな記事を見つけましたので挑戦してみます。

「登録: 投稿 (Atom)」を消去したい。

ブロガーを使っていると、ブログページの下部に「登録: 投稿 (Atom)」というのが表示されます。これが個人的にはジャマ。

「登録: 投稿 (Atom)」がジャマ。

ブログをケータイでも。

かなり色んな人が関連記事を書いてますが、bloggerにはブログをケータイ用サイトとして表示する機能がありません。
ので、リバーストーンというウェブデザイン屋さんが提供しているMobloggerというサービスを使って、ケータイでkdpogを見れるようにしてみました。

http://moblogger.r-stone.net/blogs/1202888626243424246