[contact-form-7 id="1781" title="ご意見・ご要望・お問い合せ"]

Columns

WebScripter.jpのデザインをリニュアルしました！

2016.11.07

WebScripter.jpのデザインをリニュアルしました！随分更新が滞っていたのですが、それなりにアクセスのある記事もいくつかあるのでこのままではいけないと思い、手始めにデザインを見直し、シンプル、見やすい、使いやすいを心がけてリニューアルしました。今回はリニューアルのポイントをいくつか挙げていきたいと思います。

  1. 構成について
    1. 各ブロックの役割を明確に
    2. 各要素を整理
  2. デザインについて
    1. H1を大きく表示
    2. サイドバーに目次を表示
    3. コードのハイライトをhighlight.jsに変更
  3. WordPressプラグインについて
    1. 引き続き使用するプラグイン
    2. 今回追加したプラグイン
    3. 削除を検討したが残したプラグイン
    4. 今回使用を停止・削除したプラグイン

構成について

各ブロックの役割を明確に

大まかな構成はブログサイトなので基本的に変わりませんが、まず、ヘッダーやフッターなど各ブロックの役割を明確にしました。以前は広告と記事関連の情報をサイドバーに混在させていましたが、リニューアルに伴い広告はサイドバー、記事関連はフッターに集約しました。

各要素を整理

アーカイブはほぼアクセスが無い、記事のトラックバックURLは今さらなので外しました。Twitterもヘッダーにリンクのみ残し、タイムラインは外しました。Twitterもこのサイトと同じく放置状態 (^_^;) なので、これを機にもう少し活用したいと思ってます。

サイドバーは広告のみにし、リニュアル前サイドバーに配置していた最新記事一覧、人気記事一覧はフッターに配置しました。タグクラウドはどうするか悩みましたが、とりあえずフッターに残すことにしました。他に必要なコンテンツが出てきたら外すかもしれません。

デザインについて

全体的には、色は白をベースにグレーの濃淡のみでスッキリとさせました。見出しの文字も大きめに、各要素の余白（マージン）も広めに取り、可読性も上がったと思います。またパーツなどを整理し、必要のない要素は削除しました。

H1を大きく表示

H1にあたる記事のタイトルはページのトップにどんと配置しました。これはONZEやNxWorld、Web Design Recipesの記事のタイトルの配置が気に入っていて前からやりたかったレイアウトです。今回参考にさせていただきました。

サイドバーに目次を表示

スクロールすると記事内の目次がサイドバーに表示されるようにしました。ボリュームの多い記事には便利だと思います。欲を言えばqiitaの記事の目次のように現在位置がわかるようにしたいんですが、そのうち実装したいです。

コードのハイライトをhighlight.jsに変更

コードのハイライトはWordpressプラグインwp-syntaxを使用していましたが、highlight.jsはjavascriptで動作し、使った感じも軽いのでこちらに変更しました。ハイライトのカラーリングもあらかじめ用意されたCSSを適用するだけ、また種類が豊富なので今のところ色々と試しています。CSSをカスタマイズすればオリジナルのkラーリングもできると思います。それから前回に引き続きコード内のブロックをクリックすることでソースを全選択できます。加えてコピーもそのうち実装するつもりです。

WordPressプラグインについて

WordPressプラグインも、過去記事に影響の出るものは除き、必要の無いもの、functions.phpなど、他の方法で対応した機能に変更したものは削除しました。また追加したプラグインもあります。

引き続き使用するプラグイン

Akismit おなじみのスパム防止プラグイン。
ContactForm7 こちらもおなじみ、有名なメールフォームプラグインです。
Really Simple CAPTCHA ContactForm7のメールスパム防止のためのプラグイン。
WP Emmet html、CSSの入力支援。投稿画面での記事執筆が便利になります。更新が止まっているのが気になりますが。
WP-Pagenavi ページナビゲーションのプラグイン。
PHP Text Widget テキストウィジェットでのPHPの実行を可能にします。
BackWPup wordpressの強力、多機能なバックアップソフト。
Revision Control 投稿画面のリビジョンの数を制限するプラグイン。
Theme Test Drive 開発中のテーマを公開中のサイトでテストできる便利なプラグイン。

今回追加したプラグイン

Enable Media Replace 通常、画像などのメディアは上書きできませんが、それを可能にするプラグイン。地味に便利です。
WP-PostViews 記事やページのページビューをカウントしてくれるプラグイン。今回のリニューアルで、このプラグインのカウントをもとに人気記事を表示するようにしました。
sitegurd Plugin WordPressで構築されたサイトのセキュリティを高めるプラグイン。
AmazonJS Amazon取り扱い商品の挿入を簡単にできるプラグイン。前まで使用していた同じ機能を持つ「wp-tmkm-amazon」は更新がなく古くなり、ソースにエラーが多いためこちらに変更しました。

削除を検討したが残したプラグイン

add css js 個別の記事やページに個別のjavascriptやCSSをカスタムフィールドを利用して記述・適用するプラグイン。現在配布先のページが無いのですが、使用しているページもあるため、次の措置を取るまでは残します。
Browser Shots わざわざキャプチャを取らなくても自動的に外部サイトのサムネイルを表示してくれるプラグイン。こちらも影響があるためと、また使う機会がありそうなのでとりあえず残しました。

今回使用を停止・削除したプラグイン

Tweetable Twitterのタイムラインを表示出来るプラグイン。Twitterのタイムライン表示をやめたので必要なくなりました。
WP-Syntax コードのハイライト表示するプラグイン。Highlight.jsに変更したため、必要なくなりました。
TinyMCE-Advanced ビジュアルエディタのボタンを拡張するプラグイン。wordpressの記事内の自動整形を無効にするために使用していましたが、functions.phpに解決出来るコードを直接記述したので必要なくなりました。
Redirection URLのリダイレクトを設定するプラグイン。前回のリニューアル時に記事のURLを変更したため、リダイレクトに使用していましたがそろそろ大丈夫だと思うのでとりあえず停止しました。
top-level-cats-fix カテゴリーページのURLに表示されるcategoryの文字を非表示にするプラグイン。過去にこちらの記事でも紹介しましたが、WP-Pagenaviのページネーションの不具合の解消に使用していました。pre_get_postsを使うようになり、問題なくなりました。
popular-posts-plugin 人気記事を表示するプラグイン。WP-Postviewsに切り替えました。
similar-posts 関連記事を表示するプラグイン。タグやカテゴリーから取得するコードを記述したので必要なくなりました。
post-plugin-library 上記二つのプラグインを使用するのに必要なプラグイン。２つのプラグインを削除するため必要なくなりました。
wp-tmkm-amazon Amazonの商品を簡単に登録、設置出来るプラグイン。プラグインが古く、リニューアル時にエラーが多かったので、AmazonJSに切り替えました。あとで知りましたが、後継でWP Hamazonがあります。

以上、リニューアルのポイントでしたが、今回のリニューアルで随分見やすくなったと思いますが、いかがでしょうか？これを機になるべくコンスタントに役に立つ記事をお送りできればと思っています。今後ともよろしくお願いします。

RERATION POSTS