【HABONE】および【HABONE BASE】テーマを更新しました（バージョン1.1）

公開日：2021年12月1日

カテゴリー:テーマ更新情報

【HABONE】および【HABONE BASE】テーマを更新しました。

最新バージョンは【HABONE】【HABONE BASE】とも1.1です。

更新内容をご確認いただき、最新版への更新をお願いします。

なお、メディアに同名の圧縮ファイル（habone.zip habonebase.zip）がある場合にテーマが正常に更新されない不具合が起こらなくなるようにするため、今回の更新ファイルより以下のような構造で提供することとします。

更新の方法に変更はありません。文末の更新手順を参照いただき、更新ください。

旧方式

「圧縮ファイル（habone.zipまたはhabonebase.zip）」→「テーマ内のファイル・フォルダ」

新方式

「圧縮ファイル（habone.zipまたはhabonebase.zip）」→「テーマフォルダ」→「テーマ内のファイル・フォルダ」

【HABONE】本体のダウンロード

13 ダウンロード

【HABONE BASE】本体のダウンロード

5 ダウンロード

ページ上部へ戻る▲

更新内容

固定ページ・投稿テンプレート追加

HABONE】および【HABONE BASE】テーマ共通の更新です

固定ページテンプレートで、従来の「全幅テンプレート」を「サイドバーなし（広）」へ名称変更し、「サイドバーなし（狭）」を選択可能にしました。

「サイドバーなし（狭）」は、本文幅940pxのテンプレートになります。

また、投稿についても、固定ページ同様に、右サイドバーありの「デフォルト」、幅1260pxの「サイドバーなし（広）」、幅940pxの「サイドバーなし（狭）」が選択できるようにしました。

【HABONE】および【HABONE BASE】テーマを更新しました（バージョン1.1）|HABONE

テーマ内のテンプレート構造配置を変更しましたので、旧来の「全幅テンプレート」は廃止します。既にHABONEを使って全幅テンプレートで固定ページを作成している方は、テンプレートの選びなおしを行ってください（選びなおしをしない固定ページは通常の右サイドバーありになります）

本体・サイドバーのCSS調整

HABONE】および【HABONE BASE】テーマ共通の更新です

パソコン用CSS(pc-style.css)において、flexboxでレイアウトしている本体とサイドバーの幅を再計算し、より正確に幅の決定がされるよう調整しました。

また、本文のパディング（余白）についても、左右の目の動きを少なくするため、本文の上下左右の余白（パディング量）を増やし、余裕のある形にして、読みやすくしました。

旧コード

/***** 本体部分 *****/
.container {
	display: flex;
	gap:2%;
	margin-top:20px;
	margin-bottom:20px;
	min-height:100%;
}

/* 本文とサイドバーの関係 */
.contents {
	max-width: 69.5%;
	width: 870px;
	border-radius:8px;
	padding:20px;
}

.side-content {
	max-width: 28.5%;
	width: 360px;
	border-radius:8px;
	padding:20px;
}

新コード

/***** 本体部分 *****/
.container {
	display: flex;
	gap:1.6%;
	margin-top:20px;
	margin-bottom:20px;
	min-height:100%;
}

/* 本文とサイドバーの関係 */
.contents {
	max-width: 800px;
	width: 63.5%;
	border-radius:8px;
	padding:30px;
}

.side-content {
	max-width: 340px;
	width: 27%;
	border-radius:8px;
	padding:20px;
}

その他CSSの修正と調整

画像ブロックで挿入した画像の扱い

HABONE】および【HABONE BASE】テーマ共通の更新です

本文内画像（画像ブロックを使ったもの）の表示がサイズによってきれいに表示されないことがあるようなので、以下のコードを追加しました。

.wp-block-image img {
    object-fit: contain;
}

object-fitの値については以下の違いがありますが、画像がきちんと表示されるということを優先してcontainにしていますので、サイトの様相に合わせて子テーマ等で調整ください。

cover・・・縦横比は維持しつつ、いっぱいに表示する（はみ出た部分は非表示になる｝
contain・・・縦横は維持しつつ、長辺側がいっぱいになるように表示する（短編側は余白が発生する）
none・・・何もしない
scale-down・・・長辺側に合わせて縮小する

例えば、coverにしたい場合には子テーマのstyle.cssへ以下のように記述します

.wp-block-image img {
    object-fit: cover;
}

アイキャッチ画像付きリストの画像位置修正

【HABONE】テーマのみの更新です

サイドバー用の独自ウィジェット（アイキャッチ付リスト）の画像位置を調整しました。

具体的には、１つのユニット（投稿）内で画像の左余白が大きいことで、右寄りに表示されているように見えるので、左余白を無くしてユニット全体にコンテンツが表示されるようにしました。

独自ショートコードの説明欄を表示

【HABONE】テーマのみの更新です

投稿や固定ページ編集画面の下部（SEO設定項目下）へ、HABONEの独自機能ショートコードの説明表示を追加しました。

これにより、ショートコードをコピペして使ったり、ショートコードの使い方をいつでも見ることができるようになりました。

この機能では、すべてのカスタム投稿タイプの編集画面でも表示させるようにしていますが、カスタム投稿タイプを使うプラグインの編集画面でも表示されてしまうため、不都合かも知れません。そうした場合には基本無視すればいいのですが、あまりにも不格好なようであればデフォルトを投稿・固定ページとする変更を行う可能性があります

ブロックの上下マージン調整機能追加

【HABONE】テーマのみの更新です

ブロックエディタで構成するブロックの上下マージン（上下の余白）をカスタマイザーからある程度設定できるようにしました。

もう少し各ブロック間に余白が欲しい．．という場合に有効な機能です。

詳しい設定内容はこちら

ページ上部へ戻る▲

テーマの更新方法

新しいバージョンのテーマを上書きインストールすることで更新できます。

親テーマ（【habone】）へカスタマイズを行っている場合は、更新を行うことでカスタマイズ内容が消失します。
親テーマへ何等かのカスタマイズをされている方は、「Download Theme」プラグインなどを使って一旦テーマのバックアップを取り、更新後にカスタマイズ内容を復元（バックアップから該当箇所のコピーをするなど）してください。

【HABONE】では更新ごとにカスタマイズ内容の復元をしなくてもよいよう、子テーマの使用をおすすめしています

以下の手順に従って更新してください。