KITAMULABO

あたらしいホームページのデザイン2020

/ 20.01.21
コンピュータ

しばらく更新が滞ってしまうと何故かサイトデザインからいじりたくなってしまします。サイトのでデザインが良いと、情報が伝わりやすいというのもそうですが、何より自分が更新しやすくなり、記事が増えればまた人に見てもらえるという好循環になるのでは、という仮説のもと、前々から気になってたところとやってみたいデザインを盛り込んでみました。そのポイントを解説。

スマホの表示に完全対応(のハズ)

現在、ホームページが閲覧されるのって、画面が大きいデスクトップPCではなく、スマホでどこかのスキマ時間でってのが多いですよね。僕自身は仕事中は会社のパソコンに向かってるし、家でなにかするにもPCを立ち上げてるんで大画面で見ることが多く、また結構前からHTMLはいじっていたのでこの変化にピンときていませんでした。

スマホだと1カラム

CSSをコーディングするにあたり、前回の変更の際はスマホのような“横幅の解像度が狭い場合にこういうレイアウト”という記述をしていましたが、今回は“横幅の解像度が広い場合に2カラムに変更”としています。確かにこっちの方が記述がシンプルで済むのですが、なんかもう逆転というか時代ですね。パソコンのブラウザでもウィンドウ表示にして横幅を縮めると、レイアウトが変わるのを確認できると思います。

PCでは2カラム

Twitterを統合

このサイトはWordPressで構築していますが、今回サイドバーにTwitterのタイムラインを表示するウィジェットを追加しました。自己紹介とか、更新情報とか、イベント案内とかはこっちで一本化します。よく、記事を投稿するとSNSに自動で案内を乗っけるっという連携がありますが、そうではなく、直接埋め込まれてる感じです。ちなみにFACEBOOKもやってますが、FACEBOOKは登録している人じゃないと中身が見られないので、使い勝手が良くないです。

便利なはずが友達いないのがバレてしまう

トップページにギャラリーを設置

トップページ「Woks」というギャラリーを設置しています。自分がまず最初に見てほしいものを置くという趣旨ですね。ページへの案内もあってわかりやすいかと思います。技術的な話になると、WordPressのプラグインやウィジェットを探していましたが、なかなか丁度いいのが見つからず、固定ページを表示させています。ギャラリーはWordPress標準仕様のもので、表示だけLightboxのプラグインをかませています。多少が機能が足らないというところもありますが、見ている端末に合わせてレイアウトを自動調整してくれるすぐれものです。

投稿の一覧テーブルを調整

あまり他のサイトで見ないんですが、投稿リストをテーブルで表示しています。WordPressのプラグインで動的なテーブルを組んでくれるものがあるのでそちらを利用。今回は余計な欄を非表示にした上で、カテゴリー、タグでの絞り込みがしやすいように再設定しています。

その他

記事ページのコメント欄は、パソコンでの表示の際に右横に表示されるようにしました。かつ、スクロールするとついてきます。これCSSだけで結構簡単にできてしますんですね。面白い。

スパムコメントがやたらめったら多くきてたので、アンチスパムのプラグインを導入して撃退。そしたらホントのコメントも頂いてたようで、完全に埋もれてしまっていました。お返事遅くなってすみません。

最後に

今回の更新はこんな感じです。徐々に良くなっているような気がしますので、これからは記事の内容と数を充実させていこうと思います。

表示上の不具合等ありましたらできるだけ修正しますので、閲覧環境と共にコメントでお知らせいただくと助かります。

KITAMULABOコンピュータ / 20.01.21 /