[Å] 【お知らせ】WPTouchをカスタマイズしてスマホ用のブログデザインを変更しました
こんにちは、あかめ(@mk_mizuho)です❦ スマホからブログを見てくださっている方々が当ブログ全体の50%。前から思っていたことが1つ。過去のブログ記事が埋もれている。読者さまからするとどこに何の記事があるのかわからないのでは?そう思い、過去記事も読み漁れるようにしたのでブログの使い方を紹介。
カスタマイズするにあたって
ポイント
- 当ブログはロゴがないので自分のアイコンをロゴ代わりに使用
- 初めての人にブログの全体像を伝えるようなデザイン
- 埋もれたブログ記事を自分で探す楽しみや使いやすさを提供
カスタマイズ前のデザイン
デフォルトのWPTouchの状態から少しカスタマイズを加えているがほぼテンプレートと同じ状態。
タイトルバーの色が明らかにおかしいのは今回の修正が終わってから写真撮り忘れたことに気づき、慌てて戻したためです。とまぁこれがトップページでした。
カスタマイズ後のデザイン
記事の抜粋やカテゴリーの表示を消し、なるべくコンパクトにした。周りの枠も排除してスペースを広く取り、1ページでタイトル約3つ表示。特別多いわけでもないが、はてブ数も表示させた。
MENU
メニューをタップすると左から項目が出てくる。
メニューを上にスクロールするとさらに項目が表示される。
メニューを閉じる時は再度メニューバーのMENUをタップ。
若干思うような挙動になっていないのでこのあたりは後日修正。
参照
サイトマップ
通常のサイトマップとは異なるかもしれないが、ブログに一体何が書いてあるかのかを示したページ。「カテゴリー別」で一覧表示してます。大量に読み込むためにサムネイルなどはなしで読み込みをなるべく早くした。当ブログに何が書いてあるのか知りたい人はどうぞ。
本日のアクセスランキングBEST30
アクセスの高い記事をランキング30位まで紹介。自動更新で内容が変わるので日によって表示されている記事が異なる。とは言え、ここ最近上位3つぐらいは変動がないのでそれ以下とか見た方が良いかもしれない。
参照:【カスタマイズ】月間とデイリー、2つの人気記事ランキングを設置する : りくまろぐ
当ブログは上記サイトの内容をカスタマイズして固定ページで作成。りくちゃん(@Rikuma_)本当にありがとうございます。まだまだカスマイズせねばならぬところはありますが、とりあえずこれで。
ランダムピックアップ30
アクセスランキングとは異なり、今まで書いた記事を無作為に30個紹介。リロード(更新)するたびに内容が変わる仕組みなのでページを訪れるたびに新たな記事との出会いがあるかも?
参照:【カスタマイズ】サイドバーに「ランダム記事一覧」を追加してみる : りくまろぐ
こちらもアクセスランキングの時と同じでりくちゃんの記事をカスタマイズして固定ページで作成。
メニューバーの固定
スマホでやるのはどうなのか…っとちょっと疑問には思っておりますが、メニューバーをスクロール後に上に固定されるようにしてみた。
iPhone4Sなど画面が小さいデバイスで見るときとかは邪魔かもしれないが、メニューをいつでも押せるということを今回は重要視。ちなみに若干挙動がおかしいときあります。
暫く使ってこれ微妙って思ったらやめますので深くカスタマイズする気はないです。ごめんなさい。
RSS登録
いつでも最新の情報が得られる便利なツール。あーるえすえす。
詳しくは過去記事ご覧ください。
RSSって何?RSS始めたいけどやり方がわからない人にRSSの便利さを伝えたくて書いたよ | あかめ女子のWebメモ
さいごに
という具合に色々と項目やページを新規で追加してみました。これで少しはブログに何が書いてあるのかわかりやすくなったかな。初めてブログに遊びに来てくれた人が理解しやすいブログになっていれば良いのだけど。ブログ全体像を伝えるのは難しい。色々と入り口を作ったので最近私のブログを知った人は記事あさってみてください。もしかしたら良い記事が眠ってるかも?ではではーあかめ(@mk_mizuho)をよろしくお願いします。
PS:
無計画ぶっつけ本番でガシャガシャと弄ったため、挙動がおかしな部分が多々あると思います。クレームは受け付けませんが、アドバスは受け付け中です。お助けしてくれる方お待ちしております。
その他お世話になった記事
- 私がWPtouchのトップページ画面をカスタマイズするために行った5つのこと
- WPtouchをカスタマイズしてブログをオリジナルデザインでスマフォ対応させたよ!(カスタマイズ編) | クリエイティブメモメモ
大変わかりやすい記事ありがとうございました。
\ この情報を周りの人にも教える /
[Å] 【お知らせ】WPTouchをカスタマイズしてスマホ用のブログデザインを変更しました
この記事が気に入った方はいいね!で
更新情報を受け取る!