このブログ「DigDag」でも実装している「プルダウンメニュー」。
（上から落ちてくるタイプを「プルダウンメニュー」、「ドロップダウンメニュー」といいます。)
カテゴリーや記事へのリンクをメニュー化することで、アクセシビリティー、ユーザビリティーが向上すればと思い採用しました。
この「プルダウンメニュー」のCSSとHTMLをダウンロードできるサイト「CSSplay」の紹介です。
more >>続き記事などを書いたときに上手にナビゲーションしたい。
「関連記事」などでもナビゲートできるが、上のようなナビゲーションは直感的に解りやすい。
昨日のページビューが今までの1.5倍に！
アクセス解析で毎日アクセス、ページビュー、人気のコンテンツなどを解析している。
実は昨日のアクセスで驚く事があったｗｗｗアクセスはここ数日の平均と変わらないのに、ページビューは1.5倍に増えているｗｗｗ
このブログのページビューの平均は1.76ページ。
ところが昨日のページビュー平均は2.51ページｗｗｗｗ
確かに昨日は記事を４つ書いた。
記事をいつもより多く書いたからページビューが増えたのか？
答えは違うところにあったｗｗｗｗ
カッコイイ「プルダウンメニュー」のデモ「CSSplay」
様々な「ドロップダウンメニュー」、「プルダウンメニュー」を集めてみました。
上の画像のようにスケルトンのドロップダウンメニューもあります。
カッコよすぎです。
記事下によくある関連記事へのリンク
記事がそのページだけで終わらなかったり、前後に連続する関連記事があるときにとても分かりやすいリンクの貼り方ですねｗｗｗこのブログでも導入したいと思いますｗｗｗユーザーが迷わないブログ作りｗｗｗ
ブログを書いていると、以前書いた記事の続きや、これからも続きを書くであろう話題が多々あります。
そういった記事の時には「関連記事」と見出しをつけ、記事の終わりのほうにリンクを貼ることが多いわけですが、欠点がないわけではありません。
「関連記事」と一言で言っても今読んでいる記事の前なのか、それとも後なのか？
記事によっては順番通りに読んでいかないと理解できないコンテンツもあります。
そういう時に便利なのが写真のような形のリンクｗｗｗ
今自分がどこにいるのか、前後の記事がどれくらいあるのかが分かりやすくていいですｗｗｗ
これをこのブログにも導入したいと思いますｗｗｗ
ブログでよく使う画像のレイアウトを工夫してみる
最近話題再燃のGOLDEN EGGS。世紀に脱力系アニメｗｗｗご存知の方も多いと思いますが日産ノートのCMで使われ、再び話題にｗｗｗ関連記事はコチラからｗｗｗ
ブログを書いていてよく使う画像。
記事のコンテンツと関連した画像を使えば、読む人は直感的にコンテンツのイメージをつかみやすくなるので画像はよく使う。
でも画像の配置には一工夫欲しいところ。
という訳でちょっとCSSをいじってみましたｗｗｗ
右の画像のように、画像の下に「画像に対しての紹介文」を入れると、記事内の文章より目立ちますｗｗｗｗ
この部分に文章を入れることでページの内容をイメージしやすくなりますｗｗｗｗ
画像を効果的に使うのもユーザビリティ向上ですねｗｗｗ
文字ばかりより画像を上手に使おう
ブログを書いているとついつい文字ばかりのページになりがち。
でもユーザーに読んでもらいたい、ページビューを増やしたいと思うなら、読みやすいページつくりを心がけたい。
文字ばかりのページはよっぽど濃いコンテンツではない限り熟読させるのは難しい。
パッと見てイメージを掴みやすい画像を上手に使ってレイアウトしていこう。
ページ内リンクとページ外リンク
ウェブページでは絶対に必要な要素リンク。
このブログでも当然数え切れないリンクが張り巡らされている。
ブログを読んでいたり、サイトを閲覧している時にクリックして移動するリンク。
そのリンクがどこへ続くリンクなのか意識した事はありませんか？
オレは思わぬところへ飛ばされるリンクにウザさを感じる事があります。
例えばあるサイトを閲覧していて、そのサイトの使い勝手に慣れた頃、リンクをクリックしたらサイト外の別のページに飛ばされてしまう。
テキストを読めば関連したページなのかもしれないが、突然移動させられた見慣れないページの使い勝手がわからず思わず戻ってしまう事が多い。
せっかく元サイトの使い勝手になれた頃、いきなり関連ページとはいえ別サイトに飛ばされるのはちょっとウザイ。
リンク先が大手サイトなら使い勝手も分かりやすいが、個人の運営するブログ、サイトなどではまたいちからサイトの特性を覚えなければならないのが面倒。
そのリンクがどこへ続くリンクなのか？
サイト内リンクなのか、それとも外部ページへのリンクなのか？
直感的にそれが分かることはサイトの使いやすさの上でとても大事な事だとオレは思います。
リンクのデザインをカッコよくしたい
デザインを変更したDig*Dag。
変更したばかりの時は自己満足のせいか気にならなかったが、慣れてくるとイマイチ使いにくい。
特にリンクのデザインと見出しのデザインがかっこ悪い。
あと2次元で平面な丸角デザイン。
というわけでまずはカッコよくてユーザーにとって使いやすいリンクを考えてみた。
Firefoxでは表示されている画像がIEでは表示されない
デザインを新しくしたこのブログDig*Dag。
今回のCSSには自信があったッスが・・・
Firefoxでは表示されている背景のグラデーションが、IEでは表示されませんでした。
なにが原因か・・・
ちょっとCSSを変更したら表示されるようになったッス！
まず最初のCSSは、
background:url(http://blog-imgs-29.fc2.com/d/i/g/digdagdig/digdagmainlogo.gif) no-repeat top left; imageプロパティ、repeatプロパティ、positionプロパティをまとめて書いていました。
CSSの学習の為に3カラムレイアウトを採用
Web標準を目指し、XHTML+CSSでサイト構築を勉強中なオレ。
今回はfloatによる3カラムレイアウトに挑戦してみたッス。
一応クロスブラウザを目指し、頑張ったッス。
まだFirefox以外のブラウザでチェックはしていないからIEでどんな風に表示されているか気になるところですが、その前にCSSのエラーチェックをしてみたいと思うッス。
W3C CSS Validator
CSSのエラーチェックを、W3C CSS Validatorで行ってみました。
結果は以下のリンク。
