Simplicity2のカスタマイズ

ワードプレスをホームページ形式で使う方が多いのですが、ブログとして使いたいいう方もいらっしゃいます。その場合、無料のブログテーマとして「Simplicity」「Stinger」「Mesoclumn」などをお勧めしています。
Simplicity はブログテーマとして簡単にカスタマイズが出来てとても便利です。CSSを書かなくても提供しているカスタマイズのオプションを調整していけば、かなり「自分好みのサイト」に仕上がっていきます。
カスタマイズは管理画面の「外観」-「カスタマイズ」から設定できます。ただ、左のサイドバーに現れるカスタマイズ項目があまりにも多く、各項目を展開して内容を確認するのが大変だと感じました。このため、各項目を一覧表にして全体を把握できるように説明してみましたのでお役立てください。
※Simplicity には、「Simplicity1」と「Simplicity2」があります。この記事では「Simplicity2」2.4.0を使って説明しました。
本家のサイトはコチラからどうぞ。https://wp-simplicity.com/

1.サイト基本情報

・サイトのタイトル、キャッチフレーズ・・・WP「設定」と同じ
・サイトアイコンはサイトのアプリとブラウザーのアイコンとして使用されます。(ファビコンの役割もあるようです)
アイコンは正方形で、幅・高さともに 512 ピクセル以上である必要があります。

2.色

テーマで使用している色を変更します。
・背景色:全体の背景色です。(デフォルト色:#ffffff)・・WPの当初「カスタマイズ」と同じでは?
・リンク色:通常のリンク色です。(デフォルト色:#2098a8)
・リンクホバー色:マウスカーソルが乗ったときのリンク色です。(デフォルト色:#cc0033)
・ヘッダー外側背景色画面幅いっぱいに広がるヘッダーの背景色です。(デフォルト色:transparent)
・ヘッダー内側背景色:ヘッダー内側の背景色です。(デフォルト色:transparent)
・サイトタイトル色:サイトタイトルの文字色です。(デフォルト色:#222222)
・サイト概要色:サイトキャッチフレーズの文字色です。(デフォルト色:#777777)
・モバイル時ヘッダー背景色:画面幅いっぱいに広がるモバイルヘッダーの背景色です。(デフォルト色:transparent)
・モバイルサイトタイトル色:モバイル時のサイトタイトルの文字色です。(デフォルト色:#222222)
・モバイルサイト概要色:モバイル時のサイトキャッチフレーズの文字色です。(デフォルト色:#777777)
・グローバルナビ色:グローバルナビ(メインメニュー)の背景色です。(デフォルト色:#f7f7f7)
・グローバルナビリンク色:グローバルナビリンクの文字色です。(デフォルト色:#111111)
・グローバルナビリンクホバー色:マウスカーソルが乗ったときのメニュー項目の背景色です。(デフォルト色:#dddddd)
・メニューボタン色:モバイル用メニュー表示ボタンのアイコン色です。(デフォルト色:#333333)
・メニューボタン背景色:モバイル用メニュー表示ボタンの背景色です。(デフォルト色:transparent)
・トップへ戻るボタン色:トップに戻るボタンのアイコン色です。(デフォルト色:#ffffff)
・トップへ戻るボタン背景色:トップに戻るボタンの背景色です。(デフォルト色:#aaaaaa)
・フッター色:フッター部分の背景色です。(デフォルト色:#555555)

3.ヘッダー

ヘッダーで使用する画像や、ロゴ、グローバルナビの幅に関する設定です。
新規追加をクリックした後に、好きなように画像を切り取ることができますが、お使いのテーマはヘッダーの高さとして 1070 × 100 ピクセルを推奨しています。
・ヘッダーの高さpx(デフォルト:100):画面トップからグローバルメニューまでの高さです。
(※ヘッダー画像の設定をする前に高さの設定推奨)
・ロゴ画像:タイトルテキストの代わりとなるロゴ設定します。
(※表示させるには「ロゴを画像にする」を有効にする必要あり)
・ロゴを画像にする:タイトルロゴを画像にするか。チェック
・ヘッダー外側背景画像:画面幅いっぱいに広がるヘッダー画像を設定します。
(※画像の高さは高めに設定しておいてください)
・グローバルナビを横幅いっぱいにする:グローバルナビを画面幅いっぱいに広げて「ヘッダー外側背景画像」に合わせるか。チェック
(※「色→グローバルナビ色」の設定も併せて行う必要があるかもしれません)
・ヘッダーの高さpx(デフォルト:0):モバイルでの画面トップからグローバルメニューまでの高さです。
(※0にするとデフォルト設定になります)
・モバイルヘッダー背景画像:画面幅いっぱいに広がるモバイルヘッダー画像を設定します。
(※画像の高さは高めに設定しておいてください)

4.背景画像

背景画像は・・・WPの当初「カスタマイズ」と同じ

5.スキン

手軽にデザインを変更することができます。[P]マークがついているものは、フォルダ内のCSSファイルを結合して適用表示するパーツスキンです。※スキンで設定されたスタイルは親テーマ・子テーマで設定されたものより優先されます。
以下の18種類のデザインが用意されています。自分でスキンを作成し、FTPでサイトにアップロードして利用することもできます。
・選択しない(デフォルト):背景白のデフォルト
・[P] 親テーマパーツスキン:変化なし
・[P] 子テーマパーツスキン:変化なし
・瑠璃紺きなり:メニュー背景色ネイビーブルーで、全体背景色きなり
・深紅きなり:メニュー背景色エンジで、全体背景色きなり
・淡桜:メニュー背景色さくらで、全体背景色グレー、サイドバー文字ピンク
・淡なのはな:メニュー背景色黄色で、全体背景色グレー
・淡空:メニュー背景色そらいろで、全体背景色グレー
・シック:メニュー背景色黒で、全体背景色グレー
・ビジネスメニュー:色はデフォルトでメニューの形が四角で区切られる
・ラージピクチャーヘッダー:ヘッダーが木目の画像付き
・ラージピクチャー(ストロベリー)ヘッダーがイチゴの画像付き
・ホワイティー:デフォルトに近い。メニューの枠線が無い
・バブルラップメニュー(サブメニューなし):メニューが黒色で変化が付く
・オレンジメニュー(サブメニューなし):メニューがオレンジで変化が付く
・1カラム:サイドバーが無くなる
・Monokai:真黒なムード
・スキンテンプレート(独自カスタマイズ用):変化なし
・子テーマスキンテンプレート(独自カスタマイズ用):変化なし

6.レイアウト(全体・リスト)

サイト全体や一覧リストページのレイアウトに関する設定です。
・完全レスポンシブ表示を有効:パソコンとモバイルでシームレスな完全なレスポンシブデザイン表示になります。
・PCでサイドバーをレスポンシブ表示:PC表示時にサイドバーをレスポンシブ表示するか。オフにするとレスポンシブ表示されません。
(※完全レスポンシブ機能がオフの時のみ有効な設定)
・ サイトタイトルの中央寄せ:サイトのタイトルをヘッダーの中央にするか。(※トップのフォローボタンは表示されなくなります)
・ グローバルナビを表示:グローバルナビ(メインメニュー)を表示させたくないときはオフにしてください。
・一覧リストのスタイル
トップページ一覧(インデックス)ページの表示スタイル設定。
①エントリーカード(デフォルト)
② 大きなエントリーカード
③ 最初だけ大きなエントリーカード
④ 本文表示
⑤最初だけ本文表示
⑥ サムネイル大
⑦タイル2列
⑧ タイル3列
⑨タイル2列 画像縦横比保存(要再生成)
⑩タイル3列 画像縦横比保存(要再生成)

・固定ページも一覧リストに含める:固定ページを一覧リスト(インデックス)に含めるか。
・エントリーカード全体をリンク化:インデックスリスト・関連記事のエントリーカードやブログカード全体をAタグで囲ってリンク化するか。
・サムネイル表示:サムネイルを表示するか。(※テキスト主体ページなどではオフ)
・サムネイルの角の丸め具合: サムネイル角のスタイル。
①丸めない(デフォルト)
②角を丸める
③円形にする
・抜粋文字数(デフォルト:70):インデックスリストや関連記事、ブログカードで表示される抜粋文字の文字数を設定します。
・抜粋の末尾文字(デフォルト:…):抜粋文の末尾に付属する文字列を設定します。
・抜粋に「メタディスクリプション」項目を利用:記事一覧・ブログカードのスニペットに投稿管理画面の「SEO設定」項目にある「メタディスクリプション」テキストを使用します。「メタディスクリプション」が入力されていない場合は「抜粋」が使用されます。(※双方とも未入力の場合は記事本文冒頭の抜粋文)
・サイドバーの幅を336pxに(デフォルト300px):サイドバーを「レクタングル(大)」幅に設定します。
(※ヘッダー画像を既に設定している場合は要再設定)
・サイドバーの背景を白色に:サイドバーの背景色を白色に設定します。
(※背景画像などを設定して、サイドバーが見づらくなったときなどに)
・サイドバーを左側に表示:サイドバーを左側に表示するようにレイアウトを変更します。
・検索ボックスのスタイル:検索ボックスのデザイン設定。設定方法
①ホワイト四角(デフォルト)
②ホワイト丸型
③グレー四角
④グレー丸型
・ページネーションタイプ:インデックス一覧リストのページ送りのタイプ設定です。
①レスポンシブ(デフォルト)
②旧ページネーション
・フッターを背景色と同じにする:フッターを透過色にして背景を表示します。
・メニューボタンのアイコン(デフォルト:fa-bars):メニュー表示ボタンのアイコンフォントを設定します。
※モバイルや、レスポンシブ表示になった時に表示されるメニューボタン。
いわゆるハンバーガーアイコン表示で、メニュー項目のアイコンではありません。
アコーディオンツリーメニューのアイコンは変更できません。
(※設定用のコードはFont Awesomeから取得します)設定方法
・ トップへ戻るボタンの表示:トップへ戻るボタンを表示するか。
トップへ戻るボタンのアイコン(デフォルト:fa-angle-double-up)
トップへ戻るボタンのアイコンフォントを設定します。(※設定用のコードはFont Awesomeから取得します)
・トップへ戻るボタンに画像を指定:こちらに画像が指定されている場合は、アイコンフォントが画像に入れ替わります。
・カレンダーに枠線を表示:カレンダーウィジェットに枠線を表示します。
・404イメージ:404ページに表示するイメージを設定してください

7.レイアウト(投稿・固定ページ)

投稿・固定ページのレイアウトに関する設定です。
・本文文字サイズ(全角文字数):パソコン表示時の本文文字サイズを設定します。
①14px(1行48文字くらい)
②15px(1行45文字くらい)
③16px(1行42文字くらい:デフォルト)
④17px(1行40文字くらい)
⑤18px(1行37文字くらい)
⑥19px(1行35文字くらい)
・長い単語を必要に応じて改行する:必要に応じて長い単語やURLを要素からはみ出さないように改行します。
ただし、この機能を有効にすると単語の途中で改行されることもあります。
・モバイルで<br>を表示:画面幅の狭いモバイル端末でbr改行を表示するか。
・投稿日の表示:投稿日を表示するか。(※一覧リストにも表示されます。)
(※非表示にするとGoogle Search Consoleで構造化データエラーが出る可能性があります。)
・投稿日と現在との時間差を表示:現在から投稿日を差し引いた人間の感覚的な時間差を表示します。
・更新日の表示:更新日を表示するか。
(※非表示にするとGoogle Search Consoleで構造化データエラーが出る可能性があります。)
・カテゴリ情報の表示:カテゴリ情報を表示するか。
(※一覧リストにも表示されます)
・コメント数の表示:コメント数リンクを表示するか。
(※コメントの設定でコメントを表示にしていないと表示されません。)
・タグ情報の表示:本文フッター部分にあるタグ情報を表示するか。
・投稿者情報の表示:本文フッター部分にある投稿者情報を表示するか。
(※構造化データに必要な情報が含まれているのでオフにすると、Google Search Consoleの構造化データエラーが出ます。)
・投稿者情報をTwitter IDに:投稿者にTwitterのIDリンクを表示します。
(※SNS設定でTwitter ID設定がされている必要があります。)
・編集リンクの表示:投稿・固定ページの管理画面に直接アクセスするための編集リンクを表示するか。
・本文先頭にアイキャッチ画像を表示:投稿・固定ページ管理画面で設定したアイキャッチを自動で本文トップに挿入するか。←現在これにチェック入り。※9.画像との関係参照
・先頭のアイキャッチにキャプションを表示:先頭のアイキャッチにキャプションが設定されているとき表示するか。
(※「本文先頭にアイキャッチ画像を表示」設定が有効の場合のみ)
・引用部分の幅を広げる:引用部分の横幅を広げ表示エリアを増やします。
・大きな表は横スクロール:横幅の大きな表(TABLE)は、横スクロール表示するようにして、モバイル端末などでも画面の横揺れを防ぎます。
・関連記事の表示:本文下の関連記事を表示するか。
・関連記事表示タイプ:関連記事の表示スタイルの設定です。
①デフォルト(推奨表示数3-10)
② サムネイル3列(推奨表示数3, 6, 9)
③ サムネイル4列(推奨表示数4, 8, 12)
・関連記事の関連付け:関連記事をカテゴリに関連付けるか、タグに関連付けるか。
①カテゴリに関連付け(デフォルト)
②タグに関連付け
関連記事表示数(デフォルト:10):関連記事の表示数を設定します。
・ [前ページ] [次ページ] ナビの表示:ページ送りナビを表示するか。
・[前ページ] [次ページ] ナビタイプ:ページ送りナビの表示スタイルの設定です。
①デフォルト
②サムネイル付き
・固定ページにパンくずリストを表示:固定ページにページの親子関係を利用したパンくずリストを表示するか。

8.レイアウト(モバイル)

モバイルのレイアウトに関する設定です。
・タブレットはモバイル表示:タブレット端末をモバイルとして表示するか。
・モバイルメニュータイプ:モバイル時、メニューボタンを押したときのスタイルです。
(※スライドイン機能は「完全レスポンシブ」機能がオンの時は利用できません)
①アコーディオン(デフォルト)
② アコーディオンツリー
③ モーダルメニュー
④ スライドインライト(ボタン上)
⑤ スライドインライト(ボタン下)
⑥スライドインダーク(ボタン上)
⑦スライドインダーク(ボタン下)
・スライドインメニューを日本語表示:スライドインメニューを日本語で表示するか。
(※モバイルメニュータイプをスライドイン選択しているとき。
・モバイルで1ページに表示する最大投稿数(デフォルト:10):モバイルのインデックスリストに表示される最大投稿数を設定します。
・モバイル本文文字サイズ:主にスマホ表示時の本文文字サイズを設定します。
①14px
②15px
③16px(デフォルト)
④17px
⑤ 18px
⑥19px

9.画像

投稿・固定ページの本文で使用されている画像に関する設定です。
・アイキャッチを自動設定:本文に最初に出てくる画像を利用してアイキャッチを自動設定するか。←現在これにチェック無し。※7.レイアウト(投稿・固定ページ)との関係参照
(※サーバーのphp.iniのallow_url_fopenがOffの時は外部サーバーから画像を取得できない可能性があります。)
・Lazy Loadを有効(画像の遅延読み込み):Lazy Loadを利用して本文にある画像を、表示するタイミングで読み込みます。
(※サーバーの負荷対策)
・Lazy Loadのエフェクトを有効:フェイドインエフェクトを有効にするか。
・Lazy Loadで読み込むタイミング:ページスクロールのどのタイミングで画像を読み込むかを設定します。
①スクロール表示と同時
②200px手前
③400px手前
④600px手前
⑤800px手前
・画像リンク拡大効果のタイプ:ライトボックス(画像拡大効果)のタイプを指定します。
それぞれは、jQueryライブラリ名です。詳細はリンク先を参照してください。Lightbox、Lity
①拡大効果なし
②Lightbox
③Lity(軽い)
・画像効果:本文画像の枠線の設定です。
①なし(デフォルト)
②ボーダー(枠線)
③シャドー(影)
・Alt属性値をキャプション表示:画像の上にマウスホバーするとAlt属性値を利用してキャプションを表示するかどうかを設定します。
①表示しない(デフォルト)
②管理者のみ(ログインユーザーのみ)
③全てのユーザー

10.SEO

SEOに関する設定です。(※既にプラグインを使用している場合は設定をオフにしてください)

11.SNS

ソーシャルサービスのシェアボタンやフォローボタンに関する設定です。

12.アクセス解析(Analyticsなど)

Google Analyticsや、Google Search Consoleに関する設定です。

13.広告

広告の表示や配置に関する設定です。

14.ブログカード(内部リンク)

サイト内にある投稿・固定ページへのリンクをブログカード化できる機能が標準で備わっています。
サイト内のURL(内部リンク)を入力するとブログカードとして表示します。
「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。以下のようにリンク先が表示されます。

  • 本文記事の1行にサイト内URLのみが記載されていたらブログカード化する
  • 1行にURL以外も記載されているとブログカード化しない
  • カード化されるのは「投稿ページ」「固定ページ」のみ
  • あくまで自サイトURLのみで他サイトのURLではカード化されない

WordPressエディターなどで編集していて、その本文中の1行を「サイト内URL」のみで使用していれば、URLがブログカードに置き換わるという仕様です。

15.ブログカード(外部リンク)

外部リンクブログカードに関する設定です。
ブログカード自体の使い方はブログカードの利用方法を。
外部リンクブログカードに関する設定は外部ブログカードの設定を参照してください。

16.ソースコード

ソースコードのハイライト表示の設定です。ハイライト表示には、highlight.jsを利用しています。詳しくは、ハイライト設定を参照してください。

17.コメント

コメント表示欄・入力欄に関する設定です。

18.AMP(β機能)

AMP(Accelerated Mobile Pages)に関する設定です。投稿ページをモバイル上で高速表示させるための仕組みです

19.テーマ内テキスト

テーマ内で使用されている定型文を変更することができます。
・パンくずリストのホームを変更(デフォルト:ホーム)
パンくずリストの「ホーム」のテキストを変更します。
設定は、投稿と固定ページ両方のパンくずリストに反映されます。
・関連記事タイトルを変更(デフォルト:関連記事)
関連記事のH3見出しを変更します。
・コメントタイトルを変更(デフォルト:コメント)
コメント欄ののH3見出しを変更します。
・返信コメントタイトルを変更(デフォルト:コメントをどうぞ)
コメントを促すテキスト変更します。
・コメントサブミットラベルを変更(デフォルト:コメントを送信)
コメント送信ボタンテキスト変更します。
・コメント入力凍結時のメッセージ(デフォルト:コメントの入力は終了しました。)
コメント入力欄を非表示にした時のメッセージを変更します。
・匿名のユーザー名を変更(デフォルト:匿名)
匿名でコメント投稿するユーザーのデフォルト名を変更します。
・「記事を読む」の変更(デフォルト:記事を読む)
一覧リストの「記事を読む」リンクのテキストを変更します。
・「続きを読む」の変更(デフォルト:続きを読む)
moreタグ以降の「続きを読む」リンクのテキストを変更します。
・リストタイトルの「一覧」を変更(デフォルト:一覧)
インデックスリストのタイトルに含まれる「一覧」部分を変更します。
・日付表示のフォーマット(デフォルト:Y/n/j)
投稿日や更新日の日付表示フォーマットを変更します。
・一覧:年月日のフォーマット(デフォルト:Y年m月d日)
インデクスリストの年月日表示フォーマットを変更します。
・一覧:年月のフォーマット(デフォルト:Y年m月)
インデクスリストの年月表示フォーマットを変更します。
・一覧:年のフォーマット(デフォルト:Y年)
インデクスリストの年表示フォーマットを変更します。
・検索ボックスのプレースホルダー(デフォルト:ブログ内を検索)
検索ボックスに表示されるテキスト変更します。
・見つからなかった時のメッセージ(デフォルト:記事は見つかりませんでした。)
記事が見つからなかった時に表示されるテキスト変更します。

20.管理者機能

管理画面やアドミンバー(管理バー)に独自機能を追加する設定です。

21.その他

ファビコンや、アップルタッチアイコン、その他の設定がまとめてあります。

22.メニュー

・・・WP「外観」と同じ

23.ウィジェット

・・・WP「外観」と同じ

24.固定フロントページ

・・・WP「設定」と同じ
———————————–

シェアする

  • このエントリーをはてなブックマークに追加

フォローする