飲食店向けWordPressテーマ「InomaRestaurantBasic」で居酒屋のサイトを作りました。カスタマイズ方法を解説。

飲食店・レストラン向けWordpressテーマ「InomaRestaurantBasic」で居酒屋のホームページを作りました。

それがこちら↓

居酒屋 浜民

架空の居酒屋のホームページです。

 

このテーマは作成者の方が基本的なカスタマイズ方法は解説されているのですが↓

飲食店用WordPressテーマ「InomaRestaurantBasic」のインストールとカスタマイズ方法
こんにちは、koheiです。 飲食店用のWordPressテーマ「InomaRestaurantBasic」をリリースしました。 (ダウンロードしたい方

これよりさらにカスタマイズしたい方むけに、私が行ったカスタマイズ方法を書いていきます。

スポンサーリンク

「InomaRestaurantBasic」の特徴。

カスタマイズ方法を書く前に、このテーマの特徴を書いておきます。

子テーマはある?

このテーマは子テーマが見当たりません。

子テーマにCSSを書かないと、テーマがアップデートされた時にリセットされてしまうんじゃないか、と心配になりますよね。

これについて問い合わたところ、

やはり子テーマはなく、テーマをアップデートする予定もないので安心してCSSを書いて下さいとのことです。

トップページのセクションを追加できる?

このテーマのトップページは「コンセプト」「メニュー」「インフォメーション」「アクセス」の4つのセクションからできています。

これを増やしたい場合ありますよね。

例えば「コース」とか「キャンペーン」とか。

増やす方法を調べたところ、PHPのコードを書けば増やせるっぽいですが、かなり高度な感じだったので、

基本的には増やせないと思った方がいいでしょう。

 

その分固定ページを追加してページ数を増やすという方法を取った方がいいと思います。

どうしてもセクションを増やしたい場合は、テーマファイルにHTMLを直書きするという手もあります。

「InomaRestaurantBasic」のカスタマイズ方法。

それではカスタマイズ方法を書いていきます。

ヘッダーの背景色・文字色を変える。

「外観」→「カスタマイズ」のカスタマイザーにはヘッダーの背景色・文字色を変える項目はありません。

なので、「追加CSS」に書いていきます↓

コードはこうです↓

#top{
background-color:black;
color:#fff;
}

電話番号の色を変える。

同じく、「外観」→「カスタマイズ」→「追加CSS」に

.site_tel{
color:#e6b422;
}

と書きます。

すると、ヘッダーとフッターの電話番号だけ色が変わります。

 

グローバルナビのマウスホバー色を変える。

カスタマイザーでグローバルナビのマウスホバー色を変えることはできますが、そうすると下のボタンリンクのホバー色まで変わってしまいます。

グローバルナビのマウスホバー色だけ変えたい場合は、「追加CSS」に

nav li a:hover{
background:#555;
}

と書きます。

背景画像を変える。

このテーマはデフォルトで背景色が全て白なのですが、

もうちょっとにぎやかにしたい場合に背景画像を設定すると雰囲気がガラリと変わります。

やり方は、先ほどと同じく「追加CSS」にコードを書いていきます。

このテーマのトップページは

  • コンセプト(#concept)
  • メニュー(#menu)
  • インフォメーション(#infomation)
  • アクセス(#access)

とセクションが別れていて、

各セクションごとに背景画像を設定していきます。

文字色も見やすい色に変えていきます。

/*コンセプト*/
#concept{
background-image:url(画像のURL);
background-size:cover;
color:#fff;
margin-bottom:0;
padding-bottom:40px;
}
/*メニュー*/
#menu{
background-image:url(画像のURL);
}
.menu_box{
background-color:#fff;
}
.menu_box h3{
padding:5px;
}
.menu_box p{
padding:5px;
}
/*インフォメーション*/
#infomation{
background-image:url(画像のURL);
}
/*アクセス*/
#access{
background-image:url(画像のURL);
background-size:cover;
color:#fff;
}

メニューセクションにある「menu box」とは、横に3つならんでいるそれぞれのアイテムです。

メイン画像下の余白を消す。

スマホで見ると、メイン画像の下に変な余白ができてます↓

これを消すために以下のコードを「追加CSS」に書きます↓

#main_image img{
vertical-align:bottom;
}

ここで注意なのは、スマホで見たときだけ余白があるからといって、メディアクエリの中に書かないで下さい。

実はパソコン画面にも余白があるんです。

コンセプトページをカスタマイズするとわかります。

フッターの「copyright」を変える。

このテーマはフッターにデフォルトで「Copyright(c) inomacreate.com」と書かれています↓

これを自分のサイトの名前に変えたい場合に、カスタマイザーには変えるところがありません。

ではどうやって変えるかというと、

「外観」→「テーマエディター」のところのfooter.phpを開きます。

そこの、この部分を直接書き換えます↓

最後に下の「ファイルを更新」で完了。

トップページ完成。

これでトップページのカスタマイズは完成です。

あとコンセプトページ・メニューページのカスタマイズもあるのですが、長くなってしまうのでそれは次回にしようと思います。

タイトルとURLをコピーしました