注目キーワード
  1. 育児
  2. 投資
  3. デザイン
  4. ブログ

【wordpressカスタマイズ】THE THORで読みやすいおしゃれなサイトにカスタマイズさせる実践記録

みつぼし
おしゃれなブログ構築を目指してwordpressの有料テーマ「THE THOR」を導入してみた!けどただテーマを適用しただけだとやっぱりイマイチ…一から好みのブログにカスタマイズするか…
という事で、この記事はWordPressの有料テーマである「THE THOR」のテーマを実際にカスタマイズしてみた実践記録編です。
「THE THOR」というテーマは有料テーマであるだけに、非常に高いデザインブログが作れるwordpressテーマではあるのですが、マニュアルが文字中心(画像での解説が少ない)のため、wordpress初心者の方にはちょっとカスタマイズのハードルは高いなと感じたのと、
個人的に思っている「読みやすいブログデザイン」とは何かを素人目線ながら実践していったメモ書き記事になります。
有料テーマを導入してカスタマイズに苦労している方のヒントになればと思っています。

THE THORテーマを適用した直後のデザイン

THE THORテーマを適用した直後のデザイン
THE THORのテーマは、メインテーマと子テーマの二つをダウンロードし、子テーマを反映させることで適用できます。
早速ダウンロードしたテーマを反映した直後のブログのビジュアルがこちら。
すっきり纏まっているように見えますが、やはりデザインがテンプレートっぽいのでここから色々と手を加えていきます。

THE THORのテーマカスタマイズで垢抜けサイトになるポイント

デザイン性が高く・読みやすいブログサイトになるためテーマにデザインを加えていくのですが、やはり大事なのは完成形をイメージしながら手を加えていくことです。

ブログサイトが垢抜けるデザインのポイント

デザインが優秀だと感じるのはポイントがあると思っておりまして、そのポイントはずばり3つ。

  1. テーマカラーがきっちり決まっている
  2. 無駄な装飾の無いシンプルさ
  3. 結局、余白。

以上の3点だと思っています。

たまーに記事部分の背景に模様とかの背景画像を置く方いらっしゃいますが、よっぽどセンスが無いと柄物の背景はサイト自体をダサくしてしまう恐れがありますのでグレーで抑えめにしておくことをお勧めします。

という事で、サイトの完成形のイメージを保ちながら早速カスタマイズしていきます。

THE THORカスタマイズ①デモサイトデザインを適用

まずはデフォルトの子テーマを、THE THORが提供するデモサイトのデザインを適用していきます。

THE THORカスタマイズ①

公式サイトに行くとデモサイトのデザインを配っていますので、私はその中の2番目のこのデザインをチョイスしています。

このデザインをチョイスする理由は、「理想のアイキャッチ付きの記事一覧が作れるから」です。他のデザインでも良いんですが、2番目のデザインが一番自分が目指したいサイトデザインに合致してたのでこちらを採用しました。

このデザインを適用するには、以下の方法で行います。

手順1:THE THORが指定する専用プラグイン「Customizer Export/Import」を有効化する。
手順2:ダウンロードしたファイルを解凍する。
手順3:「外観」→「カスタマイズ」→「エクスポート / インポート」へ進み「ファイルを選択」でデザインをインポートする

THE THORカスタマイズ②メイン部分を2カラム設定に変更し、サイドバーを表示。

デモサイトを反映した直後だと、トップページが1カラムとなり、サイドバーの表示が見えないので2カラム設定にします。

「外観」→「カスタマイズ」→「アーカイブ設定ページ」→「レイアウト設定」→カラムを2カラムに。
ついでに、TOPのメインに大きな画像が配置されちゃってるのでとりあえず取っておきます。
サイトが育っていずれもっと訴えたいキャッチコピーなんかが出てきた際には利用したいです。
「外観」→「カスタマイズ」→「TOPページ設定」→「メインビジュアル設定」→表示になっているのを非表示に。

THE THORカスタマイズ③記事部分とサイドバー部分を目立たせる

デフォルトのデザインだと記事部分とサイドバーが背景色#f2f2f2と同系色で目立たないので白抜きして目立たせたいと思います。

「外観」→「カスタマイズ」→「共通エリア設定」→「メインカラムエリア設定」→メインカラムフレームを選択部分をシャドウフレームに変更。
同じく「サイドカラムエリア設定」→サイドカラムフレーム設定=無し(default)
各ウィジェットフレーム設定=シャドウフレーム
ウィジェット見出しデザイン設定=シンプル(ワイド)
どうでしょうか。サイドバーを整理するだけでぐっとシンプルに見やすくなったと思います。

サイドバーのカテゴリのデザインをCSSで変更

THE THORのテーマではカテゴリのデザインがイマイチなので手を加えます。

CSSでデザインを変更するやり方を書いてくれているブログがあったのでこちらを参考にしながら作業。
私は【シンプル】を選んでいます。

色を整える

さて、ここまでサイトの外枠が整ってきたのでサイトの印象を決定づける色味を整えていこうと思います。

今回手を加えているサイトが「旅行」をテーマにしているので、リゾートっぽい色を選びたいと思います。

じゃん!どうでしょうか。サイトカラーはピンクをメインカラーに配置し、鮮やかなグリーンと落ち着きのあるブルーを補助カラーとして3色チョイス。

サイトの目立つヘッダー部分の背景をピンクにし、サイトメインカラーを黄緑、そしてサイドバナーの背景色をブルーに設定しました。

これで結構サイトの印象が固定化されたかと思います。

最後に

とりあえず、カスタマイズはこんな感じでいったん終了。

サイトの記事作成にしばらく注力しようと思います。

ここまで読んできてどうだったでしょうか?

デザイン性の高いサイト作成のポイントは、結局①にコンセプト、②に統一感だと思っています。

題材にしたサイトは統一感に少し欠ける部分があるので、参考になる題材ではないかもしれませんが、サイト作成のヒントになれば幸いです。