WordPressテーマ『十二単』リリース 🎉

十二単カスタマイズマニュアル

外観のカスタマイズに関するマニュアルです。

ちなみにテーマタイトルの十二単はこのカスタマイズ項目が大きく12から成るからというのがあります(どうでもいいですね)。

このページを上から下に読んでいくというのは量的に現実的ではないので、実際にご利用いただいている際にわからないことが出てきたらその部分のみ読みに来ていただくのがいいかと思います〜。

もくじ

1.全体/トップページの設定

サイト全体やトップページに関する設定を行うことができます。

1-1.トップページのタイプ

トップページは4つのタイプから選択可能です。

  • デザイン1……記事一覧とサイドバー
  • デザイン2……記事一覧のみ
  • デザイン3……大きなヘッダーと記事一覧とサイドバー
  • デザイン4……LP風

ブログなどはデザイン1とデザイン2、コーポレートサイトなどではデザイン3、LPなどではデザイン4を使用すればいいかと思いますが、細かな決まりはないので好きなようにお使いいただければ。

ちなみにこちらのページはデザイン4で作っています。

1-2.コンテンツエリアの最大横幅

コンテンツ部分の最大横幅と言ってもわかりづらいので、こんなgifを作りました。

青の方は最大横幅を設定しておらず、ピンクの方は最大横幅が設定されています。

最大横幅を設定しないと、大きな画面サイズのデバイスで見たときでも横いっぱいまで広がり、逆に設定すれば一定の横幅で固定されます。

開発者向けの設定ではあるので、難しい場合はデフォルトのままにしておくことが推奨です。

1-3.サイドバーを左側に表示

サイドバーはデフォルトでは右側に表示されますが、これを左側に表示することが可能です。

一般的にWebサイト閲覧時の人の目というのは左から右へ動くため、サイトのメイン情報(記事部分)を左に、サブ情報(サイドバー)を右に持ってくるのは原則ではあります。

1-4.ダイナミックヘッダーを画面最上部に表示

1-1のサイトデザインでデザイン3 or デザイン4を選択するとダイナミックヘッダーが使用できます。

通常のダイナミックヘッダーイメージ
通常のダイナミックヘッダー

ダイナミックヘッダーを最上部にしたイメージ
ダイナミックヘッダーを最上部に

ブランディングが第一のサイトなどではヘッダーよりも上にダイナミックヘッダーを持ってきてもいいかもしれません。

1-5.サイト全体の雰囲気

サイト全体の雰囲気を設定できる項目ですが、まだ開発中です。

時間が取れ次第、フラットなデザインと線を重視したようなデザインを追加できたらいいなぁ。

1-6.ダークモード有効化

こちらもまだ開発中ではありますが、一応動作はします。

ダークモードはユーザーのバッテリー消費を抑える効果や目に優しい効果とか色々あるので今後ダークモードを実装していくテーマは増えていくかと思います。割と先駆けました。

ダークモードのイメージ

2.ダイナミックヘッダー(1-1で選択した場合のみ)の設定

1-1でデザイン3 or デザイン4を選んだ場合、ダイナミックヘッダーが使用できるようになります。

ダイナミックヘッダーはブランディングやCTA(call to action = 収益化など)に役立つので必要に応じご活用くださいまし。

2-1.ヘッダー部分のテキスト

ダイナミックヘッダーのテキストが設定できます。

ダイナミックヘッダーテキストイメージ

ダイナミックヘッダー内に画像がなければテキストは中央に表示されます。

2-2.ヘッダー部分のテキストサイズ

テキストのサイズが設定できます。

ダイナミックヘッダー文字サイズ

単位は%で100であれば通常の文字サイズ(デフォルト:16px)と同じ。200であれば32pxになります。

2-3.ヘッダー部分のテキスト色

テキスト色が設定できます。

ダイナミックヘッダー文字色

薄い背景色では濃い文字色、濃い背景色では薄い文字色を設定しましょう。

2-4.テキストへ適用するアニメーション

ダイナミックヘッダーにアニメーションが適用できます。下gifを参考にお選びください(実際はもう少しゆっくりです)。

ダイナミックヘッダーテキストアニメーション

2-5.ヘッダー部分のボタン

ヘッダー部分にボタンの設置ができます。テキストを入力すると自動でオンになります。

ダイナミックヘッダーボタンイメージ
ダイナミックヘッダーボタンイメージ
ボタン2つめにはアクセントカラーが適用されます

2-6.ボタンのリンク先URL

誘導先URLがある場合は設定してください。特にない場合は#を入力しましょう。

2-9.ヘッダー部分の画像(文字の隣)

画像が設定できます。

ダイナミックヘッダーに画像適用

2-10.ヘッダー部分の画像のサイズ

画像サイズが変更できます。

画像の大きさによっては表示が途切れてしまったり、逆にスペースが余り過ぎてしまうこともあるかと思うので、微調整してみてください。

2-11.ヘッダー部分の画像を左側へ移動

デフォルトでは文字が左側で画像が右側です。これを画像を左側に持っていくことができます。

2-12.ヘッダー部分の画像(背景)

ヘッダー部分に背景画像を設定できます。

こちらのページでも背景に画像を設定しています。

2-13.ヘッダー部分の背景画像フィルター

これを使用しないといけないという画像や用意できた背景画像の画質が荒いとき、フィルターが大きく役立ちます。また、単に表現の幅を広げるのにも役立つかと思います。7種類用意しました。

ダイナミックヘッダー背景画像のフィルターイメージ
フィルターなし
ダイナミックヘッダー背景画像のフィルターイメージ2
うっすら暗く
ダイナミックヘッダー背景画像のフィルターイメージ3
うっすら明るく
ダイナミックヘッダー背景画像のフィルターイメージ4
ドット
ダイナミックヘッダー背景画像のフィルターイメージ5
斜線
ダイナミックヘッダー背景画像のフィルターイメージ6
罫線
ダイナミックヘッダー背景画像のフィルターイメージ7
ボカシ

2-14.ヘッダー部分の背景色

背景画像を設定していない場合、背景色が適用されます。

ダイナミックヘッダー背景色イメージ

2-15.ヘッダー部分の最大横幅

ダイナミックヘッダーエリアに最大横幅を設定できます。大きなデバイスで見たときも横幅いっぱいまで広げたいときは3000に設定しましょう。

※ 3000に設定しても一応最大横幅はある状態ではありますが、現在想定されるデバイスの横幅は大きくてもせいぜい2000弱程度までなので実質3000に設定しておけばほぼ全てのデバイスで横目一杯で設定されます。

ダイナミックヘッダー最大横幅設定時のイメージ
最大横幅設定1200(デフォルト)
ダイナミックヘッダー最大横幅設定してないイメージ
最大横幅設定3000

2-16.ヘッダー部分の高さ

50に設定するとデバイスの縦幅に対して50%がダイナミックヘッダーエリアになります。100に設定すればデバイスの縦幅に対して100%がそうなります。

ヒーロヘッダーイメージ

いわゆるヒーロヘッダーと呼ばれる表現手法でブランディングなどに役立ちます。

2-17.ヘッダー部分の上部の余白

ダイナミックヘッダーの上部に余白を設けることで、ナビバーとダイナミックヘッダーを分離できます。

ダイナミックヘッダー上部に余白

2-19.トップ(ホーム)画面以外でも表示

デフォルトではダイナミックヘッダーはトップページでのみ表示されますが、これをトップページ以外(記事ページなど)でも表示できるようにできます。

3.フューチャー部分(1-1で選択した場合のみ)の設定

フューチャー部分は1-1でデザイン4を選択した場合のみ適用されます。主にLPやコーポレートサイトの構築に役立ちます。

6つのセクションに分かれており(2020年1月現在)、セクション1ではアイコンを使用した導入部分セクション2とセクション3はフリースペースセクション4はQ&Aスペースセクション5はフリースペースセクション6はMAP部分としてご活用いただけます。

3-1.セクション1にアニメーションを使用

アニメーションです。現在8種類から選択可能です。

※ まれにカスタマイザー画面ではうまく動作しないことがありますが、きちんと適用されます。

フェードインアニメーション1
下からフェードイン
フェードインアニメーション2
大きく下からフェードイン
フェードインアニメーション3
上からフェードダウン
フェードインアニメーション4
大きく上からフェードダウン
フェードインアニメーション5
左からフェードイン
フェードインアニメーション6
大きく左からフェードイン
フェードインアニメーション7
右からフェードイン
フェードインアニメーション8
大きく右からフェードイン

3-2.タイトル(セクション1)/3-3.説明文(セクション1)

セクションのタイトルと説明文です。テキストエリアに文字を入力すると自動でオンになります。敢えて何も入力せずに設定しないことも可能です。

3-4.アイテム1のアイコン(セクション1)

Font Awesomeを使用すると簡単にアイコンの設定が可能です。

使用したいアイコンを一覧あるいは検索から選択します。このとき必ずFreeのアイコンを選びましょう。(Proは有料版であるためサポート外です)

<i class="xxx xxx"></i>の部分をクリックすればクリップボードにコピーができます。

コピーしたコードをカスタマイザーに貼り付けましょう。

アイコン色が選択できます。

3-29.質問1(セクション4)

よくある質問コーナーが設置できます。

よくある質問のイメージ

よくある質問はアコーディオン形式で表示されます。

3-40.フリースペース(セクション5)

ニュース情報や会社情報など入れるのに丁度いいかと思います。

フリースペースの活用法1
ニュースを入れたパターン
フリースペースの活用法2
会社情報を入れたパターン

3-41.地図スペース(セクション5)

コーポレートサイトなどでは地図が必須かと思うので、地図を入れてみるのもいいかと思います。コードはGoogleMapから取得可能です。

GoogleMap埋め込み方法1

GoogleMapで掲載する場所を見つけたら共有ボタンを押します。

GoogleMap埋め込み方法2

『地図を埋め込む』タブから『HTMLをコピー』ボタンを選択。

GoogleMap埋め込み方法3

カスタマイザーにペーストします。

4.ピックアップ部分

4-1.ニュース欄を表示する

チェックを入れるとニュース欄の表示ができます。

ニュース欄イメージ

ニュース欄はナビバーの下に表示されます。

4-2.ニュース欄の文章

ニュース欄に表示する文章の設定ができます。リンクが設定できるため、ここでは短めの文章を設定し、リンク先で詳細を書くのがおすすめです。

4-3.ニュース欄のリンク先

こちらでリンク先が設定できます。固定ページや記事ページなどをリンク先として設定しましょう。

4-4.ニュース欄の背景色(1色目)/4-5.ニュース欄の背景色(2色目)

ニュース欄の背景色が設定できます。2色を異なる色で設定すればグラデーションになり、同じ色で設定すれば単色になります。

ニュース部分の色使いイメージ1
グラデーション
ニュース部分の色使いイメージ2
単色

4-6.ピックアップ部分

ピックアップ部分は画像を設定する(4-7/4-9/4-11/4-13/4-15)ことで使用できるようになります。

各画像にリンクがつけられるので目立たせたい記事やページのためのスライダーのようなものになります。

デフォルトではオフになっていますが、デザインを選択することでオンになります。

※ 1-1でデザイン4を選択していると表示されません。

カルーセルイメージ1
デザイン1
カルーセルイメージ2
デザイン2

5.フォントの設定

5-1.サイトタイトルのフォント

ロゴを作るのが面倒であったり、さくっとサイト制作を済ませたいときなどなど、サイトタイトルを文字で表示する場合にサイトタイトルに適用するフォントを9種類の中からお選びいただけます。

ポップ
個性的
残像
近未来
切り抜き
手書き風
カクカク
はんなり
にくきゅう

5-2.サイト全体のフォント

タイトル部分は上の項目(5-1)で変更が効きます。

タイトル部分以外のサイトの全ての箇所のフォントを変更できるのがこの項目です。デフォルト or きっちり or 柔らかい or ゴシック あたりが可読性の観点からはおすすめです。

※ 画像をクリック/タップでズームします。ディティールを確認してみてください。

サイト全体へのフォント適用イメージ1
デフォルト
サイト全体へのフォント適用イメージ2
きっちり
サイト全体へのフォント適用イメージ3
やわらかい
サイト全体へのフォント適用イメージ4
ゴシック
サイト全体へのフォント適用イメージ5
タイムマシーン
サイト全体へのフォント適用イメージ6
せのび
サイト全体へのフォント適用イメージ7
木漏れ日

5-3.前項を記事見出しにのみ適用

上の5-2項目で設定したフォントを記事内の見出しのみに適用することができます。

見出しにのみフォント適用イメージ

<h2><h4>までの見出しに適用されます。

5-4.サイトタイトルの文字サイズ

サイトタイトルを文字で表示する場合、文字サイズを変更できます。

単位はパーセントで、160パーセントがデフォルトです(通常の文字サイズの1.6倍)。200にすれば通常の文字サイズの2倍といったイメージです。

5-5.【PC】サイトの文字サイズ/5-6.【タブレット】サイトの文字サイズ/5-7.【スマホ】サイトの文字サイズ

こちらも単位はパーセントです。

PCでの文字サイズを基準としてスマホやタブレットでの文字サイズを設定できます。

特にこだわりがない場合はデフォルトのままがおすすめです。

6.色の設定

各所の文字色や背景色の設定ができます。

6-1.メインカラー

サイト全体のメインカラーです。好きな色を設定すればいいかとは思いますが、こんな意見もあったりします。

6-2.サブカラー

メインカラーより少し薄い/明るい色がおすすめです。

サブカラーイメージ

メインカラーを基準にそれより薄いか明るい色推奨

6-3.アクセントカラー

こちらもお好みの色を選択すればいいかと思いますが、特に何もなければ補色など選べばいいかと思います。

補色は平たく言うと色彩表において反対に位置する色のことです。

7.ナビメニューの設定

ナビメニューの設定ができます。

十二単ナビメニューのイメージ

7-1.ナビメニューの横幅に上限を設ける

ナビメニュー内のコンテンツ(ロゴやメニューなど)はデフォルトだと左右端に目一杯に広がっていきます(下画像1枚目)。

この項目にチェックを入れるとコンテンツエリアの横幅に合わせて位置が調整されます。

十二単ナビメニュー上限なし
上限なし
十二単ナビメニュー上限あり
上限あり

7-2.サイトタイトルを中央寄せにする

チェックを入れるとロゴやサイトタイトルをナビメニュー内の中央に配置できます。

十二単/サイトタイトルを中央にする

7-3.ナビメニューをサイト上部に固定する

ナビメニューをサイト上部に固定ができます。

十二単/ナビスクロール追従

スクロールに追従してくるイメージです。

7-4.ナビメニューの固定に伴うアニメーション

7-3にチェックを入れているとき、スクロールに合わせてナビメニューが縮小します。

十二単/ナビスクロール追従アニメーション

スクロールするとナビメニューが追従してくるだけでなく、全体的に縮小します。

7-5.ナビメニューの背景透明化

ナビメニューの背景を透明化します。

7-3で固定されていた時のことを考慮し、背景がすりガラス風に透けるようにしました。この背景すりガラス風のデザインはAppleなども採用しており、最近流行っている手法になります。

十二単/背景すりガラス風1
十二単/背景すりガラス風2
背景がすりガラス風になる

7-6.メニューアイコン

スマホやタブレットでのサイト閲覧時にナビメニューの左上に表示されるハンバーガーメニューアイコンを変更できます。

十二単ハンバーガーメニューアイコン1
ハンバーガーメニューアイコン1
十二単ハンバーガーメニューアイコン2
ハンバーガーメニューアイコン2
十二単ハンバーガーメニューアイコン3
ハンバーガーメニューアイコン3
十二単ハンバーガーメニューアイコン4
ハンバーガーメニューアイコン4

7-10.メニューの下の英文字1

メニューの下に英文字を設定できます。

十二単/メニュー下の英文字

7-15.スマホで表示されるメニューで運営者プロフィールを非表示

ハンバーガーメニューをクリックすることで表示されるサイドメニュー内に運営者プロフィールを表示する部分があります。それをオフにすることができます。

十二単/運営者プロフィール切り替え

7-16.運営者プロフィールの背景画像

運営者情報の背景画像を変更できます。

十二単/運営者プロフィールイメージ

デフォルトではデフォルトのメインカラー/アクセントカラーに合わせたグラデーションになっています。

7-17.運営者プロフィール画像/7-18.運営者の名前

運営者プロフィールの名前と画像です。

十二単/運営者プロフィールイメージ

運営者プロフィール画像は丸く切り抜かれます。

十二単/構造化データ

こちらで設定した名前は構造化データというSEOに一定の効果の見込まれるコード内でも使用します。表示するかどうかは別として設定しておいても損はしないかと。

7-20.スマホで表示されるサイドメニューのタイトル

サイドメニュー内のメニュー部分のタイトルを設定できます。デフォルトではMENUになっています。

十二単/サイドメニューのメニュータイトル

7-21.スマホで表示されるサイドメニューでメニューを非表示

チェックを入れるとメニューを非表示にできます。

十二単/サイドメニューでメニュー非表示
サイドメニューでメニューを非表示に
十二単/サイドメニューにウィジェット追加

外観 > ウィジェットからサイドメニューにウィジェットを追加することもできます。

8.記事の設定

8-1.記事一覧のデザイン

記事一覧のデザインが変更できます。

十二単/記事一覧デザイン1
デザイン1(マテリアル カード)
十二単/記事一覧デザイン2
デザイン2(厚みのあるカード)
十二単/記事一覧デザイン3
デザイン3(付箋付きカード)
十二単/記事一覧デザイン4
デザイン4(画像だけ)
十二単/記事一覧デザイン5
デザイン5(文字だけ)
十二単/記事一覧デザイン6
デザイン6(シンプルな文字と画像)

ちなみにサイトスピード的な観点から言えば画像がないデザイン6がオススメではあります。

8-3.pタグ下の余白調整

pタグ下の余白幅が調整できます。

デフォルトは0.5で、これは0.5文字分の余白を意味します。1と設定すれば1文字分、1.5とすれば1.5文字分が設定できます。

8-4.「この記事を書いた人」を非表示

チェックを入れると記事の作者を非表示にできます。

記事の作者欄は記事本文下に表示されます。

8-5.「この記事を書いた人」のタイトル

記事作者部分のタイトルを設定できます。

FontAwesomeを使用することも可能です。

8-7.関連記事を非表示

記事本文下に表示される関連記事を非表示にできます。関連記事は同じカテゴリーのものがランダムに最大6つまで表示される仕様です。

8-9.関連記事のデザイン

関連記事一覧のデザインが選択できます。

十二単/関連記事一覧デザイン1
関連記事一覧デザイン1
十二単/関連記事一覧デザイン2
関連記事一覧デザイン2

8-10.記事内シェアボタンの位置

記事本文の上部/下部のシェアボタンの表示/非表示が切り替えられます。

8-11.アイキャッチ下シェアボタンのデザイン/8-12.本文下シェアボタンのデザイン

シェアボタンのデザインを切り替えられます。記事上部と下部にそれぞれ別のものを設定することも可能です。

十二単/シェアボタンデザイン1
シェアボタンデザイン1
十二単/シェアボタンデザイン2
シェアボタンデザイン2
十二単/シェアボタンデザイン3
シェアボタンデザイン3
十二単/シェアボタンデザイン4
シェアボタンデザイン4
十二単/シェアボタンデザイン5
シェアボタンデザイン5

8-14.目次を非表示

十二単ではデフォルトで目次が挿入されるようになっています。もしEazy table of Contentsなどのプラグインを使用して目次を表示したい場合にはオフにすることもできます。

8-15.固定ページでも目次を表示

十二単のデフォルトの目次では固定ページでは表示しないように設定してあります。もし固定ページでも目次を表示したい場合はチェックを入れてください。

8-17.目次のデザイン

目次のデザインは5種類から選択できます。色がついているデザイン(デザイン3/4/5)ではメインカラーやサブカラーが使用されます。

十二単/目次デザイン1
デザイン1
十二単/目次デザイン2
デザイン2
十二単/目次デザイン3
デザイン3
十二単/目次デザイン4
デザイン4
十二単/目次デザイン5
デザイン5

9.記事装飾の設定

9-1.目次のデザイン

ぱんクズリストのデザインが選択できます。途切れてる部分は横スクロールができます。

十二単/パンクズリストデザイン1
デザイン1
十二単/パンクズリストデザイン2
デザイン2

9-2.記事内の見出し(h2)デザイン

見出しのデザインが切り替えられます。現在は8種類のみとなっています。色は基本的にメインカラーで設定したものが使用されます。

十二単/見出しデザイン1
見出しデザイン1
十二単/見出しデザイン2
見出しデザイン2
十二単/見出しデザイン3
見出しデザイン3
十二単/見出しデザイン4
見出しデザイン4
十二単/見出しデザイン5
見出しデザイン5
十二単/見出しデザイン6
見出しデザイン6
十二単/見出しデザイン7
見出しデザイン7
十二単/見出しデザイン8
見出しデザイン8

9-5.記事内画像のポップアップ機能をオフ

十二単では画像が自動でポップアップ(拡大)表示できるようになっています。この項目にチェックを入れるとこの機能がオフになります。

十二単/画像の拡大機能紹介
画像のポップアップ
十二単/虫眼鏡マーク

オンの状態だと拡大できることを示すために画像の左上に虫眼鏡マークが表示されます。

十二単/虫眼鏡マークなし

オフにすると虫眼鏡マークも消えます。

9-6.記事内リンクに自動でアイコンをつける機能をオフ

十二単では記事内のリンクがリンクであることが分かりやすくなるようアイコンが自動で挿入される機能がついています。チェックを入れるとこの機能をオフにできます。

十二単/リンクアイコンイメージ1
アイコンあり
十二単/リンクアイコンイメージ2
アイコンなし

10.フッターの設定

10-1.トップへ戻るボタンを表示する

トップへ戻るボタンの表示/非表示が切り替えられます。

十二単/トップへ戻るボタン

トップへ戻るボタンは左下に固定され、アクセントカラーが適用されます。

10-2.シェアボタンを表示する

トップへ戻るボタンの上に位置するシェアボタンの表示/非表示が切り替えられます。

シェアボタンは左下に固定され、サブカラーが適用されます。ホバーorタップで拡張します。

10-3.スマホで独自フッターメニューを表示

スマホで十二単独自のフッターメニューを表示することができます。

10-4.独自フッターメニューのデザイン

フッターメニューのデザインは2種類ですが、デザインというよりは自由性の違いになります。

十二単/フッターメニュー1

デザイン1の方では僕の方で勝手に設定したものなので、カスタマイズなどが面倒という方にすぐにお使いいただけるものです。左からサイドメニューを開くボタン、サイト内検索ボタン、シェアボタン、トップへ戻るボタンとなっています。

十二単/フッターメニュー2

デザイン2の方は自由にカスタマイズが可能なものとなっています。具体的にはアイコン、アイコン下の文字、リンク先などが編集できます。

10-20.フッターで12hitoeへのリンクを非表示にする

フッター右下に表示される当サイトへのリンクを非表示にできます。わかってます、非表示にできるなら最初から付けるなって話ですよね、ごめんて。

CTAエリアイメージ

WordPressテーマ『十二単』

無料のWordPressテーマです。絶賛開発中。
詳しくみる

✒️ Writer ✒️

たかさき

しがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。詳しくはこちら

Follow Me:)

COMMENT

コメントする

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。


内容をご確認の上、送信してください。