【HABONE】テーマを使っているサイトとカスタマイズ例

【HABONE】テーマを使っているサイトとカスタマイズ例

本記事では、このテーマでどのようなサイトが作れるのかを実際に見ていただくため、【HABONE】テーマを使って実際に動作しているWordPressサイトを紹介します。

2021年9月22日現在では、リリース前のため、私が管理するサイトのみの紹介となります。もしも【HABONE】テーマをお使いになっているサイト様がありましたら、コメント欄からお知らせください。確認させていただいた後に掲載させていただきます。

サイトの名称(リンク)サイトの概要と行っている設定やカスタマイズ内容
園芸と家庭菜園と観葉植物を楽しもう!私の趣味である園芸関係のサイトです。背景画像を使用して雰囲気よく?作れているサイトではないかと思います→カスタマイズ内容の詳細
Ordinary Lifeもともとは近所に住む地域猫たちの記録サイトでしたが、現在は自身の日記などを書いています→カスタマイズ内容の詳細
金魚・熱帯魚・海水魚を飼育しよう!Ordinary Lifeサイトのサブディレクトリで稼働している、熱帯魚・金魚の飼育に関する情報サイトです→カスタマイズ内容の詳細

すべて見ていただくと分かるとおり、いくつかのプラグインは使用しているものの、私が管理するサイトでは本当にほぼ【HABONE】の基本設定(テーマカスタマイザー)でデザインや機能的なものは完結しています。

「園芸と家庭菜園と観葉植物を楽しもう!」カスタマイズ詳細

2021年9月30日現在の情報です

Screenshot of www.momosiri.info

私が管理する園芸サイトです。

植物図鑑、園芸店の紹介、植物を元気に育てる方法などを掲載しています。

** 最新の更新記事 **

使用しているプラグイン

プラグイン名用途
Auto Amazon LinksAmazonアソシエイトの商品をリスト表示するのに使用しています
Custom Field Suiteカスタムフィールドの管理に使っています(サイトメンテナンス後に停止予定です)
Custom Post Type UIカスタム投稿タイプを管理画面上で管理できて便利です
Fixed WidgetHABONEの簡易固定ウィジェットではAdsense自動広告に対応しきれない場合があるため、ウィジェットの固定表示に使っています
Google Analytics Dashboard for WP (GADWP)管理画面上でGoogle Analyticsの情報を見るのに使っています。旧プラグインをそのまま使っています(WordPress5.8でも問題なく稼働しています)
Gwolle Guestbook訪問者からの意見収集のために使っていく予定です(現在コンテンツ作成中)
HA Force Translate Files翻訳ファイルの優先適用、バージョンアップで上書きされないようにするために自身で作成したプラグインです。我ながら重宝しています。
Imsanityアップロードした画像の元画像をリサイズしてくれて便利です
Optimize Database after Deleting Revisionsデータベース上に残る不要なデータを定期的に削除してくれます
WebP Expressjpg形式の画像をwebp形式で出力するために使用しています
WP Multibyte Patch日本語利用の問題解消のために使っています
XML Sitemap & Google News検索エンジン用のサイトマップ出力に使っています。カスタム投稿タイプも適用できて便利です

【HABONE】カスタマイザー設定以外の特別なカスタマイズ

背景画像を活かすためにヘッダー部分を透過にしていることで、サイトタイトルとキャッチフレーズが見にくくなるのを防ぐためと、本文も少し透過がいいかな?ということで、以下のコードをCSSへ追加しています

#main ,#sidebar{
    background-color: rgb(255 255 255 / 97%);
}
.header-content p , .page-header, .page-header a{
	text-shadow:
		2px 2px 0 #FFF,
		-2px -2px 0 #FFF,
		-2px 2px 0 #FFF,
		2px -2px 0 #FFF,
		0px 2px 0 #FFF,
		0-2px 0 #FFF,
		-2px 0 0 #FFF,
		2px 0 0 #FFF; 
}

また、見出しのデザインは以下のコードを使っています。

pc-style.css

#main h2 , .editor-styles-wrapper h2 , #main-full h2{
	padding: 0.3em 0.5em;
	color: #ffffff;
	font-size:1.6em;
	background-image: -webkit-gradient(linear, left top, right top, from(#169d08), to(#a6ed5a));
	background-image: -webkit-linear-gradient(left, #169d08 0%, #a6ed5a 100%);
	background-image: linear-gradient(to right, #169d08 0%, #a6ed5a 100%);
	text-shadow:
		2px 2px 0 #169d08,
		-2px -2px 0 #169d08,
		-2px 2px 0 #169d08,
		2px -2px 0 #169d08,
		0px 2px 0 #169d08,
		0-2px 0 #169d08,
		-2px 0 0 #169d08,
		2px 0 0 #169d08; 
}

h3.sidebar-title{
	padding: 0.2em 0.3em;
	color: #fff;
	font-size:1.2em;
	background-image: -webkit-gradient(linear, left top, right top, from(#169d08), to(#a6ed5a));
	background-image: -webkit-linear-gradient(left, #169d08 0%, #a6ed5a 100%);
	background-image: linear-gradient(to right, #169d08 0%, #a6ed5a 100%);
	text-shadow:
	text-shadow:
		2px 2px 0 #169d08,
		-2px -2px 0 #169d08,
		-2px 2px 0 #169d08,
		2px -2px 0 #169d08,
		0px 2px 0 #169d08,
		0-2px 0 #169d08,
		-2px 0 0 #169d08,
		2px 0 0 #169d08;
}

#main-full h3 , #main h3 , .editor-styles-wrapper h3{
	border-bottom: 4px solid #169d08;
	border-image: linear-gradient(to right, #169d08 0%, #a6ed5a 100%);
	border-image-slice: 1;
	font-size:1.4em;
}

#main h4, .editor-styles-wrapper h4 , #main-full h4{
	border-left: 6px double #fee140;
	border-image: linear-gradient(to bottom, #a6ed5a 0%, #169d08 100%);
	border-image-slice: 1;
	font-size:1.2em;
	padding-left:0.2em;
}

#main h5, .editor-styles-wrapper h5 , #main-full h5{
	padding: 0.2em 0.5em;
	border-left: 4px dotted #eee;
	font-size:1.1em;
}

mobile-style.css

#main h2 , .editor-styles-wrapper h2 , #main-full h2{
	padding: 0.3em 0.5em;
	color: #fff;
	font-size:1.4em;
	background-image: -webkit-gradient(linear, left top, right top, from(#169d08), to(#a6ed5a));
	background-image: -webkit-linear-gradient(left, #169d08 0%, #a6ed5a 100%);
	background-image: linear-gradient(to right, #169d08 0%, #a6ed5a 100%);
}

h3.sidebar-title{
	padding: 0.2em 0.3em;
	color: #fff;
	font-size:1.2em;
	background-image: -webkit-gradient(linear, left top, right top, from(#169d08), to(#a6ed5a));
	background-image: -webkit-linear-gradient(left, #169d08 0%, #a6ed5a 100%);
	background-image: linear-gradient(to right, #169d08 0%, #a6ed5a 100%);	
}

#main h3 , .editor-styles-wrapper h3 , #main-full h3{
	border-bottom: 2px solid #169d08;
	border-image: linear-gradient(to right, #169d08 0%, #a6ed5a 100%);
	border-image-slice: 1;
	font-size:1.2em;
}

#main h4, .editor-styles-wrapper h4 , #main-full h4{
	border-left: 4px double #fee140;
	border-image: linear-gradient(to bottom, #a6ed5a 0%, #169d08 100%);
	border-image-slice: 1;
	font-size:1em;
	padding-left:0.2em;
}

#main h5, .editor-styles-wrapper h5 , #main-full h5{
	padding: 0.2em 0.5em;
	border-left: 2px dotted #eee;
	font-size:1em;
}

その他特筆すべきことはなく、基本テーマカスタマイザーの設定のみで動作と表示をさせています。

「Ordinary Life」カスタマイズ詳細

Screenshot of momosiri.nagoya

以前は近所の方でお世話している地域猫ちゃんたちの想いでを残すためのサイトとして運営していたサイトです。

時が経ち、その場所の地域猫ちゃんも残り1匹となったため、我が家の「モモ」と「ココ」の日常を中心に、私的な日記サイトとして継続運営しています。

*** サイトの新着記事 ***

使用しているプラグイン

プラグイン名用途
Custom Field Suiteカスタムフィールドの管理に使っています(サイトメンテナンス後に停止予定です)
Custom Post Type UIカスタム投稿タイプを管理画面上で管理できて便利です
Fixed WidgetHABONEの簡易固定ウィジェットではAdsense自動広告に対応しきれない場合があるため、ウィジェットの固定表示に使っています
Google Analytics Dashboard for WP (GADWP)管理画面上でGoogle Analyticsの情報を見るのに使っています。旧プラグインをそのまま使っています(WordPress5.8でも問題なく稼働しています)
HA Force Translate Files翻訳ファイルの優先適用、バージョンアップで上書きされないようにするために自身で作成したプラグインです。我ながら重宝しています。
Imsanityアップロードした画像の元画像をリサイズしてくれて便利です
Optimize Database after Deleting Revisionsデータベース上に残る不要なデータを定期的に削除してくれます
Throws SPAM Away日本語でないコメントを自動削除してくれます
WebP Expressjpg形式の画像をwebp形式で出力するために使用しています
WP Multibyte Patch日本語利用の問題解消のために使っています
XML Sitemap & Google News検索エンジン用のサイトマップ出力に使っています。カスタム投稿タイプも適用できて便利です

【HABONE】カスタマイザー設定以外の特別なカスタマイズ

「金魚・熱帯魚・海水魚を飼育しよう!」カスタマイズ詳細

使用しているプラグイン

プラグイン名用途
Custom Field Suiteカスタムフィールドの管理に使っています(サイトメンテナンス後に停止予定です)
Custom Post Type UIカスタム投稿タイプを管理画面上で管理できて便利です
Fixed WidgetHABONEの簡易固定ウィジェットではAdsense自動広告に対応しきれない場合があるため、ウィジェットの固定表示に使っています
Google Analytics Dashboard for WP (GADWP)管理画面上でGoogle Analyticsの情報を見るのに使っています。旧プラグインをそのまま使っています(WordPress5.8でも問題なく稼働しています)
HA Force Translate Files翻訳ファイルの優先適用、バージョンアップで上書きされないようにするために自身で作成したプラグインです。我ながら重宝しています。
Imsanityアップロードした画像の元画像をリサイズしてくれて便利です
Optimize Database after Deleting Revisionsデータベース上に残る不要なデータを定期的に削除してくれます
Throws SPAM Away日本語でないコメントを自動削除してくれます
WebP Expressjpg形式の画像をwebp形式で出力するために使用しています
WP Multibyte Patch日本語利用の問題解消のために使っています
XML Sitemap & Google News検索エンジン用のサイトマップ出力に使っています。カスタム投稿タイプも適用できて便利です

【HABONE】カスタマイザー設定以外の特別なカスタマイズ

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

WordPress用テーマ「ha-Basic」「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球