Twenty Seventeenをカスタマイズ【美容院のサイト作成】

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 0

かなり時間が空いてしまいました。

WordPress公式テーマ、Twenty Seventeenを使用した、美容院のサイト作成です。

現在の状態

とりあえずはトップページの挨拶分、メニュー表、地図・電話番号などを一番最初に作成しました。

自己紹介も作成しましたが、メニュー表と同じく、簡単な表と写真を組み合わせただけのものです。

ネイルのページがあるので、そこは今までのネイル写真をたくさん並べてあります。

新着情報は結局、Twitterを取り込む形にしました。

こうすればWordPress自体を触れなくても、Twitterを更新すれば、一応はホームページを見てくれた方が新しい情報を見ることができます。

ここら辺も、後々時間を作って、詳しい記事を書きたいとは思っています。

デザインを少し変更

少しデザイン的に変更したい箇所がありますので、そのための子テーマをつくります。

子テーマとはなにかと思いますが、メインで使用しているTwenty Seventeenのデザインを一部上書き変更するのに必要になってきます。

直接Twenty Seventeenの各パラメータを変更してもいいのですが、テーマのアップデートで変更箇所も元に戻ってしまいます。

これを防ぐために別ファイルを作り、その内容のみ親テーマに反映させることで、アップデートの恩恵を受けつつ、変更箇所はリセットされないようにします。

子テーマ作成手順

空の新規フォルダを作り、「twentyseventeen_child」とします。

そのファイルの中に、2つの空ファイルを作り、「style.css」と「functions.php」とします。

メモ帳でも出来ますが、TeraPadなど、フリーのテキストエディターを使用したほうがやりやすいです。

「style.css」と「functions.php」には、それぞれ以下のように記述します。

「style.css」

このうち、”Theme Name: twentyseventeen_child”と”Template: twentyseventeen”は必須項目です。

「functions.php」

これはコピペでOK。

そしてこれらをtwentyseventeenと同じ階層におき、WordPressの「外観」→「テーマ」から、作成した子テーマを選択しましょう。

初め子テーマのCSSが読み込まれなくてどうしようかと思いましたが、なんてことない、「functions.php」を「funcions.php」と書き間違いしていただけでした。

まぁ僕みたいな人は滅多にいないと思いますが、気を付けてください。

注意点

このテーマは、ヘッダー画像や、トップページの設定等も「外観」→「カスタマイズ」で簡単に変更できるぶん、あとで子テーマに変えると、その辺はリセットされてしまいます。

早めに子テーマを作り、いろいろと変更するようにしましょう。

ちなみに今回の公式テーマから、「外観」→「カスタマイズ」の中に、「追加CSS」という項目が追加され、ここにCSSを書くことによって、テーマに反映できるみたいです。

ただせっかく子テーマを作成したので、先ほどの「style.css」に書き足してしまいましょう。

私が使用しているロリポップ!なら、ロリポップ!FTPというWEBツールで、アップロードしたファイルを簡単に編集できます。

変更点

簡単なところで以下の2点を変更しました。

これで、トップページのスクロールする画像の縦幅を半分にしています。

こちらは横幅の指定です。少し狭かったので、広げています。

これからの変更点

あとは固定ページ(トップページ以外)のスクロールする画像の縦幅も調節したいのですが、うまくいかず・・・

ここは単純なCSSの追加だけではうまくいかないのかもしれません。

CSS+HTMLの合わせ技でいくしかないのかな~と思いつつも、いい方法ないかな~といろんなサイトを巡っている最中です。

スポンサーリンク
レクタングル広告(大)
レクタングル広告(大)

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク
レクタングル広告(大)