トップページ用

WordPress用テーマ【HABONE】シリーズの公式サイトへようこそ

本テーマは、WordPressでブログ系サイトを公開したい、初心者なのでできるだけ簡単に設定できるものがいい、なるべく必要な機能をテーマだけで構築したいという方向けの、シンプルデザイン・高機能・高速表示を目指したWordPress用テーマです

更新情報・新着情報

【HABONE】テーマを使用しているサイト例

本サイトおよび私が制作・管理している以下のサイトでは、【HABONE】テーマを使用しています

それぞれのサイトで、全体的には【HABONE】テーマのカスタマイザーで行える変更のみを行っておりますが、一部機能のカスタマイズや、デザインコードの追加などを行っておりますので、あくまでも「こんな表現のサイトができる」という参考イメージとしてご覧ください

Screenshot of www.momosiri.info
Screenshot of momosiri.nagoya
Screenshot of www.momosiri.info
Screenshot of momosiri.nagoya

テーマダウンロードページ内にある「使用した感想をお聞かせください」のフォームで使用されているサイトのURLを入力いただければ、この欄にてサイトの紹介をさせていただきます。

【HABONE】テーマシリーズの特徴と種類

シリーズ共通の仕様・本テーマでできること

【HABONE】テーマシリーズ共通の機能と仕様です

  • 右サイドバーを使ったスタンダードなレイアウトのテーマです
  • 固定ページではサイドバーのない全幅テンプレートが使用できます
  • できるだけテーマのCSSがデザイン変更の邪魔をしないようにしています
  • パソコン・モバイル用のCSSを独立させ、余分なコードの読み込みを最小限にしています
  • 一部文字列を除き、多言語(翻訳)に対応しています(デフォルトは「英語」と「日本語」のみです)
  • 基本的なデザイン(色など)はすべてテーマカスタマイザーで簡単に変更できます
  • テーマ独自の機能の有効/無効化、設定はすべてテーマカスタマイザーで行えます
  • カスタマイズしやすいよう、子テーマを提供しています
  • パソコン・モバイル・パソコンのマルチウインドウに対応したレスポンシブテーマです

テーマによって機能が異なりますので、詳しくはこちらをご覧ください

本テーマは、構造上、旧ブラウザ(Internet Explorerやバージョンの古いその他ブラウザ)には対応させていません。
また、今後も対応予定はありませんので、旧ブラウザでも正常表示させたい方は、本テーマの使用をご遠慮ください

テーマごとの特徴

【HABONE】テーマシリーズは、2021年10月27日現在、以下の2つのWordPress用テーマを用意しております

HABONE BASE

シリーズ共通の仕様で、余分な機能を一切排したシンプル設計にしています。

テーマの自作に関しての必要な知識を得たい方、必要な機能はプラグインで補う予定の方に適したテーマです。

また、【HABONE】の中から必要な機能だけをご自身で導入できるようこちらで機能ごとの追加方法をご案内しています。

HABONE

【HABONE BASE】テーマを基礎に、私が実際にサイトの構築や運営をする上で、これがテーマだけで実現できたらサイト作りが楽になるであろうさまざまな機能を追加した、ブログ向けのテーマです。

設定に戸惑うことがないよう、機能のほとんどはテーマカスタマイザーから変更できるようにしています。

もちろん機能を充実させても高速表示でき、ページの解析評価も高水準を維持できます。

テーマによって機能が異なりますので、詳しくはこちらをご覧ください

【HABONE】テーマシリーズの開発環境・動作要件

【HABONE】テーマシリーズは、2021年10月現在、以下の環境で開発および更新を行っています

使用しているサーバーColorful Box(カラフルボックス) BOX2プラン
WEBサーバーLiteSpeed
PHPバージョン7.4および8.0
Mysqlバージョンmysqlnd 7.4.23
WordPressバージョン5.8.1
動作・表示テスト(PC)Google Chrome(95.0.4638.54)
Microsoft EDGE(95.0.1020.30)
Opera(80.0.4170.63)
Mozilla Firefox(93.0)
テストはすべてWindows版(Windows10上)のみで行っています
動作・表示テスト(モバイル)スマートフォンおよびタブレットについては、Google Chromeのデベロッパーツールでのみテストを行っています

本テーマは、構造上、旧ブラウザ(Internet Explorerやバージョンの古いその他ブラウザ)には対応させていません。
また、今後も対応予定はありませんので、旧ブラウザでも正常表示させたい方は、本テーマの使用をご遠慮ください

PHP、WordPress本体については上記のバージョンでのみ動作チェックを行っておりますので、下位互換性についての確認はしておりません
環境の違いや併用するプラグインとの相性などにより、正常に動作しないことがありますので、了承の上使用ください

実際に公開・動作させている環境でのテーマ構築を行う目的から、テストサイト等やテスト環境ではなく、本サイト自身で開発・改修・修正・調整などを行っております。従って、閲覧されるタイミングによっては、表示に不具合があったり、動作しないものがあったりすることがありますが、ご容赦ください

新着情報・更新情報

新着情報・更新情報

本テーマに関する新着情報・更新情報・お知らせです

  • トップページ用|HABONE

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

    【HABONE】および【HABONE BASE】テーマを更新しました。 最新バージョンは【HABONE】【HABONE BASE】とも1.1です。 更新内容をご確認いただき、最新版への更新をお願いします。 なお、メディア […]

  • トップページ用|HABONE

    【HABONE】親テーマのカスタマイザーで行った設定を子テーマへ丸ごと移行する(コピーする)方法 -プラグイン使用-

    親テーマへ行ったテーマカスタマイザーでの設定変更を、簡単かつ確実に子テーマへ移行する方法を紹介します。移行にはプラグインを1つ使うのが確実です。

  • トップページ用|HABONE

    【HABONE】テーマを更新しました(バージョン1.0.1)

    【HABONE】テーマ1.0に以下の機能追加および不具合解消を行いました。 ショートコードで本文内の任意の場所へSNSシェアボタンを表示できるようにしました 本文冒頭に「説明文」を表示できるようにしました 不具合を2点解 […]

  • トップページ用|HABONE

    【HABONE】テーマ1.0について 軽微な修正

    【HABONE】テーマをお使いいただきありがとうございます。 以下の点について不具合がございましたので修正を行いました。なお、数か所の修正ですのでテーマバージョンについてはそのまま1.0としております(新しくダウンロード […]

テーマ作成メモ(自作テーマ構築ヒント集)

テーマ開発および自作する場合のメモ(備忘録)集です

  • トップページ用|HABONE

    【WordPress】プラグインなしで管理画面の一覧へIDを表示する方法

    忘れた頃にWordPressのカスタマイズで必要になることが多い「〇〇ID」。いちいち調べるのも面倒なので、プラグインなしでいつでも見られるように表示させる方法を紹介します。

  • トップページ用|HABONE

    トップページの表示を、パソコンでは固定ページ、モバイルでは投稿一覧にする方法(メモ)

    WordPressテーマのfunctions.phpへ簡単なコードを追加するだけで、トップページを固定ページにした際のモバイルページを通常の投稿ページにできる方法のメモ記事です。

  • トップページ用|HABONE

    モバイルを判定するための関数について

    WordPressでタブレット端末をモバイルと判定させないために、ユーザー定義関数、is_mobile()を追加する方法のメモ。テーマ内のwp_is_mobileの部分をすべて書き換える必要がありますが、一番無難な判定の変更方法です。

  • トップページ用|HABONE

    テーマに独自の設定項目を追加して、テーマに反映する方法いろいろ

    WordPressには、プレビュー画面を見ながら色や表示の調整ができるテーマカスタマイザーという便利な機能があります。本記事では項目やメニューを自由に追加して自分なりのオプションを付加する方法と、それをテーマへ適用させる方法、既存の項目を任意の場所へ移動する方法など、テーマカスタマイザーを操作する方法を分かりやすく紹介します。

【HABONE】テーマ独自機能の詳細

高機能版【HABONE】テーマに搭載している機能の詳細情報および設定情報です

  • トップページ用|HABONE

    本文冒頭に「SEO設定」の説明欄へ入力した文章を表示する

    descriptionメタタグや構造化データとして利用する「説明文」へ入力した文章。そのページの概要として設定した文章をそれらだけにするのはもったいないということで、本文冒頭へ表示させるようにする【HABONE】テーマの機能を紹介します。

  • トップページ用|HABONE

    ブロックエディタ内の任意の文字列に対する装飾機能(テスト版)

    【HABONE】の機能である、任意の文字列に対する下線の色付け、およびマーカー装飾の機能説明と使い方、装飾解除の方法などを説明するページです。

  • トップページ用|HABONE

    ファイルページへのアクセスをトップページへ遷移させる

    画像やファイルのアップロード時に自動生成されるページに対するセキュリティ対策として、「検索エンジンに登録されないようにする」「添付ファイルページへの直接アクセス時にトップページへ自動転送する」【HABONE】テーマ独自の機能を紹介します。

  • トップページ用|HABONE

    【HABONE】テーマの独自ショートコード

    【HABONE】テーマ独自のショートコードコンテンツの使い方、他テーマへの移行時や独自テーマで同じ機能を実装する方法を紹介します。

【HABONE BASE】へ個別に機能を追加する方法

【HABONE BASE】へ【HABONE】の機能を個別に追加する方法です

  • トップページ用|HABONE

    メディア一覧の表示をそのユーザーがアップロードしたものに限定する

    いろいろな人が投稿するサイトをWordPressで作成する時にちょっと困るのが、すべてのユーザーがアップロードした画像やファイルが使用できてしまうこと。簡単なコードを追加することで特定権限までのユーザーには自身のメディアのみ使用可能にする方法を紹介します。

  • トップページ用|HABONE

    文字装飾機能の追加

    【HABONE BASE】テーマへ、WordPress5.8時点では標準実装されていない、投稿編集画面での任意文字列に対する簡易装飾機能を追加する方法を紹介します

  • トップページ用|HABONE

    投稿編集画面へ挿入した再利用ブロックを編集できないようにする方法

    便利だけど誤って編集してしまうことが多いWordPressの再利用ブロック機能。【HABONE】テーマで搭載している、再利用ブロックの内容を編集画面上でご編集できないようにする機能を、他のテーマでも適用する方法を紹介します。

  • トップページ用|HABONE

    投稿本文の文末へ作者プロフィールを表示する

    【HABONE BASE】テーマで、投稿本文の下へカード形式の「この記事を書いた人(作者プロフィール)」を表示させる方法を紹介します。カスタマイズすれば項目の拡張や他テーマでの使用も可能です。

このページで行っていること

有料・無料に関わらず、WordPressのテーマでは、「デモなどを見て購入(入手)したのに、全然そんな風にならない」という声が多く聞かれます。対して制作者側からすると「WordPressのテーマはあくまでもWordPressで作ったコンテンツを表示させるものであり、コンテンツの作成に関しては使う人の能力次第」であり、デモページはいわば制作側で、そのテーマを使って一番いい状態にしたものであると言えます。

そこで最後におまけ情報として、今ご覧になっている【HABONE】テーマを使って作成したページに関する制作情報を紹介させていただきますので、貴サイト構築のヒントとなれば幸いです。

テンプレートは【HABONE】テーマで標準機能としている、固定ページの全幅テンプレートを使用し、サイドバーなしで作成しています

基本的に各コンテンツは、WordPress標準のブロックエディタで使える表現やブロックのみを使用しており、サイト例の部分でサイトのスクリーンショットを自動更新するために「Browser Screenshots」を使用している他は、特別なコンテンツを作るようなプラグイン等は使用していません。強いて工夫しているところと言えば、見出しタグをカバー画像(視差効果)の中に配置していること位でしょう。

本ページの構築に使用しているブロックは以下の通りです。

  • カバーブロック(画像+視差効果(固定表示))
  • 段落ブロック
  • リストブロック
  • カラムブロック(複数列表示)
  • スペーサーブロック(隙間の確保)
  • クエリーループブロック(末尾の投稿一覧表示で使用)
  • テーブルブロック(開発環境一覧で使用)
  • カスタムHTMLブロック(追加CSS用)

また、こちらも【HABONE】テーマのパソコンアクセス時とモバイルアクセス時のトップページを別にする機能を使って、パソコン表示時はこのページ(固定ページ)を、モバイル表示時は通常の新着投稿一覧を表示させるようにしています(スマホをお持ちの方は実際にトップページへアクセスいただくと切り替わっていることが確認いただけます)

追加CSS(デザインコード)は、このページのみ、また、上記理由から特にパソコン用・モバイル用を分ける必要がないため、カスタムHTMLブロックを使って、ページ内へ直接コードを記述しています。

ページ内へカスタムCSSを追加するには、カスタムHTMLブロックを挿入し、以下のように記述すれば適用可能です。そのページだけに適用させることができて重宝するのですが、あまり使われていないと思いますので、覚えておかれて損はないと思います。

<style>
追加CSSなどに記述するのと同じ方法でデザインコードをここへ記述していく
</style>

1点、カバーブロックを画面いっぱいまで広げるには、カバーブロックへ「cover-with-full」という追加CSSクラスを追加し、以下のデザインコードを適用すればOKです。

.cover-with-full {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}
.wp-block-cover__inner-container {
    max-width: 1240px;
}

以上、ざっくりとではありますが、本ページで特別なことをしていないのをご理解いただけますと幸いです