Pickupニュース

サイトのデザインをリニューアルしました。
コラム

サイトのデザインをリニューアルしました。

当サイト「Web技術指南書」のデザインをフルリニューアル致しました。

主な変更点

記事を1カラム構成に変更

これまでは変則的な3カラム構成でしたが、主記事を広く見て頂いたほうが良いと判断し、1カラム構成に変更しました。
また、記事の目次は画面右端にトグル形式で開閉出来るようにしました。

CodePenからの切り替え

本サイトでは、コードのプレビューデモのためにCodePenを埋め込んでいました。しかし、昨今サイトのSSL化が進み、CodePenに画像を読み込ませることが難しくなってきました。また、これまではDropboxの公開フォルダを個人的なCDNとして活用していたのですが、規約により非公開となりました。
Public フォルダ – Dropbox のヘルプ
そのため、プレビューデモは静的ページとして独自に作成し、これをiframeで読み込むように変更しました。
また、プレビューデモのコードはHTMLマークアップ、スタイルシート、JavaScriptに分けて静的ページのソースコードを読み込んでタブ形式で切り替えて表示出来るようにしました。

RSSニュースの表示

画面上部に、HTML、Webデザイン、WordPress等に関するピックアップニュースをRSS経由で引っ張って表示するようにしました。

プラグインの選別

WordPressには便利なプラグインが多々ありましたが、昨今は1つのプラグインで複数の機能を有しているものも増えて来ましたので、機能が重複するようなプラグインは使用を停止し、最小限に厳選しました。

主なプラグイン
JetPack:XML サイトマップの作成、人気記事の表示、関連記事の表示、共有アイコンの表示、SNSアカウントコメントフォーム
Yoast SEO:ページSEO、タイトル変更、パンくずリスト
WpBakery Page Builder:ページレイアウト
Max Mega Menu Pro:メニューデザイン・管理

最後に

本サイトデザインのテーマは有料プラグインWpBakery Page Builderを用いて、ヘッダーやフッターを自由に管理画面で作成出来るように設計しました。そのため、テーマ自体は基本的なレイアウトグリッドが指定されているだけで、記事やアーカイブ時の記事リストはすべて管理画面で作成しています。非常に便利になりましたが、設計している間にもまだ不足している機能が把握出来ましたので、もう少し改良を加えていきたいと考えています。

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.

記事ランキング