【ha-Basic】テーマを使ったサイト例 その２
公開日：
サイト制作例
【この記事の目次】－ 必要な部分だけ見たいときにどうぞ － [表示する]
今見ていただいているサイトはなるべく余分なものを追加せずに【ha-Basic】テーマのデフォルトに近い形にしておきたいので、私が管理している別のサイトで、【ha-Basic】を使ったサイト例を紹介します。
もともと【ha-Basic】は余分なものをそぎ落としたシンプルテーマですが、ちょっと手を加えるとまったく違ったイメージのサイトができます。
この記事の仕様を用いたサイトは
※リンク先サイトの状態は2019年6月17日現在のものですので、ご覧いただいた時には変更している可能性があります
サイトで使用しているプラグイン
特別なコンテンツに使用しているプラグインのみ紹介します。
「Content Cards」
内部・外部リンクをカード表示するために使用しています。このプラグインを使ったカードのデザインはあらかじめ【ha-Basic】テーマに設定してありますので、URLをショートコードで囲むだけでカード表示できるようになります。
Q2W3 Fixed Widget
サイドバーの一番下にある人気記事ウィジェットを追従表示（スクロールしてもずっと表示されるウィジェット）させるために使っています。
ひまあーとのWordpressサイト制作工房
Wordpressのテーマ【ha-Basic】の配布、テーマカスタマイズの方法のご紹介など
Unlimited Background Slider
トップページ以外の背景スライダーに使用しています。
【ha-Basic】テーマのカスタマイズ内容
【ha-Basic】テーマのカスタマイズ記事で紹介している方法をいろいろ使ってサイトのデザインやコンテンツをカスタマイズしています。各内容はリンク先ページをご覧ください。
全体の配色は
ひまあーとのWordpressサイト制作工房
Wordpressのテーマ【ha-Basic】の配布、テーマカスタマイズの方法のご紹介など
本文とサイドバー、サイトタイトルを若干透過にして背景のスライダー画像が何となく背景に表示されるようにしています。
トップページ上のサイトイメージは視差効果のある画像ではなく、slick.jsを用いたスライダーにしています。
ひまあーとのWordpressサイト制作工房
Wordpressのテーマ【ha-Basic】の配布、テーマカスタマイズの方法のご紹介など
ナビゲーションメニューホーバー時にサブメニューをふわっと表示するようにしています。
ひまあーとのWordpressサイト制作工房
Wordpressのテーマ【ha-Basic】の配布、テーマカスタマイズの方法のご紹介など
広告についてはウィジェットへの挿入と、本文下のダブルレクタングル表示は
ひまあーとのWordpressサイト制作工房
Wordpressのテーマ【ha-Basic】の配布、テーマカスタマイズの方法のご紹介など
その他細かい調整はしていますが、基本的に【ha-Basic】と数種のプラグイン、このサイトで紹介しているカスタマイズ方法を元にして作成していますので、【ha-Basic】テーマを使ったサイトのデザイン例として参考になれば幸いです。
【この記事の目次】－ 必要な部分だけ見たいときにどうぞ － [表示する]
いつでもご相談・お見積りの依頼を受け付けています
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちら
から登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。
関連記事
