飲食店向けWordPressテーマ「InomaRestaurantBasic」で居酒屋のサイトを作りました。カスタマイズ方法を解説。プログラミング独学の軌跡プログラミング独学の軌跡ド素人がプログラミングを独学していく記録です。未解決テックアカデミーが初心者向け副業コースを始めました。テックアカデミーで無料メンター相談ができる。CSS初心者が稼ぐならココナラがおすすめ。クラウドワークスは難しい。飲食店向けWordPressテーマ「InomaRestaurantBasic」で居酒屋のサイトを作りました。カスタマイズ方法を解説。2021.10.22飲食店・レストラン向けWordpressテーマ「InomaRestaurantBasic」で居酒屋のホームページを作りました。それがこちら↓https://progstudy-trace.sakura.ne.jp/wpsub/progstudy-trace.sakura.ne.jp架空の居酒屋のホームページです。このテーマは作成者の方が基本的なカスタマイズ方法は解説されているのですが↓https://inomacreate.com/inomarestaurantbasic_custom/inomacreate.comこれよりさらにカスタマイズしたい方むけに、私が行ったカスタマイズ方法を書いていきます。飲食店向けワードプレス無料テーマ「InomaRestaurantBasic(イノマレストランベーシック)」で、居酒屋のホームページを作ってみた。シンプルで簡単に作れる、飲食店向けワードプレス無料テーマ「InomaRestaurantBasic(イノマレストランベーシック)」で、架空の居酒屋のホームページを作ってみました。「InomaRestaurantBasic(イノマレストランベーシック)」とは。「InomaRestaurantBasic」の特徴。子テーマはある?トップページのセクションを追加できる?「InomaRestaurantBasic」のカスタマイズ方法。ヘッダーの背景色・文字色を変える。電話番号の色を変える。グローバルナビのマウスホバー色を変える。メイン画像下の余白を消す。フッターの「copyright」を変える。「InomaRestaurantBasic」の特徴。カスタマイズ方法を書く前に、このテーマの特徴を書いておきます。子テーマはある?このテーマは子テーマが見当たりません。子テーマにCSSを書かないと、テーマがアップデートされた時にリセットされてしまうんじゃないか、と心配になりますよね。これについて問い合わたところ、やはり子テーマはなく、テーマをアップデートする予定もないので安心してCSSを書いて下さいとのことです。トップページのセクションを追加できる?このテーマのトップページは「コンセプト」「メニュー」「インフォメーション」「アクセス」の4つのセクションからできています。これを増やしたい場合ありますよね。「コース」とか「キャンペーン」とか。基本的には増やせないと思った方がいいでしょう。その分固定ページを追加してページ数を増やすという方法を取った方がいいと思います。してもセクションを増やしたい場合は、テーマファイルにHTMLを直書きするという手もあります。「InomaRestaurantBasic」のカスタマイズ方法。それではカスタマイズ方法を書いていきます。ヘッダーの背景色・文字色を変える。「外観」→「カスタマイズ」のカスタマイザーにはヘッダーの背景色・文字色を変える項目はありません。!important;}「カラーコード」の部分を好きなカラーコードに変えることで、ヘッダーの背景色や文字色を変えられます。背景色をつけると上に白い余白ができてしまうので、htmlに付いてる余白を消しています。電話番号の色を変える。電話番号の色を変えるには、同じく「外観」→「カスタマイズ」→「追加CSS」に.site_tel{color:カラーコード;}と書きます。「カラーコード」の部分を好きなカラーコードに変えてください。今回は#e6b422(黄色)にしておきます。すると、ヘッダーとフッターの電話番号だけ色が変わります。グローバルナビのマウスホバー色を変える。カスタマイザーでグローバルナビのマウスホバー色を変えることはできますが、そうすると下のボタンリンクのホバー色まで変わってしまいます。a:hover{background:カラーコード;}と書きます。今回はカラーコードを#555にしておきます。このテーマはデフォルトで背景色が全て白なのですが、もうちょっとにぎやかにしたい場合に背景画像を設定すると雰囲気がガラリと変わります。やり方は、先ほどと同じく「追加CSS」にコードを書いていきます。各セクションごとに背景画像を設定していきます。文字色も見やすい色に変えていきます。p{padding:5px;}/*インフォメーション*/#infomation{background-image:url(画像のURL);}/*アクセス*/#access{background-image:url(画像のURL);background-size:cover;color:カラーコード;}「画像のURL」のところに、背景画像にしたい画像のURLを入力してください。「カラーコード」のところを好きなカラーコードに変えることで、文字色を変えられます。box」とは、横に3つならんでいるそれぞれのアイテムです。メイン画像下の余白を消す。img{vertical-align:bottom;}ここで注意なのは、スマホで見たときだけ余白があるからといって、メディアクエリの中に書かないで下さい。実はパソコン画面にも余白があるんです。コンセプトページをカスタマイズするとわかります。フッターの「copyright」を変える。inomacreate.com」と書かれています↓これを自分のサイトの名前に変えたい場合に、カスタマイザーには変えるところがありません。「外観」→「テーマエディター」のところのfooter.phpを開きます。最後に下の「ファイルを更新」で完了。※追記テーマエディターで直接編集して保存しようとすると、このようにエラーがでるようになってしまいました↓これはWordPressのバージョンアップにより、チェック機能が付いてしまったのが原因らしいです。問題の状況:管理画面からテーマファイルを保存できないWordPressをバージョン4.9にアップデートしたところ、管理画面からテーマを編集して「ファイルを更新」ボタンを押すと以下のようなエラーが表示され、ファイルが保存できなくなりました。致www.iedebouya.comチェック機能を無効にすることもできるそうですが、大変そうなので、テーマエディターを直接編集するのはオススメしません。inomacreate.com」はCSSで表示させないのがいいと思います。以下のコードを「外観」→「カスタマイズ」→「追加CSS」に貼り付けて下さい。p{display:none;}トップページ完成。これでトップページのカスタマイズは完成です。「InomaRestaurantBasic」カスタマイズ続き。WordPressで、特定のページにだけCSSを適用させる方法。前回の記事の続きです。「こだわり」ページをカスタマイズしていきます。WordPressで、特定のページにだけCSSを適用させる方法。「こだわり」ページに背景画像を設定していきます。飲食店向けWordPressテーマ「InomaRestaurantBasic」で居酒屋のホームページを作りました&ココナラに出品しました。「InomaRestaurantBasic」カスタマイズ続き。WordPressで、特定のページにだけCSSを適用させる方法。ホームWordPressプロフィールプロフィール管理人のハルトです。