Arcanyは一周年を迎えました

このたび4月29日を持ちまして、本ウェブサイト「Arcany」は1周年を迎えました。

紫の小さな花

E-M5MarkII (40mm, f/2.8, 1/640 sec, ISO200)
最初に投稿した写真

最初は失業を機にWeb制作の仕事を再び始めてみようという気になり、勉強をして知識を底上げし、最近のトレンドである「WordPress」を活用したサイトを制作することによって技術力をアピールするのが狙いでした。
WordPressやCSSに関する本を読みあさり、本の通りに作業して練習し、自分のサイトを構築するために試行錯誤、四苦八苦しておりました。

初めのデザインは、10年前の個人サイトのようで、見た印象として古くさいものでした。

旧Arcany

旧Arcany

ちょっと色を使いすぎている上、フラットデザインがトレンドであるにもかかわらず、凹凸を感じさせるボタンのデザインを採用したことが原因でした。

そして就職活動先の会社でも指摘があり、デザインを変更してリニューアルしたのが、前バージョン(2.0)です。
スクリーンショット 2015-06-21 1.25.59
モバイルフレンドリーになり、ロゴの水色とオレンジを基調としたデザインに一新しました。

しかし、今年の3月下旬頃からブログなどの見出しのデザインに一貫性がなかったのを修正し、Ver.2.1となりました。
デザインを改めました

一周年記念事業

このたび、「Arcany」が一周年を迎えるにあたり、テンプレートを再構築しました。

Bootstrapを導入し、メニューバー周りのデザインを改めることにしました。スマートフォン用に表示される右上のタブメニュー「ちびメニュー」を廃止し、タブをスクロールして「プロフィール」や「お問い合わせ」にアクセスする仕組みに変更します。

Arcanyテンプレート3.0リニューアル詳細

Bootstrapによる、よりモバイルフレンドリーなサイト構造

画面の横幅により、4パターンのレイアウトを出し分けることができます。

スクリーンショットxs
スクリーンショットsm
スクリーンショットmd
スクリーンショットlg

ナビゲーションバーをスクロール可能に

スクロール可能なナビゲーションバー
画面の横幅が狭くなると、ナビゲーションバーがスクロールするようになります。

トップページのカルーセルをBootstrapのモジュールを改造したものに変更

比率の異なる画像で作るカルーセル
Bootstrapのカルーセルは、左右の比率が同じ画像でないとうまく作動しません。jQueryを用いて画像の高さ・幅を調整し、カルーセルの中央に来るよう調整しています。

HTML5に変更

BootstrapはHTML5ベースのため、XHTMLからHTML5に変更しています。しかしWordpressが吐き出すのはXHTMLという…設定を変更することはできるのでしょうか。

お問い合わせフォーム送信プログラムをCGIから自作PHPに変更

お問い合わせフォーム
通常のお問い合わせの他、「選考結果のお知らせ(お祈りメール)」も簡単に送れます。

お問い合わせフォームは、既製のCGIを使っていました。通常の問い合わせ用のCGI、選考結果のお知らせ用と2つのCGIを配置していたので、スマートではありませんでした。それをPHPベースに変更し、メールの内容を細かくコントロールすることができました。

自分が閲覧した記録をGoogle Analiticsに記録させないようにする

googleアナリティクス
前バージョンのGoogle Analiticsは、自分でヘッダのphpにトラッキングコードを書き込んでいました。そのため、自分のアクセスであっても記録されてしまい、正しいページビューを得られませんでした。

「Google Analytics Dashboard for WP」を導入し、設定で管理者のアクセスの場合はトラッキングコードを出力しないことができるため、管理者としてログインしている状態ではアクセスログが記録されなくなります。

コメントを投稿すると、投稿者と親コメント作成者にメールを自動送信するNew

自動送信メール
これはプラグインを用いず、自分でPHPコードを書いて実装させました。アクションフックとPHPのmb_send_mailを組み合わせて実現しました。

また、コメント投稿者と、その親のコメントを投稿した人にもメールが送られます。これにより、コメントに対する返信にすぐ気づけるようになります。

これでコメントが投稿されたことに1週間気づかない、なんてことがなくなるはずです。

カテゴリータブにカーソルを合わせると、カテゴリーの説明が表示される

ツールチップによる注釈
これもBootstrapに備わっている「ツールチップ」というモジュールです。

タブにマウスカーソルを合わせると、吹き出しが表示され、カテゴリーの説明が表示されます。

おわりに

今年の大型連休は、このプロジェクトにかかりきりでした。
大きく生まれ変わったArcanyを、今後ともよろしくお願いします。


コメント

送信フォーム

入力エリアすべてが必須項目です。

内容をご確認の上、送信してください。

※メールアドレスは公開されません