Hitoma
TEL 000-0000-0000
平日8:00~17:00
土日祝日休み
Hitoma

シンプルな無料Wordpressテーマです。

無料WordPressテーマ『Hitoma』とは?

まずは試してみてください。
ダウンロードはこちらから。

2020年10月05日 リリース

『Hitoma』は無料のWordpressテーマです。設定項目が少なく、簡単に使えてシンプルでミニマルなデザインのテーマとなっています。ブログ機能は使えないようになっており、1ページで基本的な情報すべてを見せるように作られているのが大きな特徴で、ブログを必要としない商店や工場、中小企業などをターゲットとしています。電話番号や地図といった情報は必要なければ簡単に非表示にすることができます。(ブログ機能がなくて不安だという方もいらっしゃると思いますが、ブログ機能がなくともページを更新することによってお客様への告知が可能です。)

カスタマイズは容易で、プレビュー画面を見ながらロゴ画像やタイトル、背景色、各種パーツの設定を変更可能です。

コンテンツ(白背景で文章が書かれている部分)は最大で10個まで表示させることができます。もちろん、これらをひとつも表示させないようにすることも可能です。

レスポンシブデザインとなっており、パソコンやタブレット、スマートフォンなどのディスプレイサイズの違う端末で見ても綺麗に表示されます。スマートフォンで見たら表示が小さくて見づらいということはありません。

レスポンシブ表示例
左からパソコン、タブレット、スマートフォンでの表示例

もちろん当ページも『Hitoma』テーマを利用して構築しています。

どのような方に最適なテーマか?

  • 飲食店や商店、町工場、中小企業のホームページを作りたい
  • とりあえず形だけでもホームページを持ちたい
  • ちょっとしたランディングページを作りたい
  • 商品の紹介や告知ページを作りたい
  • 掲載したい情報が少ない(いまはとりあえず1ページで十分)
  • ブログは必要ない
  • 設定は簡単な方が良い
  • WordPressを使用しなければならない事情がある、あるいはその方が都合が良い

そんなあなたにぴったりなのが無料Wordpressテーマ『Hitoma』です。

※当テーマはブラウザEdge、InternetExplorer11、Chrome、Firefox、Safari(MacとiPhone)、WordPress ver.5で動作確認しております。

サンプルホームページ

実際に『Hitoma』で作ったホームページのサンプルです。どのようなホームページが簡単に作成できるのか参考にしてください。

パン屋

サンプルサイト パン屋

企業(角丸サンプル)

サンプルサイト 株式会社HITOMA

各ブロックを角丸にするために、テーマの『カスタマイズ』ページにある『追加CSS』に以下を設定

.main_image {
    border-radius: 10px;
}

.contents-container {
    border-radius: 10px;
}

.map {
    border-radius: 10px;
}

上記サンプルサイトを作成するために下記、フリー画像を使わせて頂きました。制作者の方々、ありがとうございます。
(※これらの画像はHitomaテーマには含まれていません。)

●パン屋のサンプルサイトで使わせて頂いた画像
Photos by Kate Remmer, Vladimir Kudinov, Hans Vivek, Carly Jayne, Jørgen Håland, Miti, Wesual Click on Unsplash

●企業のサンプルサイトで使わせて頂いた画像
Photos by Udayaditya Barua, Tyler Franta on Unsplash
ハンコでアソブ kids 01

テーマの設定方法

最初に

管理画面の『設定 > 表示設定』で「ホームページの表示」が「固定ページ」に設定されている場合は「最新の投稿」に変更してください。

これからスクリーンショット付きで設定方法を説明していきますが、基本的に固定ページを作成してそれをテーマのカスタマイズ画面で紐付ける作業をおこなうだけです。

テーマのインストール

設定:テーマの新規追加
『外観 > テーマ』から「新規追加」
設定:テーマのアップロードを選択
「テーマのアップロード」を選択
設定:インストールするテーマを選択
「ファイルを選択」

管理画面の『外観 > テーマ』から「新規追加」を選択してください。「テーマのアップロード」を選択したら「ファイルを選択」をクリック。ダウンロードした『Hitoma』のファイルをそのまま選択して「開く」を押したら「今すぐインストール」をクリックしてください。アップロードされるので「有効化」をクリックすればテーマのインストールが完了です。

FTPソフトなどを使って直接テーマファイルを解答すると出てくるhitomaディレクトリをWordPressのインストールされている/wp-content/themesディレクトリへアップロードしてもインストールできます。

テーマのカスタマイズ

設定:ダッシュボードからカスタマイザー画面へ
『外観 > カスタマイズ』
設定:カスタマイザー画面
カスタマイズ画面

管理画面の『外観 > カスタマイズ』を選択してください。そこで『Hitoma』の設定ができるようになっています。右のプレビュー画面を見ながら設定ができるので簡単です。

ロゴやメインイメージ、電話番号など、ほとんどの項目は必要でなければ表示させないようにすることができます。

コンテンツの設定

設定:ダッシュボードでスラッグを表示させる
『固定ページ > 固定ページ一覧』画面でのスラッグ確認方法
設定:固定ページ作成画面でのスラッグ確認方法
「固定ページ」作成画面でのスラッグ確認・編集方法
設定:カスタマイザーでスラッグ入力
『外観 > カスタマイズ > コンテンツ 』でスラッグ入力

ここで言う「コンテンツ」は中身の記事のことを指しています。

『外観 > カスタマイズ > コンテンツ 』 にある「コンテンツエリア」には自分で作成した「固定ページ」を割り当てることができます。

まずは管理画面『固定ページ > 固定ページ一覧』を選択後、「新規追加」をクリック。タイトルと記事本文を入力後、「公開」をクリックして「固定ページ」を作成してください。(公開済みになっている「固定ページ」しか「コンテンツエリア」には表示できません。)再び『固定ページ > 固定ページ一覧』へ戻ると、先ほど作成した「固定ページ」と一緒に右側に「スラッグ」が表示されていますので、そちらをコピーしてください。そして、『外観 > カスタマイズ』から「コンテンツ」をクリックして、「コンテンツ1のスラッグ」に先ほどコピーした「スラッグ」をペーストすると「固定ページ」「コンテンツ」に割り当てられ画面に表示されるようになります。

「プライバシーポリシーのスラッグ」を設定すると、フッター部分(最下段)にリンクが表示されるようになり、別ページでプライバシーポリシーを表示させることができるようになります。フッター部分に表示されるリンクテキストは「固定ページ」の題名部分になっていますので、そこを変更すればプライバシーポリシー以外にもご利用いただけます。

※Ver.4以前では「スラッグ」は、固定ページの編集画面右上部にある表示オプションをクリックすると出てくる「スラッグ」にチェックを入れるとページ下部に表示されます。 この値を『外観 > カスタマイズ > コンテンツエリア』で入力してください。

「コンテンツ」は最大で10個まで表示することができます。

地図

『外観 > カスタマイズ > 地図』では、「コンテンツエリア」と同じように「固定ページ」を表示させることができます。(地図画像一枚だけを表示させるということもできます。)
ここを上手に利用すれば、Googleマップや住所などといった色々な情報を下段に配置することができます。

テーマのアップデート方法

『Hitoma』は現段階で自動アップデートに対応していません。そのため、定期的に当サイトへアップデートしているのか確認しにきてくださるようお願いします。新バージョンのファイルが公開されていた場合にはすぐさまアップデートしてください。

設定:テーマのアップデートのためにFTPを使う
FTPソフト「FileZilla

バージョンアップの方法は簡単です。新バージョンのテーマファイルをダウンロードしたら解凍してください。そして中に入っているhitomaディレクトリをFTPソフトなどを使い、WordPressのインストールされている/wp-content/themesディレクトリへアップロードすれば完了です。

おすすめのプラグイン

Contact Form 7

当サイトではコンタクトフォームの作成にContact Form 7プラグインを利用させていただいております。設定もわかりやすく簡単に使えて素晴らしいプラグインですので、もしも『Hitoma』テーマにコンタクトフォームを追加したい場合は利用してみてはいかがでしょうか。

Advanced Gutenberg

ページ編集に機能追加するプラグインです。標準のGutenbergエディタでは使えないアコーディオンやタブなどのブロックを追加することができます。他にも使用できるブロックが大量に追加され、それを使えば大幅にページの表現力を高めることができるでしょう。これ以外にも似たようなプラグインは沢山ありますので、ページの表現力を上げるためにもご利用してみてはいかがでしょうか?

Elementor Website Builder

Advanced Gutenbergを更に高機能にしたようなページ編集用のプラグインです。機能がありすぎて全てを書くことはできませんが、横に表示された画像をスライドして切り替えられるカルーセルなどを設置可能です。本格的にページの見た目をカスタマイズしていきたいという方は使ってみてはいかがでしょうか。紹介しているWebサイトも豊富ですので使い方に困ることもないでしょう。

その他テーマの簡易カスタマイズ方法

1.和風な見た目にするためにテキストをゴシック体から明朝体にする

テーマの『カスタマイズ』ページにある『追加CSS』に以下を設定

body {
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

2.各コンテンツの角丸化

テーマの『カスタマイズ』ページにある『追加CSS』に以下を設定

.main_image {     
    border-radius: 10px;
}

.contents-container {
    border-radius: 10px;
}

.map {
    border-radius: 10px;
}

良くある質問

現在作成中です。

Q. 『Hitoma』という名前の由来は?

「一間」から来ており、小さくても必要十分な部屋であって欲しいという願いが込められています。 そのうち大きな部屋に引っ越すまでの仮住まいとしてもお使いくださればとも思い、このような名前をつけました。

Q.トップページにひとつだけしか固定ページが表示されない

管理画面の『設定 > 表示設定』で「ホームページの表示」が「固定ページ」に設定されている場合は「最新の投稿」に変更してください。
これで直る場合があります。

Q. iPhoneやIE11で画像が適切に表示されない

Q&A iPhoneやIE11で画像が適切に表示されない
画像サイズのセット

iPhoneで横位置にしたら画像が小さく表示されてしまうという場合。詳しく書くと、iPhoneの縦位置(Portraitモード)で表示領域の横幅いっぱいに画像が表示されていたのに、横位置 (Landscapeモード)にしたら画像が小さくなってしまったという場合には、そうしたくない画像を選択して右側に表示されるブロックの設定で「100%」にするか、画像のサイズをセットしてみてください。
ただ、この設定をするとInternetExplorer11で画像がはみ出す、拡大縮小されて表示されないなどの現象が起こりますので、『外観 > カスタマイズ > 追加 CSS』にて


.is-resized {
	display: block !important;
}

を追加してください。

ただ、これをやるとどこかで表示がおかしくなったりと副作用がでる可能性がありますので自分の環境では問題ないか確認してください。

あるいはクラシックエディタで画像をセットして頂くと問題なく表示されるようです。また、HTMLがわかる方であれば直接HTML編集をしてimgタグにwidthheightを入力しても問題ないかと思います。

わかる方向きに書きますと、Gutenbergエディタを使いそのまま画像を投稿するとimgタグにwidthheightが付加されません。そのため上述したような状態になります。また、「100%」にしたり画像サイズを指定すると、is-resizedというクラスが付きdisplay: table;が設定されます。これによってInternetExplorer11だと画像がはみ出したりすることになるようです。

現在、他に対処法がないか模索中です。
最初からテーマ本体でis-resizedクラスを上書きするという手段もありますが、どこかで副作用が出る可能性があるのでやめています。

ちなみに当サイトではどちらも設定していません。
(2019年2月11日)

お願い

『Hitoma』テーマは現段階では自動更新が効きません。Wordpressの公式テーマディレクトリへ登録するにはガイドラインを満たす必要があります。ですが、『Hitoma』テーマはブログ機能を省き、固定ページを用いて1ページに表示させるという特殊な仕様のためにそれを満たすことができません。自サイトでホストすることも検討している段階におりますが、現段階ではその機能もつけていませんので、定期的に当サイトをチェックしていただき、『Hitoma』テーマがバージョンアップされてるかどうか確認してくださるようお願いします。

仕様上、レイアウト要素ブロックの「改ページ」と「続きを読む」などの一部ブロックも対応していませんのでご了承ください。

免責事項

『Hitoma』は無償でお使いいただけますが動作の保証は一切しておりません。当テーマを利用して発生する不具合・トラブル・不利益については当サイトはいかなる責任も負わないものとします。 制作者の考えに基づき仕様が変わる可能性もあります。

問い合わせを頂いても返信が遅くなってしまったり、最悪できなかったりすることがあります旨ご了承くだされば幸いです。

自己責任にてお使いください。

バージョン履歴

バージョン名をクリックすると過去バージョンをダウンロードできます。

ver1.0.3(2020年10月05日)
文章が改行されないケースがあった問題を修正

ver1.0.2(2019年2月25日)
カラムブロックを使った場合に表示がおかしくなる問題を修正
画像中央配置を使うとおかしくなる問題を修正

ver1.0.1(2019年2月25日)
ログアウトボタンが表示されない問題を修正

ver1.0.0 (2019年2月11日)
最初のリリース

予定

各種カスタマイズ例の紹介
(例:背景を黒などにした際におかしくないよう、上へ戻るボタンなどコンテンツエリア外部にあるパーツ類を白くする方法など)

ライセンス

『Hitoma』はWordPressのテーマです。そのためライセンスはGPLとなっております。商用・非商用どのようなサイトでもご利用いただけます。

メールでのお問い合わせ

ご意見、ご要望、バグ報告などはこちらからお送りいただけますようお願いいたします。

    東京都○○区○○ 1-2-3 ○○ビル2F

    東京メトロ半蔵門線・○○駅B2出口より徒歩5分
    都営地下鉄大江戸線・○○駅A3出口より徒歩10分

    OPEN 12:00~
    CLOSE 21:00

    ※当ページに載せている電話番号や住所などはサンプルであり、実在する情報ではありません。