サンプルガイド

このページでは当サンプルのざっくりとした作成の概要を紹介しています。

ひととおり、確認することでブログやサイトカスタマイズの1例となるヒントが詰まっているかと思います。

※キャプチャ画像には一部「EX版」も含まれます。

基本設定

\まずはココから/一般設定

「サイトのタイトル」「キャッチフレーズ」を設定しましょう。

「設定」>「一般設定」で「サイトのタイトル」「キャッチフレーズ」を変更できます。

基本的にサイトのタイトルは各記事の最後にも追加されるサイト全体の名称になります。

パーマリンク設定

パーマリンク設定で一度だけ更新する必要があります。

パーマリンクは「/」で終了する必要があります。おすすめは「投稿名」です

全体・トップページ

背景色

サイトの背景色は図ようなレイヤー(層)になっています。

上の層のカラー値を「空」にすることで下の層の背景色や背景画像を透過して表示できます。

PNG画像などを上手く使うことでユニークなデザインも作成することが可能です。

基本エリア設定の「背景色」では最下層(bodyクラス)の背景色を指定できます。

サブカラーとスタイルによって画像を使わずに背景柄を作ることも可能です。

\好きな文字に/フォントの種類

テーマでは任意のフォントに変える機能があります。自分が好きなサイトが使用しているフォントをマネして使うのもいいかもしれません。

テーマ管理の「全体設定」>「フォントの種類」ではサイトで使用するフォントの種類を変更できます。

Googleフォント

このサンプルではサイト名や見出しなどに別途「Lexend」フォントを設定しています。

https://fonts.google.com/specimen/Lexend

設定したいフォントを選択して黄色マーカーの部分を下記に記載します。

設定したい箇所にチェックまたはクラスで個別に指定できます。

ヘッダー

ロゴ・ アイコンロゴ画像

カスタマイザーの「ロゴ画像/サイトのタイトル」ではロゴ画像やアイコンロゴ画像、テキストカラーなどが変更できます。

サンプルでは「アイコンロゴ画像」を使用しています。

ロゴ画像と アイコンロゴ 画像は併用できません。

ロゴやサイトタイトルを中央寄せにしたい場合

テーマ管理の「ヘッダー」>”PCのみ”の「ヘッダーを分割しない」と「ヘッダーエリアをセンタリング」を有効にすると中央寄せになります。

ただし、その場合は以下の「ヘッダーメニュー(横列)」はPCで表示できなくなるのでご注意下さい。

上図の「ヘッダーエリアをセンタリング」のように薄くなって選択できない項目は、上にある(この場合は「ヘッダーを分割しない」)を先にチェックして保存すると選択できるようになります。

ヘッダーメニュー(横列)

サンプルではロゴと横並びで表示する「ヘッダーメニュー(横列)」を使用しています。

カラーはカスタマイザーの「ヘッダー」>”電話番号とヘッダーリンク”と連動しています

「ヘッダーメニュー(横列)」 を使用するにはまずメニュー設定で 「ヘッダーメニュー(横列)」 用のメニューを作成してチェックを入れて保存します。

「ヘッダーメニュー(横列)」 ではタイトル属性をサブテキストとして設定できます。

タイトル属性が確認できない場合は「表示オプション」のタイトル属性にチェックを入れて下さい。

準備ができたら「ヘッダーメニュー(横列)を有効化(960px以上)」を有効化します。

通常メニューと重複する場合は必要に応じて「PC用メインメニューを表示しない」もチェックを入れましょう。

流れるお知らせ

ヘッダー画像エリア上ウィジェットにテキストを挿入するとヘッダー画像の上に表示できます。

流れる文字のショートコードを使用すると簡単にテキストをアニメーションできます。

ヘッダー画像

カスタマイザーの「ヘッダー画像」ではヘッダー画像エリアに表示したい画像を設定できます。

背景画像として設定して、最低の高さを指定するとレスポンシブな背景画像として表示できます

さらにテキストやコンテンツを挿入したい場合はテーマ管理の「ヘッダー」>”ヘッダーコンテンツ設定”で作成できます。

他にもヘッダーエリアのデザインは様々なパターンが作れます(詳しくはコチラ

ヘッダーカード

ヘッダー画像下に表示するカード型のリンクはテーマ管理の「ヘッダー下 / おすすめ」>”ヘッダーカード”で設定できます。

背景色はカスタマイザーの「基本エリア設定」>「ヘッダーカードエリア」で変更できます

トップページコンテンツ

コンテンツの挿入方法

AFFINGERでTOPページにコンテンツを挿入する方法は表示設定で固定ページを選択する以外に以下の2つの方法があります。

原則として下記の方法を当テーマでは推奨しています

固定ページのIDを指定する

固定ページでトップページ用のコンテンツを作り、テーマ管理の「トップページ」>”トップページに固定記事を挿入」で記事IDを指定することで表示できます。

挿入コンテンツで作成する

テーマ管理の「トップページ」>”挿入コンテンツ”で直接作成することもできます。

Gutenbergで作成したい場合は「マイブロック」で一度作成しておいて生成されたショートコードを記載することでも可能です。

見出しデザインについて

サンプルの見出しは「ショートライン」を選択して「テキストを中央寄せ」にしています。

「新着」の部分を選択して「キャッチコピー」を反映させるとサンプルのようなデザインとなります。

記事一覧について

新着一覧のスライドショーはカテゴリスライドショーで実装しています。

カテゴリIDを「0」にすると全カテゴリーが対象になります

タブ式カテゴリー

タブ式のカテゴリーはテーマ管理の「トップページ」>”タブ式カテゴリ一覧”で有効化できます。

カテゴリIDは、カテゴリー一覧で確認できます。

サイドバー

サイドバーのコンテンツはウィジェットで挿入できます。

因みに「サイドバーウィジェット」のみカスタマイザーで背景色が指定できます

プロフィールカード

「プロフィールカード」ウィジェットを挿入することでプロフィールカードを表示できます。

アバターやヘッダー画像などはカスタマイザーの「オプション(その他)」>”プロフィールカード”で設定できます。

プロフィールカードの情報はプロフィール管理画面で設定できます。

テーマ管理の「投稿・固定記事」>”この記事を書いた人”>”プロフィール情報にhtmlタグを許可する”を有効化するとプロフィールで一部のhtmlが使用できるようになります。

検索フォーム

検索フォームはカスタマイザーの「オプション(その他)」>「検索フォーム」でカスタマイズできます。

カテゴリーリンク

サムネイル画像付きのカテゴリーリンクはEX版限定機能となります。

カラーはカスタマイザーの「基本エリア設定」>「サイドバー」>”サイトの文字色(一部カラーの強制変更)”が反映されます。

※但し、サイドバーの他のテキストにも反映されます

ウィジェットタイトル

ウィジェットタイトルはカスタマイザーの「見出しタグ(hx)/テキスト」>「ウィジェットタイトル」でカスタマイズできます。

タグクラウド

タグクラウド はカスタマイザーの「見出しタグ(hx)/テキスト」>「タグクラウド」でカスタマイズできます。

おすすめ記事一覧

おすすめ記事一覧は任意の記事をランキング風にして表示できます。

読んでほしい記事、読んだらブログやサイトのファンになってもらえそうな自信のある記事を掲載しましょう!

おすすめ記事はテーマ管理の「ヘッダー下/おすすめ」>”おすすめ記事一覧”で設定できます。

任意の 記事ID を「,(半角カンマ)」で区切って記載してください。

デザインはカスタマイザーの「オプション(その他)」>「おすすめ記事」で変更できます。

フッター

フッターエリアはカスタマイザーの「基本エリア設定」>「フッターエリア」でカスタマイズできます。

列数を増やす

フッターを2~3列にしたい場合はウィジェットエリアの「フッター右用ウィジェット(2列目)」と「フッター右用ウィジェット(3列目)」を使用しましょう

TOPに戻るボタン

TOPに戻るボタンはカスタマイザーの「オプション(その他)」>「TOPに戻るボタン」でカスタマイズできます。

投稿・固定記事

記事が表示される投稿(main)エリアはカスタマイザーの「基本エリア設定」>「mainエリア(記事)」でカスタマイズできます。

見出しの装飾

見出しタグはカスタマイザーの「見出しタグ(hx)/テキスト」でカスタマイズできます。

また、テーマ管理の「全体設定」>”フォントのサイズ”で各見出しタグのサイズや行間を変更できます。

リストの装飾

リストの基本カラーはカスタマイザーの「オプション(その他)」>「リスト(数字・チェック/ボックスタイプ)」で変更できます。

チェックデザインを枠なしのシンプルバージョン()にしたい場合もこちらで変更

Gutebergパーツの装飾

Gutebergの段落ブロックで使用できるスタイルやマーカー、ボーダーなどは「Gutenberg設定」で変更できます。

もくじの装飾

SUGOIMOKUJI(すごいもくじ)」のデザインはカスタマイザーの「オプション(その他)」>「目次プラグイン(すごいもくじ)」でカスタマイズできます。

カテゴリーページ

カテゴリページにも独自のコンテンツを挿入するなどのカスタマイズが可能です。

カテゴリ一覧の任意のカテゴリにマウスを当てると「編集」リンクが表示されるのでクリック。

編集ページの「説明」でコンテンツを挿入できます。

また、「背景色」を設定することでカテゴリごとのリンク背景色が設定できます。

EX版では「タグページ」もカスタマイズできます。

スマートフォン用の調整

ご注意

カスタマイザーによるスマートフォン用の設定は一部、PHP処理を介するため表示が異なる場合があります。

※下記キャプチャでは説明用に「Customizer Responsive Server」プラグインを使用しています(他社製プラグインのため、ご利用は自己責任にてお願い致します。)

ヘッダー

スマホ用のヘッダー背景色やメニューボタンなどはカスタマイザーの「各メニュー設定」>「スマホメニュー(スマホヘッダー)」で変更できます。

ヘッダーの高さなどはテーマ管理の「ヘッダー」>”スマホ(タブレットを含む)”で調整できます。

メニュー

使用するメニュー「ヘッダーメニュー(横列)」「スマホスライドメニュー」を作成しておきます

スマホメニュー / 検索フォーム

スマホ用のメニューや検索アイコンはテーマ管理の「メニュー」>”スマホスライドメニュー”で設定できます。

スマホ横列メニュー

スマホにも横列メニューを表示できます。

テーマ管理の「メニュー」>”その他のスマホメニュー”>”ヘッダーメニュー(横列)を有効化”を有効化します。

カラーはカスタマイザーの「各メニュー設定」>「スマホミドル/横列メニュー」が反映されます

スマホフッターメニュー

メニュー設定で「スマホフッターメニュー」用のメニューを作成しておきます。

サンプルのようにアイコンを並べたい場合は

<i class="アイコンのクラス名"></i><br>テキスト

というように記載します。

アイコンのクラス名はコチラで確認できます。<br>は改行を意味します

準備ができたらテーマ管理の「メニュー」>”その他のスマホメニュー”>”スマホフッターメニューを表示する”を有効化します。

カラーはカスタマイザーの「各メニュー設定」>「スマホフッターメニュー」で変更できます。

スマホフッターメニューを使用するとTOPページに戻るボタンは非表示になります

ダミーウィジェットについて

データには配置確認用のダミーウィジェットが設置されております(各ウィジェットは当マニュアルページへリンク)

確認後、ウィジェットエリアにある「配置確認用」ウィジェットは適宜、削除してください。