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

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

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

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

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

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

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

旧方式

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

新方式

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

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

8 ダウンロード

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

7 ダウンロード

更新内容

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

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】テーマのみの更新です

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

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

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

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

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

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

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

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

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

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

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

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

詳しい設定内容はこちら

テーマの更新方法

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

親テーマ(【habone】【HABONE BASE】)へカスタマイズを行っている場合は、親テーマの更新を行うことでカスタマイズ内容が消失したり、カスタマイズ内容によっては動作しなくなったりすることがありますのでご注意ください。

【HABONE】【HABONE BASE】では子テーマの使用をおすすめしています

手順は以下の通りです。

1.管理画面から「外観」をクリックします

2.「新規追加」をクリックします

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

3.「テーマのアップロード」をクリックします

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

4.「ファイルを選択」をクリックし、ダウンロードしたパソコン上の更新ファイルを選択します

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

5.「今すぐインストール」をクリックします

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

6.以下のような画面になるので、「アップロードしたもので現在のものを置き換える」をクリックします

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

子テーマの使用をおすすめしています

【HABONE】【HABONE BASE】テーマでは子テーマの使用をおすすめしています

子テーマのダウンロードは以下から行っていただけます(インストール方法は親テーマと同じです)

【HABONE】子テーマのダウンロード

9 ダウンロード

【HABONE BASE】子テーマのダウンロード

7 ダウンロード

親テーマ・子テーマとも無料でダウンロードして使用いただけますが、今後もテーマ開発や更新を続けられるよう、こちらのページで支援をお願いしています。ご協力よろしくお願いいたします。

使用した感想をお聞かせください

この度は【HABONE】テーマをご使用いただきありがとうございます。今後のテーマ作成や更新に役立てるため、ご意見をお聞かせください。

感想をお寄せください

 
 
 
 
 
 
「*」の付いた項目は必須入力項目です
・投稿元のIPアドレスとホスト名が記録されます(スパム対策に使用します)
・「ひまあーと」によって投稿内容を承認した後、トップページ内で一般公開します(不適切と判断したものについては承認せず、投稿は表示されません)
・管理者の判断により、投稿を編集・削除することがあります
・メールアドレスを入力いただかないようにしているため、投稿の確認、公開時の確認メール等は送信しません

いただいたご意見は、一度管理者である「ひまあーと」にて確認させていただき、トップページ内で紹介させていただきます

作者:

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

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