はぴまむ

子育て中もハッピーに日々を過ごしたい主婦がお仕事のことや役に立った情報などをつづっています。

初心者でも簡単!BizVektorの使い方~テーマカスタマイザーとテーマオプション~

time 2015/06/17

前回の講座初心者でも簡単!Wordpressの無料テーマBizVektorの使い方講座Vol.1は覚えていますか?

今回は前回からの続きです。
まだ読んでいない人は読んでみてくださいね。

にゃんこ先生
BizVektorの使い方講座第2弾は、テーマカスタマイザーとテーマオプションでの設定の仕方だにゃ~!

ゆいくり
待ってました!にゃんこ先生おねがいしまーす!

sponsored link

テーマカスタマイザーで簡単なカスタマイズをしてみよう!

にゃんこ先生
BizVektorではCSSなどがわからない人でも簡単にカスタマイズできるように工夫がされてるにゃ。

ゆいくり
だから初心者にもやさしいテーマなんだね~。

にゃんこ先生
そうにゃ~。無料のテーマなのにやさしいのにゃ~。
それじゃレッツカスタマイズにゃ!

さまざまな設定ができるテーマカスタマイザー

thema-custom01テーマカスタマイザーは外観のなかのカスタマイズから移動できます。
thema-custom02
テーマカスタマイザーはこんな画面。
左の項目でいろいろ変更、右で即変更箇所をプレビューしてくれるので初心者でもわかりやすくて操作しやすいです。

自分でいろいろさわってみてどこが変わるか確認してみましょう。

左上の保存して公開ボタンを押すまでは保存されないので安心して確認できます。

にゃんこ先生
逆に、これはいい感じでできた!と思ったときは保存して公開ボタンを押すのにゃ。
押さないとせっかく気に入った設定も消えてしまうにゃ~。

ここでは例として、カラーを変更してみたいと思います。
左の項目のRebuildカラー設定をクリックして、キーカラーを変えてみます。

thema-custom03
全体的に赤色だったのが青と緑に変わりました。
色を変えるだけで雰囲気はけっこう変わりますね。

にゃんこ先生
このRebuildカラー設定は、BizVektorテーマで初期設定されているデザインスキンの名前にゃ~。
あとから教えるテーマオプションでデザインスキンを変更するとなくなったり名前が変わるので要注意にゃ!

テーマオプションでカスタマイズやサイトの設定をしよう!

次はテーマオプションからサイトの設定をしてみましょう。
thema-option01
テーマオプションへは、外観のなかのテーマオプションから移動できます。
thema-option10
テーマオプションの画面はこんな感じ。

たくさん項目がありますね。
それでは項目ごとに説明します。

テーマオプション デザインの設定

thema-option02
ここでは見た目のデザインで基本的なことを変更・設定できます。
デザインの設定の中のいくつかの箇所はテーマカスタマイザーでも変更可能です。

  1. デザインスキン
    初期段階では Rebuild Calmly プレーン Default の4種類からスキンを選べます。
    その他のスキンはBizVektorの拡張デザインスキンにて有料で販売されているので興味のある方は使用してみてください。
  2. ヘッダーメニューの数
    メイン画像の上にあるメニューの数が選べます。
    初期段階では設定なし(左詰め)になっていると思います。
    メニューの数が4つだった場合、初期設定の設定なし(左詰め)ではメニューが左にくしゃっと寄った状態になります。
    thema-option-desgin01ちょっとこれでは見栄えが残念だな。。メニュー名が均一に並ばないかな。。
    なんて時に、このヘッダーメニューの数を選びます。
    今回はメニューの数が4つなので、プルダウンから4分割を選択、変更を保存します。
    するとこのようにヘッダーメニューが4分割されて、メニュー名が均一に並びます。
    thema-option-desgin02
    にゃんこ先生
    ヘッダーメニューの数は4つから選べるにゃ
  3. ヘッダーロゴ画像
    ヘッダーロゴはサイト左上に表示されるサイト名の場所に、初期設定のテキストではなく任意の画像を表示したい時に設定します。
  4. フッターロゴ画像
    フッターロゴはサイト左下に表示されるサイト名の場所に、初期設定のテキストではなく任意の画像を表示したい時に設定します。
  5. レイアウト
    レイアウトでは、サイドメニューの位置を左に置くか、右に置くかを設定できます。
    サイドメニューなしにしたい場合、トップページは後述するトップページの項目で、固定ページの場合ページ編集画面のテンプレート選択で設定可能です。
  6. 見出しの書体
  7. グローバルメニューの書体
    見出しとメニューの書体を設定できます。
  8. サイドバーのメニューの展開
    階層が深いサイトの場合、サイドメニューの数がとても多くなってしまいます。
    すると見た目的にもユーザビリティ的にもよくないので、今開いている固定ページの子階層以外を非表示にしてサイドメニューをスッキリさせることができます。
  9. Favicon設定
    Faviconとは、サイトをお気に入りに追加などしたときについているアイコンのことです。
    icoというファイル形式のもので作成しアップロードすることで、任意のFaviconを表示させることができます。
  10. IE8警告表示
    古いブライウザを使っていると、新しいCSSなどの表示ができない場合があります。
    なので、古いブラウザから閲覧した人に、ブラウザが古いですよーと警告を出すことができます。

テーマオプション 連絡先の設定

thema-option03

  1. お問い合わせメッセージ
  2. 電話番号
  3. 受付時間
    お問い合わせメッセージ、電話番号、受付時間はサイトの右上に表示されます。
    テーマスキンがRebuildの場合は表示されません。
  4. フッター左下、コピーライトに表示される名称
    フッター左下に表示される名称やコピーライトの部分に表示される名称をお好きな名前で表示させることができます。
  5. 住所
    フッター左下に表示される名称の下に表示する住所を入力します。
    住所を表示させたくない場合は未入力で。
  6. 問い合わせページのURL
    ここにお問い合わせページのURLをいれると、固定ページ下とサイドメニューのお問い合わせはこちらというバナーが表示されるようになります。

テーマオプション トップページ3PRエリアの設定

thema-option04

  1. 3PRエリアの表示設定
    3PRエリアを表示させるかさせないかを選ぶことができます。
  2. タイトル
    PRしたいページのタイトルなどをいれます。
  3. 概要
    PRしたいページのページ概要をいれます。
  4. リンク先ページのURL
    PRしたいページのURLをいれます。
  5. 画像URL
  6. スマホ用画像URL
    画像はなくてもOKですが、あったほうが明るくにぎやかになります。

テーマオプション お知らせ&ブログの設定

thema-option05

  1. お知らせ 表記の変更
    初期設定ではお知らせという名前ですが、表記を任意のものに変えることができます。
    更新情報、や今日の○○、などお好きな名称に変えてみましょう。
  2. お知らせ 表示レイアウト
    トップページやアーカイブページでの表示方法を変更できます。
    タイトルのみにすると1行のシンプルでコンパクトな表示になり、抜粋とサムネイル画像ありにするとにぎやかになりますが、場所をとるようになります。
    また表示件数も変更できます。
  3. お知らせ トップのURL
    お知らせ一覧ページのURLです。
  4. ブログ 表記の変更
    初期設定ではブログという名前ですが、表記を任意のものに変えることができます。
    ○○のひとりごと、○○のつぶやき、などお好きな名称に変えてみましょう。
  5. ブログ 表示レイアウト
    トップページやアーカイブページでの表示方法を変更できます。
    タイトルのみにすると1行のシンプルでコンパクトな表示、抜粋とサムネイル画像ありにするとにぎやかですが場所をとる表示になります。
  6. ブログ トップのURL
    ブログ記事一覧ページのURLを入力します。
    なくても問題はないです。
  7. ブログ 関連記事の表示件数
    ブログ記事の下に関連する記事を表示させることができるのですが、その記事数を変更できます。
  8. ブログ 広告の挿入
    ブログ内に、一括で広告を挿入することができます。

テーマオプション トップページの設定

thema-option06

  1. メインビジュアル
    トップページに表示されるメインビジュアルの設定です。
    静止画とスライドショーが選べ、それぞれの設定ページへのリンクになっています。
  2. トップページのメインビジュアル下に表示するページ
    固定ページと最新記事から選べます。
    設定は表示設定からおこなうので、そこへのリンクと設定方法がかかれています。
  3. トップページ3PRエリア
    トップページ3PRエリアを設定するページへのリンクです。
  4. トップページのサイドバーの表示
    トップページのサイドバーを表示するかしないか選べます。
  5. ブログの表示件数
    ブログの表示件数を設定するページへのリンクです。

テーマオプション スライドショーの設定

thema-option07

  1. リンク先URL
    スライドショーからリンクで関連ページに飛ばしたい場合、ここにページURLをいれます。
  2. 画像URL
    表示させたい画像のURLをいれます。
  3. 代替テキスト
    画像が表示されない場合、代わりに表示する文章をいれます。

テーマオプション SEO&GAの設定

thema-option08

  1. トップページの<title>タグ
    トップページのタイトルのみ別で設定することができます。
  2. 共通キーワード
    サイト内の全ページで共通するキーワードをここで設定できます。
  3. ディスクリプション
    ディスクリプションの説明です。
  4. GoogleAnalytics設定
    AnalyticsIDをいれてGoogleAnalyticsの設定が簡単にできます。

テーマオプション SNSの連携の設定

thema-option09

  1. facebook
  2. facebookアプリケーションID
  3. facebookユーザーID
  4. twitterアカウント
  5. デフォルトのOGPイメージ
  6. ソーシャルボタン
  7. facebookコメント欄
  8. facebook LikeBox
  9. OGPを出力しない
  10. Twitter Cardの設定

これらの設定は必須ではありませんが、SNSと連携することは記事を拡散しより多くの人に見てもらうために有効です。

にゃんこ先生
設定を変更したら変更を保存ボタンを押すのを忘れないでにゃ!

ゆいくり
もし忘れて別の設定画面にいったらどうなるの。。?

にゃんこ先生
今までがんばって設定したのが消えてしまうにゃ。。

ゆいくり
えぇ?!
それは大変だー!ちゃんと覚えておこう。。

にゃんこ先生
絶対絶対忘れないでにゃー!

まとめ

にゃんこ先生
BizVektorは他のテーマではちょっとめんどうな設定もこんな簡単に設定することができるにゃ~

ゆいくり
確かに入力したりチェックするだけで設定できるのは初心者にありがたいなー

にゃんこ先生
基本の設定はこれでバッチリにゃ!
次はウィジェットの設定とメニューの設定を勉強するにゃ~

ゆいくり
あ、まだ設定があるんだ。。

にゃんこ先生
ウィジェットとメニューの設定が終われば基礎の基礎は完了!
記事の作成にうつれるにゃ!

ゆいくり
あともう少し!
がんばります!

というわけで次回はウィジェットとメニューの設定についてお届けします。

sponsored link

down

コメントする




sponsored link

はぴまむの中の人

ゆいくり

ゆいくり

30代の子育て中主婦。在宅勤務OK!という理解ある会社に拾っていただき、そこで働きながらフリーランスとしても活動中。webサイト製作などを中心に活動しています。 [詳細]