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

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

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

ページ上部へ戻る▲

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

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

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

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

＊＊　最新の更新記事　＊＊

• 観葉植物を水栽培から土栽培へ変更させる方法
  2023年9月13日
• 水やりの「乾いたらたっぷり」はどの位？
  2022年6月29日
• 家庭菜園も、室内観葉植物も、「底面給水」で楽々に、元気に育てる
  2022年3月13日

使用しているプラグイン

【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」カスタマイズ詳細

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

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

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

• また猫モチーフが増えた
  2025年10月11日
• なんだかモヤモヤ．．
  2025年10月11日
• 車のキーレスエントリーの電池交換．．
  2025年10月4日

使用しているプラグイン

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

ページ上部へ戻る▲

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

使用しているプラグイン

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