テーマ「Hikari」の手引

テーマの使い方

0.ダッシュボード>設定>一般設定から「サイト名」と「キャッチフレーズ」決めて入力して下さい。

1.メニューの設定

まずは固定ページの名前とURLを決めます。Topページと必要な固定ページを作ります(とりあえずここではページ名とパーマリンクのみ設定)

固定ページが出来たら、「ダッシュボード>外観>メニュー」から「メニューの作成」をクリック。

「サイトナビゲーション」と名前をつけ、固定ページやその他リンクなど必要な項目をメニューに追加し、「メニューの位置」に「サイトナビゲーション」とチェックを入れて保存して下さい。
%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e4%bd%9c%e6%88%90wp
これでタイトル下のナビゲーションメニューができました。

※カスタムメニューは複数作れます。「おすすめ記事」や「フッターメニュー」など独自のメニューを作り、フッターのウィジェットエリアや固定ページ(2カラムにしたとき)に表示させることができます。固定ページはデフォルトではシングルカラムでサイドバーはありませんが、テンプレートにpage-sidebarを選ぶとサイドバーありのレイアウトにすることができます。

ホームページとして使う場合

固定ページのテンプレート設定


「ダッシュボード>設定>表示設定」で固定ページにTOP(フロントページ)Blog(投稿ページ)などを作り、テンプレートをそれぞれTOPはHome Page,BLOGはデフォルトテンプレートに設定します。
「表示設定」を「固定ページ」にし、フロントページにTOPを、投稿ページにBLOGを選ぶとサイト型表示になります。

固定ページはデフォルトではサイドバーの無しの1カラムです。固定ページの編集画面でテンプレートを「page-sidebar」に変更することでサイドバーつきの2カラムレイアウトに変更できます。

ブログとして使う

デフォルトで「表示設定」を「最新の投稿」にすると投稿ページがトップページになります。

2.ヘッダーイメージの設定

トップページのヘッダーイメージを設定します。1600*600pxの画像を用意して下さい。
%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8%e5%a4%89%e6%9b%b4
「ダッシュボード>外観>ヘッダー」からヘッダーイメージ写真をアップロードして設定して下さい。

3.ウィジェットエリアの設定

%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e7%b7%a8%e9%9b%86%e7%94%bb%e9%9d%a2
トップページには3カラム項目1~3、トップメインエリア、フッター3カラム項目1~3が、ブログページにはサイドバー1、2カラムにしたときの固定ページにはサイドバー2が設置されています。
それぞれ「外観>ウィジェット」にいくと項目がありますので、表示したいテキストウィジェットやカスタムメニューを選びドラッグ&ドロップして設定して下さい。
▼トップのウィジェットエリア
%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%82%a8%e3%83%aa%e3%82%a2

4.電話番号・SNSの設定

「ダッシュボード>外観>カスタマイズ」へ行くと「電話番号」と「SNS」という項目があります。
%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e7%94%bb%e9%9d%a2
それぞれ項目をクリックして表示したい「電話番号」「SNSのアカウント(半角英数)」を入力して下さい。
右上に表示されます。
%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e9%9b%bb%e8%a9%b1

5.グリッドレイアウト

ブランクテーマ「Naked WordPress」をベースに作っています。Bootstrap ver2とおなじグリッドシステムが組み込まれています。
詳しくはグリッドレイアウトページをご覧下さい。

6.投稿編集画面のビジュアルモードの機能

%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab
投稿編集画面のビジュアルモードのでは見出しやリスト、独自のスタイル(ポイント枠、蛍光ペンなど)がボタンのクリックで簡単に追記できます。

見出しのデザインh2

h3見出しのデザイン

h見出しのデザイン4

h5見出しのデザイン
ポイント枠:デザインのアクセントにご利用下さい。
吹き出し

蛍光ペン:強調したい部分にどうぞ。

  • 番号なしのリスト
  • 番号なしのリスト
  • 番号なしのリスト

 

7.背景・タイトルロゴ画像の変更

カスタムヘッダー機能で管理画面から簡単にタイトルロゴ画像や背景のスタイルを変更できます。
「ダッシュボード>外観>カスタマイズ」からヘッダーでロゴ画像を、背景色・背景画像でサイト全体の背景色や背景画像を設定できます。

デザインのためのclass、タグ等

デフォルトでは投稿本文は左揃いです。中央揃いにする場合はclassとして.centerを付与して下さい。
sectionでくくると上60pxのmarginができ、適切な余白でコンテンツを表示できます。

テーマのダウンロード

【クレジット表記ありテーマファイル】

【クレジット表記無し版はこちら】

DLmarketで購入
DLmarketで購入

コメント

  1. こんにちは、これはコメントです。
    コメントの承認、編集、削除を始めるにはダッシュボードの「コメント画面」にアクセスしてください。
    コメントのアバターは「Gravatar」から取得されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です