こんにちは。このブログの管理者のハルトと申します。
カフェ＆レストラン向けWordPress無料テーマ「Bayside Cafe」を作りました。
デモサイトはこちら。
使い方や特徴を解説していきます。
テーマのダウンロード
テーマの最新版のダウンロードはこちらです↓（無料テーマです）
テーマの使用範囲について
このテーマの使用範囲については、特に制限はありません。
ご自身のホームページを作ったり、案件で使ったり、ご自由に使っていただいて結構です。
使い方・カスタマイズ方法
基本的な使い方・カスタマイズ方法は、version1の動画で解説しています↓
こちらはversion3で追加になった部分↓
最新版をインストールし直すには、普通に「外観」→「テーマ」→「テーマを追加」→「テーマをアップロード」から、ダウンロードした最新版のテーマフォルダ（Zipフォルダのまま）をインストールし、有効化してください。古いテーマは削除しちゃって大丈夫です。
ただし、もしテーマファイルを直接いじっていたり、追加CSSを書いている場合は、リセットされてしまう可能性があるのでメモ帳などにコピペしてバックアップをとっておいてください。
また、もし色が消えてしまったり、ボタンが消えてしまった場合は、この記事の下の方に解決法を書いてます。
テーマの特徴
テーマの特徴を簡単に解説していきます。
画面いっぱいに広がるファーストビュー＆ふわっと切り替わるスライダー
一番の特徴は、パソコンでもタブレットでもスマホでも画面いっぱいに広がるファーストビューです。
そして画像がふわっと切り替わるスライダーになってます。
スライダー画像はお好きなものを3枚指定できます。
シンプルなデザイン
見やすくシンプルなデザインになっています。
コンセプト部分だけ、ずらしレイアウトを使っています。
画像やテキスト、色は簡単に変えられます。
また、画像は下からふわっと現れるアニメーション付きです。
カフェ＆レストランに必要な項目は最初からそろっている
トップページの構成は、
- コンセプト
- メニュー
- こだわり
- ギャラリー（version2以降）
- お知らせ一覧
- アクセス
と、カフェやレストランに必要な項目がそろってます。
カスタマイズ方法が簡単
ワードプレステーマなので、もちろんサイト内の画像、テキスト、色などは自由に変えられます。
「外観」→「カスタマイズ」から変えてください。
注意点
もしかしたら相性の悪いプラグインがあり、レイアウトが崩れたり不具合が出てしまうかもしれません。
一応いくつかのプラグインを入れてみましたが、その際は問題ありませんでした。
もし不具合が出ても、プラグインを無効化すれば元に戻りますので心配はいりません。
不具合について
不具合…というか仕様上しょうがないんですが、いくつか見つかりましたので載せておきます。
コンセプトテキストやフッターなどの背景色が付いてない。ボタンが消えた。
テーマを新規インストールした際や、最新版をインストールし直した際に、コンセプトテキストやフッターなどの背景色がついておらず、このようになってしまっている場合があります↓ （カスタマイズのプレビュー画面では色が付いているのに、実際のサイトでは色が付いてない。）
また、ボタンの色も付いておらず、文字色も白なのでボタン自体が消えてしまったように見えてしまいます。
その場合、ダッシュボードの「外観」→「カスタマイズ」→「色」から、いったん色を選びなおして「公開」を押してください。（デフォルトの色に戻したい場合は「デフォルト」を押せば戻ります。）
そうすると背景色がついて正しい表示になると思います↓
なんでこうなってしまうのか、普通にテーマ作ってるんですけどね…。原因がわかりません。ワードプレスの仕様上しょうがないんでしょうか？他のテーマを作ってる方々はどうやってるんでしょうかね？
「こだわり」エリアの背景画像が、固定背景にならない。
iPhoneやiPadなど、iOSではトップページの「こだわり」エリアが固定背景にならず、画像がアップになってしまうようです。
原因としては、当テーマは固定背景をCSSのbackground-attachment:fixed;で実装しているのですが、どうやらこのCSSがiOSでは対応していないからのようです↓
固定背景をiOSでも実現する方法（background-attachment:fixedがiOSで効かない件） | BringFlower
対策をいろいろ考えたのですが、iOSでも固定背景にするにはテーマのCSSを結構複雑なものに変えないといけないみたいなので、それは難しいです。
なので「iOS」での表示が気になる方はbackground-attachment:fixed（固定背景）を解除するしかありません。
下のCSSを「外観」→「カスタマイズ」→「追加CSS」に書いてください↓
.obsession{
background-attachment:scroll;
}古いバージョンについて
現在このテーマはversion3が最新版ですが、一応古いバージョンもダウンロードできるように、過去記事を載せておきます。
どうやって作ったのかなども書いているので、エンジニアの方などはぜひご覧ください↓
カフェ＆レストラン向けWordPress無料テーマ「Bayside Cafe」version1を作りました。
カフェ＆レストラン向けWordPressテーマ「Bayside Cafe」version2を作りました。
カフェ＆レストラン向けWordPressテーマ「Bayside Cafe」version3を作りました。
まとめ。
カフェ＆レストラン向けWordPress無料テーマ「Bayside Cafe」を作りました。
シンプルで見やすく、「コンセプト」「メニュー」「こだわり」「ギャラリー」（version2以降）「お知らせ一覧」「アクセス」と、カフェやレストランに必要な項目がそろってます。
- 「シンプルなホームページを作りたい。」
- 「簡単に作りたい」
という方におすすめです。
よろしければ使ってみてください。