Menu

【開設5周年】ブログをリニューアルしました

サイト開設5周年にあたり、ブログをリニューアル致しました(パソコン版・スマホ版)。
見た目はあまり変わらなかった前回のリニューアル作業とは異なり、今回はブログの表示そのものを大幅に変更する大規模改装となりました。

主なアップデート内容は以下の通りです

  1. トップページやカテゴリ検索画面で、記事をボックス表示化(検索性の向上)
  2. サイドバーに廃墟検索メニューを設置(都道府県別/廃墟種類別)
  3. 関連記事にサムネイル画像を表示
  4. レスポンシブWebデザインの導入

以下に順を追って詳細を説明します。

1. 記事をボックス表示化(検索性の向上)

1-記事のボックス化

今回のリニューアルの主目的がこれです。
長期間の運営に伴い物件数が増えてきましたが、いざ目的の廃墟を探そうとすると、これまではどの画面でも記事を全文表示していたために検索性が良いとは言えませんでした。

記事の続きを読む(クリックで開く)

それで一時はこいつ(↑)で記事を省略表示するという形で対応していましたが、このところ対応しきれなくなってきており今回ついに抜本的な表示の変更に至りました。

新表示では検索結果が記事毎にボックスで表示されます。これで気になる記事を見つけるのが遥かに容易になりました。

2. サイドバーに廃墟検索メニューを設置

2-廃墟検索メニューの設置

検索結果を見やすくしたのと併せて、検索機能の強化も行いました。サイドバーのアクセスしやすい位置に2種類の検索メニューを設置しています。

2-プルダウンメニュー

上部プルダウンメニューにも都道府県別の検索機能がありますが、モニタサイズによっては上部メニューそのものが表示されない仕様となっています。

また、上部プルダウンメニューでは不可能な都道府県名を検索語として選択する事がサイドバーのメニューでは可能です。

フリーワードでの検索機能も引き続きサイドバーに設置してあります。

3. 関連記事にサムネイル画像を表示

3-関連記事にサムネイル画像を表示

前回アップデートより個別記事の最下段に関連記事の一覧を表示していましたが、記事のサムネイル画像も同時に表示することによって内容がより直感的に分かりやすくなりました。

関連記事_旧表示

これが今までの表示です。サムネイル表示化によって遥かに分かりやすくなったのがわかります。

4. レスポンシブWebデザインの導入

これはどういう事かというと、「ブログを表示する領域のサイズよってブログの見た目が異なる」という事です。「1. 記事をボックス表示化」で例示した新画面は記事が3列に並んでいましたが、機器の画面サイズによってはそれが2列だったり1列だったりします。

4-レスポンシブWebデザインの導入

スマートフォンサイズほど小さいとサイドバーすら表示されなくなりますが、スマートフォンの場合は左下に「Menu」が現れるので、そこをタップすればサイドバーが現れます。

なお、レスポンシブデザインの弊害として、検索画面が2~3列表示の時に一覧の行間が広すぎたり狭すぎたりする問題が環境によっては発生しますが、これは仕様なので諦めて下さい。CSSで何とかマシになるように努力はしましたが、根本的には恐らくJAVAの問題なので……。解決できなくはないのですが、そうすると今度は一覧の表示順序が荒ぶるので、現状それとのトレードオフなのです。ご迷惑をおかけして申し訳ありません。

主なアップデート内容は以上となります。
他にはパンくずリストやメタ領域に関するバグフィックスなどを行なっています。
記事の新しい書式を実装したのも実は記事のボックス化と並ぶ程の改装目的なのですが、それについてはここで解説するのではなく、後日廃墟記事の実物をお見せするという形で披露させて頂こうかと思います。

今後とも廃墟写真ブログ"Ruin's Cat"を、どうぞよろしくお願い致します m(_ _)m