ブログデザインをリニューアルしました(2014年7月)

これまでちょくちょく見た目をいじってきた当ブログですが、19日にワードプレスのテーマ(テンプレート)ごと変更する全面的なリニューアルを行いました。せっかくなので、今回はその主な変更点について書きたいと思います。

スポンサーリンク

はじめに

そもそもなぜリニューアルをしたかというと、前のデザインがしっくりきていなかったという個人的な感情によるものが大きいです。色々と手を加えて見た目を整えようとしていたのですが、むしろダサくなっていくような迷走感がありました。

そこで「ワードプレスのテーマ自体を変えるのもアリかな」とThemeForestを見ていたところ、なかなか好みのテンプレートを発見。有料ではありますが、素人の自分が大幅なデザイン変更にかける労力を考えれば安いものです。

日本語での表示は考慮されていないテーマのため、インストールして有効化すれば即OKというわけにはいかず、文字サイズや行間など様々な点をCSSで修正したり、PHPファイルを書き換えたりしました。

そんなこんなで一段落した今回のリニューアル。前置きが長くなってしまいましたが、これまで採用していたデザインとの変更点などを説明していきたいと思います。ちょっと長くなりますが、良かったらお付き合いください。

リニューアル前後

まず、こちらがリニューアル前のブログです。

リニューアル前のブログ画面

そして、こちらがリニューアル後のブログです。

リニューアル後のブログ画面

どちらも右にサイドバーを置いた2カラムのデザインを採用しているため、全く異なったデザインになったというわけではありません。記事ページの構成も「タイトルやアイキャッチ画像・記事本文・SNSボタン・関連記事・コメント欄」とリニューアル前後で変わっていません。レスポンシブデザインであることも共通しています。

では、どこが変わったのか?

新しく追加した要素、既存の要素に手を加えたもの、それらとは逆にリニューアルで削除したもの等をここから説明したいと思います。

全く新しいもの

1. Ajaxで記事を追加読み込み

2014.08.01追記
Ajaxによる記事追加読み込みはしないことにしました。

当ブログでは最初に6件の記事を表示しているのですが、「Older Posts」というボタンを押すことで次の6件がページ移動することなく読み込まれるようになっています。

このボタンを押すと、記事が存在する限り最大6件ずつ読み込まれていきます。ボタンを押しても記事が存在しない場合には、次のような表示に変わります。

トップページやカテゴリページ等に限られてはいますが、ページ遷移をしないため表示時間の大幅な短縮に繋がり、ストレスをあまり感じることなく記事を探せるのではないかと思います。

なお、このページ送り(Pagination)は使用しているワードプレステーマのオプションから設定出来ました。こういった機能が1クリックで実装出来るあたり、さすが有料テーマだなと感じます。

ちなみに、このページ送りは次のプラグインを基にしているようなので、興味のある方はチェックしてみてはいかがでしょうか。

2. コンタクトフォーム設置

前々から作ろうと思っていたコンタクトフォーム(お問い合わせフォーム)をリニューアルに際して設置しました。ヘッダーメニューの「Contact Me」がそのページです。

当ブログに対しての疑問・質問や感想等があれば、コンタクトフォームからお願いします。

なお、このコンタクトフォームは”Contact Form 7″という有名なプラグインで作成されています。

3. Loveボタン設置

記事本文下にあるコレ(↑)の一番左です。

数多くのウェブサイトでFacebookのいいね!ボタンを見かけますが、それと同じ感覚で「この記事役に立った!」などと思ったときに押していただければと思います。いいね!ボタンのように友人に拡散する機能はないので、気軽にポチッとしてもらえると嬉しいです。

ちなみに、このボタンは購入したテーマに最初から実装されており、独自のJSで動いているようなので仕組みは理解出来ていません(汗)

そのため、「自分のブログにも導入したいけどどうすれば?」というご質問にはお答え出来ませんので、あらかじめご了承くださいm(_ _)m

手を加えたもの

1. Pocketに保存するためのリンク

これの真ん中にあるのがPocketボタンです。

リニューアル前は記事タイトル下にテキスト形式でPocketに保存するリンクを張っていたのですが、Loveボタンや次に紹介するShareボタンと同じ形式のものを自分で作成しました。

Pocketにログインしている状態であれば、クリックするだけで記事が保存されます。

なお、記述は次のような感じになっています。

<a href=”http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?> – <?php bloginfo(‘name’); ?>” onclick=”window.open(this.href, ‘FBwindow’, ‘width=550, height=350, menubar=no, toolbar=no, scrollbars=yes’); return false;” data-tooltip=”Pocketに保存して後で読む” title=”Pocketに保存して後で読む”>Pocket<i class=”fa fa-chevron-down”></i></a>

Font Awesomeのアイコンを使用し、枠線や色・余白をCSSで調整しているのですが、コードそのものはCreator Clipさんの記事を参考にさせていただきました。

2. 各種SNSボタン

これの一番右にあるのがShareボタンで、押すと次のような画面が表示されます。

4つボタンがありますが、左から「Facebookのシェアボタン」「Twitterのツイートボタン」「はてなブックマークボタン」「Google+の共有ボタン」となっています。

それぞれのボタンをクリックすることで別ウインドウが開き、シェアやツイートが可能となるので良かったら利用してください。

このShareボタンも先に紹介したLoveボタンと同じく独自のJSで動いているようで、これまた詳しい仕組みは理解できていません(汗)

そうそう、はてなブックマークボタンは自分で作成したのですが、ひとつ問題がありました。それぞれのボタンはFont Awesomeのフォントアイコンを利用しているのですが、はてなブックマークのアイコンはFont Awesomeに存在しないのです。

そこで参考になったのがホホ冢次男さんのこちらの記事です。

似ている欧文フォントで代用するという発想は目から鱗でした。

削除したもの

1. 追従するトップへ戻るボタン

リニューアル前は”Back To Top”というプラグインを使い、追従するトップへ戻るボタンを表示していました。(参考:WordPressで”トップへ戻る”ボタンを設置できるプラグイン”Back To Top”)

しかし、当ブログにおいてヘッダーが大きな役割を担っているとは思えなかった(訪問者が頻繁にヘッダーのリンクをクリックすることがないため)ので、ボタンを追従させる必要はないと判断し、プラグインも無効化させました。

とはいえ、トップへ戻るボタンがページに存在しないというのも不便だと思われるので、フッターにボタンを置くことにしました。ちなみに、ボタンはテーマに用意されていたものを使用しています。

2. “Unveil Lazy Load”と”Head Cleaner”

2014.08.01追記
Ajaxによる記事追加読み込みをしないことにした上でゴニョゴニョした結果、表示の崩れが改善されたため再び有効化しました。

これら2つのプラグインは、不本意ながら外すことになりました。

それぞれブログ表示の高速化に役立つプラグインですが(参考:プラグインを5つ導入したらWordPressの表示が大幅に高速化しました!)、テーマとの相性が悪いのか表示が崩れてしまいました。

”Head Cleaner”に関しては、プラグインの設定を色々といじってみたのですが、ある箇所が直ればまた別の箇所が崩れるという事態に陥り、結局ブログを問題なく表示させることが出来ませんでした。

幸いだったのは、記事ページにおいてはヘッダーのJSをある程度フッターに自動で移す設定になっているようで、表示速度に大きな問題が出なかったという点です。

トップページではそのような働きが無く、PageSpeed Insightsのスコアも悪くなっているのですが、一番最初に紹介したAjaxによる追加読み込みを導入することでカバーしています。

おわりに

ここまで長々と書いてしまいましたが、以上が今回のリニューアルの主な変更点です。

テーマごと変えるのはすごく久しぶりの作業で大変だった点もありますが、自分好みな感じにすることが出来て良かったです。愛着もこれまで以上に湧きました。

トップページの記事一覧をリニューアル前のような感じにしたい、などと手を加えたいところはまだありますが、とりあえず公開出来たので、報告も兼ねてこの記事を書かせていただきました。

それでは、最後までお付き合いいただきありがとうございました。
これからもJimeishiをよろしくお願いします。

ブログデザインをリニューアルしました(2014年7月)

プロフィール画像
エヌジマ

俗に言うアラサーの男です。過去には学校などの特定の場面で話せなくなる場面緘黙(かんもく)を経験。自分の日常や「紹介したい!」と思ったモノ・コトを中心にいろいろ書いています。詳細は当ブログについてをご覧ください。

ブログ運営
3

SHARE & FOLLOW