>> 2024/1/25 サイトリニューアルにつき、見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→

おしゃれで使える海外無料テーマ「Hoot Du」の使い方とカスタマイズ

WordPress・テーマ
この記事は約6分で読めます。

基本的には海外の無料テーマは、英語だしサポートもないし、カスタマイズ方法などの情報もないので使いにくいですが、インパクトのあるサイト、おしゃれなサイトを作りたいと思った時、海外テーマには魅力的なものが数多くあります。

今回は、そんな中でも実際に使ってみて「これは使える」と思ったテーマ「Hoot Du」の紹介と、実際に使うのに足りない機能の対応やクレジット表示削除などのカスタマイズ方法を書いてみます。

 

8767_01

最大の特徴は、
トップページのレイアウト・デザインが自在にカスタマイズ可能な事です。

 

たとえば以下のようなレイアウトも可能。コンテンツ内の枠はウィジェットになり好きな配置が出来ます。

※以下以外にもヘッダーやフッターにも何か所もエリアあり

8767_21

 

有料版(PRO)もありますが、無料版で十分なカスタマイズ範囲があります。

 

デモサイト / ダウンロード

 

1カラム・2カラム・3カラム対応

おしゃれな海外テーマは、以下も参考にして下さい。

おしゃれで使える海外無料テーマ「Fotografie」の使い方とカスタマイズ
基本的には海外の無料テーマは、英語だしサポートもないし、カスタマイズ方法などの情報もないので使いにくいですが、インパクトのあるサイト、おしゃれなサイトを作りたいと思った時、海外テーマには魅力的なものが数多くあります。 今回は、そんな中でも実...
おしゃれで使える海外無料テーマ「Hestia」の特徴・子テーマ準備・フッタークレジット削除
「Hestia」は海外のテーマですが、日本語に翻訳されているので、設定画面なども分かりやすく問題なく使えます。 機能的にもデザイン的にも優れていて、ビジネスサイトとしても十分に利用できるテーマです。 「Hestia」 デモ&ダウンロード ダ...

 

主な設定項目

8767_02

デザインカスタマイズ可能な項目は多種多様にあり紹介しきれませんが、主な項目は以下の通りです。

  • サイドバーレイアウト
  • メニューの位置や表示方法
  • ロゴ・サイトタイトルの位置、サイズ
  • テーマカラー・アクセントカラー
  • ヘッダー画像・背景画像
  • フォント
  • フロントページレイアウト
  • ウィジェットエリアのカスタマイズ
  • 「Contact Form 7」対応デザイン

など

 

サイドバーレイアウト

サイト全体・ページ用・単一投稿用とそれぞれにレイアウト設定が可能です。

8767_03

 

ロゴ・サイトタイトル

サイトタイトル左にアイコンを表示したりも出来ます

8767_04

 

フロントページレイアウト

フロントページ用ウィジェットエリアを好きなデザインに分割したり、エリアごとに背景画像を設定したりできます。

8767_05

分割

8767_12

背景

8767_07

 

ウィジェットエリア

8767_13

 

投稿・アーカイブページレイアウト

レイアウト設定、メタ情報の表示設定も自在。

8767_08

 

お問い合わせフォームデザイン

「Contact Form 7」プラグインを利用し、そのデザインを編集可能です。

8767_09

フッターウィジェットデザイン

フッターのレイアウトを自在に変更可能です。選択したレイアウトによってウィジェットエリアが追加されます。

分割

8767_10

ウィジェットエリア

8767_11

 

 

カスタマイズについて

デザイン的には高機能ですが、残念ながらこれだけでは足りないものもあります。

そういったものを追加するプラグインや、実現方法をご紹介します。

フッタークレジット(著作権表示)削除

フッターに表示されるクレジットは、footer.phpの1行を削除するだけで可能です。

8767_15

 

8767_14

 

バックアップを取るなどしてから行う方が無難です。

 


<?php
// Template modification Hook
do_action( 'hootdu_main_wrapper_end' );
?>
</div><!-- #main -->

<?php get_template_part( 'template-parts/footer', 'subfooter' ); // Loads the template-parts/footer-subfooter.php template. ?>

<?php get_template_part( 'template-parts/footer', 'footer' ); // Loads the template-parts/footer-footer.php template. ?>
<!--
<?php get_template_part( 'template-parts/footer', 'postfooter' ); // Loads the template-parts/footer-postfooter.php template. ?>
-->
</div><!-- #page-wrapper -->

<?php wp_footer(); // WordPress hook for loading JavaScript, toolbar, and other things in the footer. ?>

</body>
</html>

上記のようになっていますので、以下の1行をコメントアウト、または削除。

<?php get_template_part( 'template-parts/footer', 'postfooter' ); // Loads the template-parts/footer-postfooter.php template. ?>

 

 

見出しタグデザイン

デフォルトでは以下の通り、文字サイズの変化のみですので、好みのデザインのCSSを追記すると良いです。

8767_19

 

見出しデザインについては以下をご覧ください。

見出し(H2~H5)デザインCSSをまるごとコピペ!4パターン+α
とにかく簡単にコピペで初期の見出しタグを実装する為のラフCSSです。 H2~H5を一度にコピーできるサンプル4バターン、サクっとコピペでも可能です、その他にも見出しサンプルちょっと載せてありますので、それぞれからお好みのデザインの部分を組み...

 

PAGETOPボタンを追加する

ページの先頭へ戻る小さなボタンを追加すると便利です。

8767_20

 

以下を参考にして下さい。

ページトップへ戻るボタンを簡単コピペ!5パターン
ページのトップへ戻るボタンをHTML1行と、簡単なCSSで実装します。 今回は、以下の5点。サンプルそのまま、コピペで可能です! また、アイコンや、色、角の丸みなどを自由にカスタマイズしてご利用ください。  アイコンフォントを使ったバージョ...

 

上記の記事で説明していますが、<body></body>内追加する以下のコードの追記は、footer.phpの</body>タグの上でOKです。

<div id="page_top"><a href="#"></a></div>

 

SNS連携とOGP設定

以下をご覧ください。

WordPressでSNS連携プラグインとOGP設定(プラグインなし)
SNS連携、OGP設定機能のないテーマで簡単に実装する方法です。 自身のSNSボタン等は、リンクやメニューなどで簡単に設置できますが、シェアボタンを表示するにはシンプルで便利なプラグインがあります。 OGP設定は、function.phpへ...

 

日本語対応のテーマは以下をご覧ください。

完全日本語の無料テーマおすすめ15選 機能と速度まとめ-2024年
完全日本語対応(国内の企業様や個人様)の無料テーマに絞って探し、実際にダウンロードして使ってみて、機能とスピードをまとめています。 お勧めは? ズバリ、最初にお勧めを書きます。 1位:Cocoon ブログからビジネスサイトまで対応可能。アフ...
AMP対応で簡単にAMP化できる日本語無料テーマ7選と設定方法
無料の日本語テーマをまとめた記事と被りますが、今回は「AMP」対応しているものに絞ってまとめています。 その他の日本語テーマは以下も参考にして下さい。 AMPって? AMP化とは、簡単に言えばモバイル(スマホやタブレット)での高速化対応です...
人気の有料テーマ JIN・SANGO・AFFINGER5 WINGの特徴と価格比較まとめ
実際に使っている、または、触ったことのある有料テーマ「JIN」、「SANGO」、「AFFINGER5」の比較と特徴などのまとめです。 そもそもテーマの選び方に迷われている場合は、以下も参考にして下さい。 無料テーマについては以下をご覧くださ...

 

コメント

タイトルとURLをコピーしました