※この記事は2017/3/29日時点のバージョン4.7.3のワードプレスを使用したスクリーンショットを利用しております。使用するテーマBakes And Cakesのバージョンは1.1.0です。
Bakes And Cakesとは
ワードプレスの無料テーマです。スライダーやセクションの設定などが無料で利用でき、組み合わせの仕方によって、企業・サービス・個人など枠にとらわれないページの作成が可能です。主としての色合いがピンクにはなっていますし、名前も可愛らしいですが、実際には柔軟で強力なカスタマイズ機能のある素敵なテーマです。
インストール
それでは早速ですが、ワードプレスのテーマ「Bakes And Cakes」のインストール手順についてご説明します。
まずはBakes And Cakesをダウンロードします。
上記URLにアクセスすると、スクリーンショットのような形で、ワードプレスのテーマ「Bakes And Cakes」のダウンロードページが表示されます。ここではページ右側「ダウンロード」をクリックして、パソコンに保存します。
なお、保存する場所については任意ですが「bakes-and-cakes.1.1.0.zip」は.zip形式のまま解凍しないようにしましょう。ワードプレスでテーマをインストールする時は、.zip形式で圧縮されたままアップロードしてインストールすることが可能となっております。
次は、ワードプレスにログインして、ダッシュボードを表示します。ダッシュボードの左側の外観をクリックします。メニューが開くので、その中のテーマをクリックします。
こちらはまだワードプレスにテーマをインストールしていない状態のスクリーンショットです。画面左上の「テーマ」という文字列の右側に「新規追加」というボタンがあるので、そこをクリックします。
画面が移動したら、また画面左上の「テーマを追加」の文字列の右側にある「テーマのアップロード」というボタンをクリックします。
テーマのアップロードをクリックすると、上記のようにファイルの選択を促す表示が出るので、「ファイルを選択」をクリックします。ダイアログが開きますので、先ほどダウンロードした「bakes-and-cakes.1.1.0.zip」を選択します。
ファイルが選択されると、上記のように「ファイルを選択」の右側に「bakes-and-cakes.1.1.0.zip」が表示されます。表示されたことを確認して、その右側の「今すぐインストール」をクリックします。
「今すぐインストール」をクリックすると、上記のような画面になります。次は青文字で下線のある「有効化」をクリックします。
上記のように画面が移動します。ここまでが、ワードプレスでテーマをインストールする方法と、インストールしたテーマを有効化する手順となっております。
管理画面に戻り、画面の左上のサイト名にカーソルを合わせるとサイトを表示と出るので、それをクリックします。すると、下記のように表示されます。何もカスタマイズしていない状態の表示です。Bakes And Cakesのダウンロードページにあったものとは配置やサムネイルなどが違いますね。これはテーマの設定をする中で少しずつ近づくようになります。
こちらはワードプレスのテーマ「Twenty Seventeen」を有効化した場合のサイトのトップページです。こうしてテーマごとに違いがあることが理解出来ます。
次は、ワードプレスのダッシュボードに戻り、画面左側の「外観」をクリックします。そして、Bakes And Cakesのテーマのサムネイルにカーソルを合わせます。「テーマの詳細」という表示が出ますので、クリックしてみましょう。
Bakes And Cakesについての説明が表示されます。ここで確認しておくのは画面右下の部分です。
“”タグ: ブログ, 1列, 2列, 右サイドバー, フッターウィジェット, カスタム背景, カスタムメニュー, アイキャッチ画像ヘッダー, アイキャッチ画像, 投稿フォーマット, スレッドコメント, 翻訳対応, 全幅テンプレート, テーマオプション, フード & ドリンク, e コマース, カスタムカラー, カスタムロゴ””
上記の引用の部分がテーマごとに違いがあります。これがBakes And Cakesの主要なデザインの要素・機能・設定することが可能な項目となっています。これらを確認することで、テーマをインストールした時に、どのようなものがあるのか、すぐに確認することが可能です。
外観・カスタマイズ
次はインストールしたテーマのカスタマイズをします。先ほどと同じように、ダッシュボードの左側の外観をクリックして、「有効化：Bakes And Cakes」の文字列の右側にある青地白文字の「カスタマイズ」をクリックします。
カスタマイズ
カスタマイズをクリックすると、上記のような画面に移動します。これがワードプレスのテーマ「Bakes And Cakes」をカスタマイズする画面です。一般的にカスタマイズと聞くと、もともとあるプログラムやコードを改変したり、改造するイメージがありますが、ワードプレスでは表示される文字列や配置など、テーマごとに設定できる項目を変更することを意味します。
ワードプレスでテーマのカスタマイズをするというのはWeb上で、実際にサイトをどのように表示したいのかを自分自身で自由に設定することです。
参照リンク
Bakes and Cakesについての情報のリンクが表示されます。デモ画面が参照できるのは嬉しいですね。
- デモを表示
- ドキュメントを表示
- テーマ情報
- サポートチケット
- このテーマを評価する
- WordPress のテーマをもっと見る
ドキュメントを表示を見てみましょう。
英語表記なのでGoogle翻訳してみます。
このように英語がわからなくても、Google翻訳などでページごと日本語化することで、単語の意味や使い方などを理解することが可能です。ぜひ、参考にしてください。その他の項目についてはご自身で翻訳して、確認しておいてください。カスタマイズのトップに戻ります。
デフォルト設定
デフォルト設定ではサイトの基本的な設定ができます。
- サイト基本情報
- 色
- 背景画像
- 固定フロントページ
サイト基本情報
サイト基本情報をクリックしてみましょう。
上記の画面に移動しました。ここがサイト名・タイトルやキャッチフレーズ、ロゴを設定することが可能です。項目についてひとつひとつ見てみましょう。
ロゴ
ロゴについてはサイトの顔、視覚的なキャッチーな部分です。とても大事な要素であると言えますね。
サイトのタイトル、キャッチフレーズ
サイトのタイトルは名前、キャッチフレーズは簡単な自己紹介です。ここは何をするところなの？どんなサービスなの？その疑問にすぐに答えることで、ユーザーに安心感を与えることが出来ます。
サイトアイコン
「サイトアイコンはサイトのアプリとブラウザーのアイコンとして使用されます。アイコンは正方形で、幅・高さともに 512 ピクセル以上である必要があります。
画像が選択されていません」
こちらについてはワードプレスのコミュニティなどで表示されるアバターだと考えて頂ければわかりやすいですね。きちんと設定しておくことで、見に来たユーザーに覚えてもらいやすくなります。必ず設定するようにしましょう。
色
次は色の項目をクリックします。クリック後は下記の画面が表示されます。
ここでは背景色の設定が出来ますね。背景色については全体的なデザインのバランスの重要な要素です。サイトの雰囲気を考えて配色することを考えましょう。一つ前の画面に戻ります。
背景画像
次は背景画像をクリックします。クリックすると下記の画面が表示されます。ここでは背景画像の設定などを行うことができます。設定項目を表示するために試しに無料画像にて背景画像を設定します。
下記のようにアップロードされたものをクリックし画像の選択を押します。
下記のように左側サイドバーに変化が出ます。プリセットをフルスクリーンにしてみました。
元に戻して、一つ前の画面に戻ります。
固定フロントページ
固定フロントページをクリックすると下記の画面に遷移します。固定フロントページとはブログの投稿をサイトのトップにするか、固定ページにするかを選ぶ項目です。現在はフロントページは固定ページに設定しています。
最新の投稿に変更してみました。下記のように表示されます。
カスタマイズのトップに戻ります。
スライダー設定
スライダー設定をクリックすると下記の画面が表示されます。
- ホームページ・スライダーを有効にする
- スライダーの自動移行を有効にする
- スライダー・ループを有効にする
- スライダー・コントロールを有効にする
- スライダー・キャプションを有効にする
- スライダー・アニメーションを選択
スライダー速度
1枚のスライダーの表示時間です。初期値は7000ミリ秒です。
アニメーション速度
次の画面への切り替えが開始してから終えるまでに要する時間です。初期値は600ミリ秒です。時間を大きくすればするほど、ゆっくりした動きになります。
スライダー・カテゴリーを選択
投稿記事のカテゴリーを選択します。選択したカテゴリーに属する投稿記事のアイキャッチ画像がスライダーに表示されます。従って、このテーマを利用する場合はアイキャッチ画像のサイズを大きめにしましょう。
下記は「ホームページ・スライダーを有効にする」にチェックを入れ、スライダー・カテゴリーを選択を「ライフスタイル」というものを選びました（ライフスタイルというカテゴリーは事前に用意しておいたものです。テーマ特有のものではありません。）。
その他の項目についてもサイトで伝えたい内容やジャンルによって、スライダーの設定をするようにしましょう。
先ほども書きましたがスライダーを表示させるにはカテゴリーと投稿時にアイキャッチ画像を選択する必要があります。記事内に画像があるだけでは動作しないので注意しましょう。
この右下の部分がアイキャッチ画像の設定項目です。
カスタマイズのトップに戻ります。
ホームページ設定
ホームページの設定に入る前に、固定ページにて下記の設定を行います。トップページ用の固定ページを作成するためです。右側のサイドバーのテンプレートをホームページに変更して更新します。
次に固定ページの設定を変更します。
先ほど、テンプレートを「ホームページ」にしたページをフロントページにすると、ホームページ設定が利用できるようになります。ホームページ設定に入る前の前準備でした。
カスタマイズのホームページ設定をクリックしてみましょう。
- 弊社についてセクション
- おすすめの製品セクション
- イベントセクション
- スタッフ紹介セクション
- お客様の声セクション
- ブログ・セクション
- プロモーション用ブロック・セクション
- Googleマップウィジェット
かなり豊富に設定することが可能ですね。ここでは下記の3つ設定してみます。
- 弊社についてセクション
- イベントセクション
- ブログ・セクション
スライダーと固定ページ、会社概要や投稿してある記事が表示されました（これらの固定ページは予め用意しておいたものです。）。また、テンプレートを「ホームページ」にした固定ページとセクションに追加する固定ページが被っていても大丈夫です。
これらはコンテンツの種類やサイトの方向性で有効化するようにしましょう。項目ごとにチェックをつけて、カテゴリーか固定ページを選ぶだけなので簡単です。セクションを自由に扱うことで、コンテンツの見え方が全く変わってきます。この部分については特に自分自身で設定を試し、どれが一番見栄えがよくなるのかを考えてみましょう。
このまま保存してカスタマイズのトップに戻ります。
パンくずリスト設定
パンくずリストをクリックすると下記の画面が表示されます。最初はチェックが外れているので、パンくずリストを有効にするにチェックを入れてみましょう。そして記事などの個別ページに移動すると下記のように表示されます。
パンくずリストについてはユーザーが迷子になった時に目安とすることがあります。ユーザビリティーが高くなりますので利用する価値は十分です。ユーザビリティの向上と導線がしっかりしていることはSEOにも効果があるとも言われていますので、なるべくONにしておきましょう。
カスタマイズのトップに戻ります。
メニュー
メニューの項目をクリックすると下記の画面が表示されます。
- メニューの位置
- トップメニュー
- ソーシャルリンクメニュー
項目が3つあることがわかります。ひとつずつ見てみましょう。
メニューの位置
メニューの位置をクリックし、サイト名の右下にある三本線の部分をクリックしてメニューを開いた状態が下記になります。
デフォルトのメニューが表示されているようです。説明を見てみましょう。
「お使いのテーマは1つのメニューに対応しています。使用したいメニューを選択してください。
「カスタムメニュー」ウィジェットを利用してウィジェットエリアへメニューを配置することもできます。」
「メイン」という文字列の下のプルダウンはトップメニューとソーシャルリンクメニューが選べるようになっています。
試しにソーシャルリンクメニューに変更してみます。
ソーシャルリンクメニューに変更できました。
次はトップメニューに変更してみます。
最初に表示されていた固定ページとは違う、トップメニューに設定されている項目が表示されました。
元に戻して一つ前のページに戻ります。
トップメニュー
トップメニューをクリックすると下記の画面が表示されます。
トップメニュー
作成したメニューの中身が表示されます。メニューの作成方法については割愛しています。
メニューを削除
メニューの削除ができます。
表示位置
メインにチェックを付けると先ほどのメニューの位置で変更した時に表示された状態になります。
メニュー設定
「このメニューに新しいトップレベルページを自動的に追加」
上記のチェックについてはトップレベルページを作成した時に自動で追加するかどうかというチェックですね。何か追加してすぐに表示したい場合はチェックを入れましょう。一つ前の画面に戻ります。
ソーシャルリンクメニュー
ソーシャルリンクメニューをクリックしました。先ほどのトップメニューと同じように項目が設定できることがわかります。
カスタマイズのトップに戻りましょう。
ウィジェット
ウィジェットをクリックすると下記の画面が表示されます。こちらはフッターエリアの項目を設定できるようですね。右側サイドバーをクリックします。
右側サイドバー
サイドバー確認のため、固定ページに移動しました。さらに、画面左下のコントロールを非表示をクリックした状態のスクリーンショットです。
レスポンシブデザインなので、見栄えを確認する時はこうして画面の幅を調整しましょう。
左下にある青丸の矢印をクリックします。サイドバーが見えなくなりました。
次は表示を確認するためにブラウザの幅を大きくします。すると右側サイドバーの設定がこちらで出来ることが理解できますね。
一つ前の画面に戻ります。
フッターエリア1をクリックします。
画面が移動したら、スクロールしてフッターエリアを見てみます。こちらではフッターエリア1としてアクセスについてのテキストが設定されていることがわかります。
その他のフッターエリアについても自由に、自分の思い通りに設定が可能ということが理解できますね。
カスタマイズのトップに戻ります。
追加CSS
追加CSSはテーマによっての違いがないため、下記にまとめさせて頂きました。
ワードプレス・テーマ内にある追加CSSの使い方
プレビューモードの選択
画面の左下にアイコンで表示されていますね。こちらをクリックすることでそれぞれの端末での表示を確認することが可能です。
デスクトッププレビューモードに入る
タブレットプレビューモードに入る
モバイルプレビューモードに入る
このようにテーマのカスタマイズをする時には端末ごとの見栄えをしっかりと確認することが大切です。文字数によって、パソコンだとちょうどよくても、スマホだと3行くらいになったりすることもあります。テーマやデザインはしっかりとしているのに、意外と文字列の長さや、折り返す位置などを気にしない場合がありますから、これもひとつのアドバイスとして覚えておいてくださいね。
Bakes And Cakesをテーマ一覧から削除する。
テーマを削除する時はまず別のテーマを有効化する必要があります。デフォルトのテーマなどに変更した上で、外観をクリックし、Bakes And Cakesにマウスカーソルを合わせるとテーマの詳細という文字が表示されるのでクリックしましょう。Bakes And Cakesについての詳細が表示されます。画面右下に赤文字で削除という文字列があるので、そこをクリックすればBakes And Cakesをテーマ一覧から削除することが可能です。
ここまでがBakes And Cakesをインストール・カスタマイズ・削除までの手順となります。
まとめ
テーマを設定した段階ではその魅力に気が付くことが出来ませんが、進めていくとその実力がすぐに理解できます。
スライダーだけでなくセクションなども他のテーマであれば有料かも？と思うような部分まで細かく設定できます。
ダウンロードページなどを見るとファンシーで可愛らしいイメージですが、シンプルでありながら必要となる機能がしっかりと実装されており、どんな分野でも利用することが可能な素晴らしいテーマです。