サイトをリニューアルしたので追加機能とやり方の紹介をするよ!

最近仕事でプログラムを触るようになったので、ちょっとばかり培ったスキルを生かしてここ一週間ほど当サイトのリニューアルを進めていました。
前からやりたかったことがある程度実現できたので、だいぶスッキリしてます。
WordPressの啓発も絡めて、追加した機能や方法などをアウトプットします。(ほぼ備忘録的なものです)

記事を読むボタンのアニメーション

PCからの閲覧でないと確認ができないのですが、(スマホから読んでる方ごめんなさい…)
まずトップ画面やカテゴリ一覧画面に並んでいる記事の一覧にマウスを乗せると、該当の記事でアニメーションが動作するようにしました。
最初はボタンが現れる領域だけ確保しておいて、ボタンを非表示に。
マウスオーバーでボタンが「パタンッ」と出現し、マウスを離すと「フワッ」消える動きをします。

See the Pen oPPrYM by demo (@testuser9) on CodePen.0

「パタンッ」と出現して「パカッ」っと戻るだけなら簡単なのですが、「どうせなら違う動きさせたいよなぁ」と思って作り始めたら、意外と苦労したやつですね…
こういうアニメーションですが人によってはうざいと感じられることも多々あるので、せめてマウスを離した際は控えめな動作に変更したいなと考えた結果、今回のような機能追加に至った次第です。

コメント欄をモーダルウィンドウで表示

当サイトのみなさんから頂いたコメントの総数はすでに1000件を超えており、その中には非常に重要な情報がたくさん格納されています。
これらを奥にしまっておいては勿体無いと思っているので、すでにサイドバーはコメントの一覧がズラッと表示されるようなレイアウトにしてあります。

ただし現在の仕様ですと、各記事に該当するコメントがどれなのか解りづらくなってる状況ですし、記事本文の一番したまでスクロールしないとコメントの閲覧領域にたどり着けなかったのでちょっと不便な作りではありました。

この閲覧領域ですが、コメントのメッセージボックスを超えて、更に下までスクロールしなければならなかったので、特にスマホからだと読者さんの指を疲れさせてしまいますね…
そこで、今回の改修では記事下にベタ張りしていたコメント記入欄を撤去し、代わりにボタンクリック&タップの簡単な動作でコメント投稿用のモーダルウィンドウが現れるような機能を追加いたしました。

これによって記事一覧までの距離が短くなり、更に隣りに「コメントを読む」ボタンも設置することで該当記事のコメント閲覧を容易にしました。

ちなみにこちらの機能はBootstrapというフレームワークを導入すると簡単に設置することができ、今回のモーダルウィンドウに限らずおしゃれなデザインが気軽に適用できるので、(私のような)デザイン力が微弱な方でもそれっぽく作れる(というとデザイナーさんに怒られそう)のでおすすめです。

WordPressで使う場合は、子テーマなどからheaderファイルでBootstrapを読み込みましょう。なんかうまく動作しない場合はdeferなどを追記しましょう。

スマホからの記事一覧で「もっと見る」ボタン設置

改修前まではスマホ、PCからの閲覧問わず、記事一覧画面の下部にページ送りを設置しておりました。
これは特に小さいスマホからだとボタンが小さくてタップし辛いですね。前々から変えたいと思っていて手付かずでおりました…
この度の改修では、最近のGoogle検索のようにリンクの一覧下部に「もっと見る」ボタンを設置し、(非同期で)続く記事一覧を表示させるようにしました。
デザインはGoogleと全く同じですw

こちら、WordPressでは便利な「PBD AJAX Load Posts」というプラグインが用意されていて、導入すればあとはこちらでイベント処理の内容を自分の環境に合わせて書き換えるだけです。
WordPressはちょっと実装に苦労しそうなことでも既にプラグインが用意されているし、検索すれば情報もたくさん出てくるので得ですね。

更新日時があれば更新日時を表示、更新日時がなければ投稿日時を表示

このサイトを作成したのは2015年の初頭のことで、既に多くの記事が古くなってきてしまっています。

せっかく書いたものが勿体無いので、ものによっては大胆にリライトして今読んでも違和感がないようメンテしてますが、それらの記事が「これは2年前に書きました」みたいに表示されているのはちょっとなぁと思っていたので、今回直しました。

上記小見出しの通りですが、更新日時があれば、投稿日時ではなく更新日時を優先して表示するので、「実は最初作った時は古かったんだよね」というのがバレにくくなりましたw

メニューバーの表示を動的に切り替える

このサイトでは投稿記事のジャンルがまちまちだったりするので、読者さんはそれぞれ違った目的で訪れてこられたりします。
その際関連記事も併せて読んでもらいたいのでページ上部のメニュー領域の表示を全て共通化しておくのは勿体無いよなぁと考え、動的に表示を変化させるようにしました。

(執筆時点の)新しい記事をクリックするとメニューバーの内容が変化するかと思います。
ただしこれに関しては機能面さえ完成しているものの、条件、結果の追加作業がまだ終わってないので今後ぼちぼちやっていきたいと思います。

その他こまごまとしたデザイン改修

その他に「なんかヘボいな。おかしいな」と思った部分のデザインを少しいじりました。

デザインは難しいなぁ。
まだまだデザインは改修しきれていない箇所も多々あるので、時間見つけてちょっとずつ修正していきたいと思います。(機能面も)

#Follow me!

SPONSORED LINK

この記事へのコメントはまだありません。