【ha-Basic】テーマを使ったサイト例

公開日: 更新日: サイト制作例

今見ていただいているサイトはなるべく余分なものを追加せずに【ha-Basic】テーマのデフォルトに近い形にしておきたいので、私が管理している別のサイトで、【ha-Basic】を使ったサイト例を紹介します。

もともと【ha-Basic】は余分なものをそぎ落としたシンプルテーマですが、ちょっと手を加えるとまったく違ったイメージのサイトができます。

この記事の仕様を用いたサイトは

になりますのでご覧いただきながらこの記事を読んでいただくと、よりイメージがつかみやすいと思います。

※リンク先サイトの状態は2019年6月1日現在のものですので、ご覧いただいた時には変更している可能性があります

サイトで使用しているプラグイン

特別なコンテンツに使用しているプラグインのみ紹介します。

「Your Channel」

トップページと猫動画でYoutube動画の一覧を表示するために使用しています

「ARI Fancy Lightbox」と「Media Library Categories」

猫のプロフィールページ下部にある画像ギャラリーの表示を行うため、この2つのプラグインを使っています。

実装方法については

をご覧ください。

「Historian」

サイドバーにある同じ時期の記事一覧の表示に使用しています

「Content Cards」

内部・外部リンクをカード表示するために使用しています。このプラグインを使ったカードのデザインはあらかじめ【ha-Basic】テーマに設定してありますので、URLをショートコードで囲むだけでカード表示できるようになります。

Q2W3 Fixed Widget

サイドバーの一番下にある人気記事ウィジェットを追従表示(スクロールしてもずっと表示されるウィジェット)させるために使っています。

特別なプラグインは以上です。

【ha-Basic】テーマのカスタマイズ内容

【ha-Basic】テーマのカスタマイズ記事で紹介している方法をいろいろ使ってサイトのデザインやコンテンツをカスタマイズしています。各内容はリンク先ページをご覧ください。

全体の配色は

をテーマの「a-color-style.css」へ上書きしています。

トップページ上のサイトイメージは視差効果のある画像ではなく、slick.jsを用いたスライダーにしています

トップページと猫のプロフィールページへショートコードで投稿一覧を2列表示させています。

ナビゲーションメニューホーバー時にサブメニューをふわっと表示するようにしています

広告についてはウィジェットへの挿入と、本文下のダブルレクタングル表示は

で表示させています。

その他細かい調整はしていますが、基本的に【ha-Basic】と数種のプラグイン、このサイトで紹介しているカスタマイズ方法を元にして作成していますので、【ha-Basic】テーマを使ったサイトのデザイン例として参考になれば幸いです。

いつでもご相談・お見積りの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】








コメントは受け付けていません。