2020/01/14十二単カスタマイズマニュアルB!外観のカスタマイズに関するマニュアルです。ちなみにテーマタイトルの十二単はこのカスタマイズ項目が大きく12から成るからというのがあります(どうでもいいですね)。このページを上から下に読んでいくというのは量的に現実的ではないので、実際にご利用いただいている際にわからないことが出てきたらその部分のみ読みに来ていただくのがいいかと思います〜。くじ1.全体/トップページの設定サイト全体やトップページに関する設定を行うことができます。1-1.トップページのタイプトップページは4つのタイプから選択可能です。デザイン1......記事一覧とサイドバーデザイン2......記事一覧のみデザイン3......大きなヘッダーと記事一覧とサイドバーデザイン4......LP風ブログなどはデザイン1とデザイン2、コーポレートサイトなどではデザイン3、LPなどではデザイン4を使用すればいいかと思いますが、細かな決まりはないので好きなようにお使いいただければ。ちなみにこちらのページはデザイン4で作っています。1-2.コンテンツエリアの最大横幅コンテンツ部分の最大横幅と言ってもわかりづらいので、こんなgifを作りました。青の方は最大横幅を設定しておらず、ピンクの方は最大横幅が設定されています。最大横幅を設定しないと、大きな画面サイズのデバイスで見たときでも横いっぱいまで広がり、逆に設定すれば一定の横幅で固定されます。開発者向けの設定ではあるので、難しい場合はデフォルトのままにしておくことが推奨です。1-3.サイドバーを左側に表示サイドバーはデフォルトでは右側に表示されますが、これを左側に表示することが可能です。一般的にWebサイト閲覧時の人の目というのは左から右へ動くため、サイトのメイン情報(記事部分)を左に、サブ情報(サイドバー)を右に持ってくるのは原則ではあります。デザイン4を選択するとダイナミックヘッダーが使用できます。通常のダイナミックヘッダーダイナミックヘッダーを最上部にブランディングが第一のサイトなどではヘッダーよりも上にダイナミックヘッダーを持ってきてもいいかもしれません。1-5.サイト全体の雰囲気サイト全体の雰囲気を設定できる項目ですが、まだ開発中です。時間が取れ次第、フラットなデザインと線を重視したようなデザインを追加できたらいいなぁ。1-6.ダークモード有効化こちらもまだ開発中ではありますが、一応動作はします。ダークモードはユーザーのバッテリー消費を抑える効果や目に優しい効果とか色々あるので今後ダークモードを実装していくテーマは増えていくかと思います。デザイン4を選んだ場合、ダイナミックヘッダーが使用できるようになります。収益化など)に役立つので必要に応じご活用くださいまし。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.ヘッダー部分の背景画像フィルターこれを使用しないといけないという画像や用意できた背景画像の画質が荒いとき、フィルターが大きく役立ちます。表現の幅を広げるのにも役立つかと思います。背景画像を設定していない場合、背景色が適用されます。2-15.ヘッダー部分の最大横幅ダイナミックヘッダーエリアに最大横幅を設定できます。大きなデバイスで見たときも横幅いっぱいまで広げたいときは3000に設定しましょう。3000に設定しても一応最大横幅はある状態ではありますが、現在想定されるデバイスの横幅は大きくてもせいぜい2000弱程度までなので実質3000に設定しておけばほぼ全てのデバイスで横目一杯で設定されます。最大横幅設定1200(デフォルト)最大横幅設定30002-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種類から選択可能です。まれにカスタマイザー画面ではうまく動作しないことがありますが、きちんと適用されます。下からフェードイン大きく下からフェードイン上からフェードダウン大きく上からフェードダウン左からフェードイン大きく左からフェードイン右からフェードイン大きく右からフェードイン3-2.タイトル(セクション1)/3-3.説明文(セクション1)セクションのタイトルと説明文です。テキストエリアに文字を入力すると自動でオンになります。何も入力せずに設定しないことも可能です。Awesomeを使用すると簡単にアイコンの設定が可能です。使用したいアイコンを一覧あるいは検索から選択します。このとき必ずFreeのアイコンを選びましょう。xxx"></i>の部分をクリックすればクリップボードにコピーができます。コピーしたコードをカスタマイザーに貼り付けましょう。アイコン色が選択できます。3-29.質問1(セクション4)よくある質問コーナーが設置できます。ある質問はアコーディオン形式で表示されます。3-40.フリースペース(セクション5)ニュース情報や会社情報など入れるのに丁度いいかと思います。ニュースを入れたパターン会社情報を入れたパターン3-41.地図スペース(セクション5)コーポレートサイトなどでは地図が必須かと思うので、地図を入れてみるのもいいかと思います。コードはGoogleMapから取得可能です。GoogleMapで掲載する場所を見つけたら共有ボタンを押します。『地図を埋め込む』タブから『HTMLをコピー』ボタンを選択。カスタマイザーにペーストします。4.ピックアップ部分4-1.ニュース欄を表示するチェックを入れるとニュース欄の表示ができます。ニュース欄はナビバーの下に表示されます。4-2.ニュース欄の文章ニュース欄に表示する文章の設定ができます。リンクが設定できるため、ここでは短めの文章を設定し、リンク先で詳細を書くのがおすすめです。4-3.ニュース欄のリンク先こちらでリンク先が設定できます。固定ページや記事ページなどをリンク先として設定しましょう。4-4.ニュース欄の背景色(1色目)/4-5.ニュース欄の背景色(2色目)ニュース欄の背景色が設定できます。2色を異なる色で設定すればグラデーションになり、同じ色で設定すれば単色になります。グラデーション単色4-6.ピックアップ部分ピックアップ部分は画像を設定する(4-7/4-9/4-11/4-13/4-15)ことで使用できるようになります。各画像にリンクがつけられるので目立たせたい記事やページのためのスライダーのようなものになります。デフォルトではオフになっていますが、デザインを選択することでオンになります。1-1でデザイン4を選択していると表示されません。デザイン1デザイン25.フォントの設定5-1.サイトタイトルのフォントロゴを作るのが面倒であったり、さくっとサイト制作を済ませたいときなどなど、サイトタイトルを文字で表示する場合にサイトタイトルに適用するフォントを9種類の中からお選びいただけます。抜き手書き風カクカクはんなりにくきゅう5-2.サイト全体のフォントタイトル部分は上の項目(5-1)で変更が効きます。タイトル部分以外のサイトの全ての箇所のフォントを変更できるのがこの項目です。あたりが可読性の観点からはおすすめです。画像をクリック/タップでズームします。ディティールを確認してみてください。上の5-2項目で設定したフォントを記事内の見出しのみに適用することができます。<h2>〜<h4>までの見出しに適用されます。5-4.サイトタイトルの文字サイズサイトタイトルを文字で表示する場合、文字サイズを変更できます。単位はパーセントで、160パーセントがデフォルトです(通常の文字サイズの1.6倍)。200にすれば通常の文字サイズの2倍といったイメージです。5-5.【PC】サイトの文字サイズ/5-6.【タブレット】サイトの文字サイズ/5-7.【スマホ】サイトの文字サイズこちらも単位はパーセントです。PCでの文字サイズを基準としてスマホやタブレットでの文字サイズを設定できます。こだわりがない場合はデフォルトのままがおすすめです。各所の文字色や背景色の設定ができます。6-1.メインカラーサイト全体のメインカラーです。好きな色を設定すればいいかとは思いますが、こんな意見もあったりします。ブランドカラー赤だと通常のボタン、リンク、削除ボタン、セール、警告がほとんど同じ色になるから、デジタルでは使いにくい色だぞっと。個人的には緑、紫、ピンク、茶色、オレンジまわりがオススメだと思ってるけど、とにかく赤と黒はムズイ。20196-2.サブカラーメインカラーより少し薄い/明るい色がおすすめです。メインカラーを基準にそれより薄いか明るい色推奨6-3.アクセントカラーこちらもお好みの色を選択すればいいかと思いますが、特に何もなければ補色など選べばいいかと思います。補色は平たく言うと色彩表において反対に位置する色のことです。7.ナビメニューの設定ナビメニューの設定ができます。7-1.ナビメニューの横幅に上限を設けるナビメニュー内のコンテンツ(ロゴやメニューなど)はデフォルトだと左右端に目一杯に広がっていきます(下画像1枚目)。この項目にチェックを入れるとコンテンツエリアの横幅に合わせて位置が調整されます。上限なし上限あり7-2.サイトタイトルを中央寄せにするチェックを入れるとロゴやサイトタイトルをナビメニュー内の中央に配置できます。7-3.ナビメニューをサイト上部に固定するナビメニューをサイト上部に固定ができます。スクロールに追従してくるイメージです。7-4.ナビメニューの固定に伴うアニメーション7-3にチェックを入れているとき、スクロールに合わせてナビメニューが縮小します。スクロールするとナビメニューが追従してくるだけでなく、全体的に縮小します。7-5.ナビメニューの背景透明化ナビメニューの背景を透明化します。7-3で固定されていた時のことを考慮し、背景がすりガラス風に透けるようにしました。この背景すりガラス風のデザインはAppleなども採用しており、最近流行っている手法になります。背景がすりガラス風になる7-6.メニューアイコンスマホやタブレットでのサイト閲覧時にナビメニューの左上に表示されるハンバーガーメニューアイコンを変更できます。ハンバーガーメニューアイコン1ハンバーガーメニューアイコン2ハンバーガーメニューアイコン3ハンバーガーメニューアイコン47-10.メニューの下の英文字1メニューの下に英文字を設定できます。7-15.スマホで表示されるメニューで運営者プロフィールを非表示ハンバーガーメニューをクリックすることで表示されるサイドメニュー内に運営者プロフィールを表示する部分があります。それをオフにすることができます。背景画像を変更できます。デフォルトではデフォルトのメインカラー/アクセントカラーに合わせたグラデーションになっています。運営者プロフィールの名前と画像です。運営者プロフィール画像は丸く切り抜かれます。こちらで設定した名前は構造化データというSEOに一定の効果の見込まれるコード内でも使用します。表示するかどうかは別として設定しておいても損はしないかと。7-20.スマホで表示されるサイドメニューのタイトルサイドメニュー内のメニュー部分のタイトルを設定できます。デフォルトではMENUになっています。7-21.スマホで表示されるサイドメニューでメニューを非表示チェックを入れるとメニューを非表示にできます。ウィジェットからサイドメニューにウィジェットを追加することもできます。8.記事の設定8-1.記事一覧のデザイン記事一覧のデザインが変更できます。カード)デザイン2(厚みのあるカード)デザイン3(付箋付きカード)デザイン4(画像だけ)デザイン5(文字だけ)デザイン6(シンプルな文字と画像)ちなみにサイトスピード的な観点から言えば画像がないデザイン6がオススメではあります。8-3.pタグ下の余白調整pタグ下の余白幅が調整できます。デフォルトは0.5で、これは0.5文字分の余白を意味します。1と設定すれば1文字分、1.5とすれば1.5文字分が設定できます。8-4.「この記事を書いた人」を非表示チェックを入れると記事の作者を非表示にできます。記事の作者欄は記事本文下に表示されます。8-5.「この記事を書いた人」のタイトル記事作者部分のタイトルを設定できます。FontAwesomeを使用することも可能です。記事本文下に表示される関連記事を非表示にできます。関連記事は同じカテゴリーのものがランダムに最大6つまで表示される仕様です。8-9.関連記事のデザイン関連記事一覧のデザインが選択できます。記事本文の上部/下部のシェアボタンの表示/非表示が切り替えられます。8-11.アイキャッチ下シェアボタンのデザイン/8-12.本文下シェアボタンのデザインシェアボタンのデザインを切り替えられます。記事上部と下部にそれぞれ別のものを設定することも可能です。十二単ではデフォルトで目次が挿入されるようになっています。Contentsなどのプラグインを使用して目次を表示したい場合にはオフにすることもできます。十二単のデフォルトの目次では固定ページでは表示しないように設定してあります。固定ページでも目次を表示したい場合はチェックを入れてください。8-17.目次のデザイン目次のデザインは5種類から選択できます。色がついているデザイン(デザイン3/4/5)ではメインカラーやサブカラーが使用されます。デザイン1デザイン2デザイン3デザイン4デザイン59.記事装飾の設定9-1.目次のデザインぱんクズリストのデザインが選択できます。途切れてる部分は横スクロールができます。デザイン1デザイン29-2.記事内の見出し(h2)デザイン見出しのデザインが切り替えられます。現在は8種類のみとなっています。色は基本的にメインカラーで設定したものが使用されます。見出しデザイン1見出しデザイン2見出しデザイン3見出しデザイン4見出しデザイン5見出しデザイン6見出しデザイン7見出しデザイン89-5.記事内画像のポップアップ機能をオフ十二単では画像が自動でポップアップ(拡大)表示できるようになっています。この項目にチェックを入れるとこの機能がオフになります。画像のポップアップオンの状態だと拡大できることを示すために画像の左上に虫眼鏡マークが表示されます。オフにすると虫眼鏡マークも消えます。9-6.記事内リンクに自動でアイコンをつける機能をオフ十二単では記事内のリンクがリンクであることが分かりやすくなるようアイコンが自動で挿入される機能がついています。チェックを入れるとこの機能をオフにできます。アイコンありアイコンなし10.フッターの設定10-1.トップへ戻るボタンを表示するトップへ戻るボタンの表示/非表示が切り替えられます。トップへ戻るボタンは左下に固定され、アクセントカラーが適用されます。10-2.シェアボタンを表示するトップへ戻るボタンの上に位置するシェアボタンの表示/非表示が切り替えられます。シェアボタンは左下に固定され、サブカラーが適用されます。ホバーorタップで拡張します。10-3.スマホで独自フッターメニューを表示スマホで十二単独自のフッターメニューを表示することができます。10-4.独自フッターメニューのデザインフッターメニューのデザインは2種類ですが、デザインというよりは自由性の違いになります。デザイン1の方では僕の方で勝手に設定したものなので、カスタマイズなどが面倒という方にすぐにお使いいただけるものです。左からサイドメニューを開くボタン、サイト内検索ボタン、シェアボタン、トップへ戻るボタンとなっています。デザイン2の方は自由にカスタマイズが可能なものとなっています。具体的にはアイコン、アイコン下の文字、リンク先などが編集できます。10-20.フッターで12hitoeへのリンクを非表示にするフッター右下に表示される当サイトへのリンクを非表示にできます。わかってます、非表示にできるなら最初から付けるなって話ですよね、ごめんて。無料のWordPressテーマです。✒️たかさきしがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。キャンセル入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。内容をご確認の上、送信してください。お名前メールアドレス次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。👘CreatedBy。