Simplicity2のカスタマイザー設定(全24項目)

WordPress管理画面からできるカスタマイズの備忘録だ。Simplicity2のカスタマイザーには多くの項目がある。実際に、このサイトで行ったWordpress管理画面から「外観→カスタマイズ」の設定を列挙してみた。

外観の方向性を決める カスタマイザー設定(24項目)

文字が主体のサイトにするつもりなので、文字のジャマになるようなデザインは避けたいところだ。基本的には、よけいな色やアイコンなどはつかわない。方向性としてはシンプルに!を目指した。

Simplicity2のバージョンは2.6.3。

サイト基本情報

「サイトのタイトル」は「ash.blue」。何の工夫もない。ドメイン名、そのまま。「キャッチフレーズ」は「Feed Me With Your Kiss」。思いつきだ。My Bloody Valentineの曲名から。サイトアイコンは「512 × 512ピクセル以上の正方形」ということで適当に用意した。

参考にしたのはこのサイト。日本語のサイトなので、日本の伝統色を指定してみた。変更は以下の通り。

日本の伝統色の名前とカラーコードが一目でわかるWEB色見本
  • 背景色 白 → 生成り色きなりいろ #fbfaf5
  • リンク色 デフォルト #2098a8 → 青藍せいらん #274a78
  • リンクホバー色 #cc0033 → 茜色あかねいろ #b7282e
  • グローバルナビ色 #f7f7f7 → 錆鼠さびねず #47585c
  • フッター色 #555555 → 錆鼠さびねず #47585c

ヘッダー

デフォルトではヘッダーの高さが小さすぎるように感じられたので、少し広げてみた。今後、さらに高くする可能性を考えて、「ヘッダー外側背景画像」は余裕を残してある。PCとモバイルで微妙に画像が異なるが許容範囲ということで。「ロゴ画像」は設定していない。

  • ヘッダーの高さpx(デフォルト:100) → 120
  • 現在のヘッダー → 設定せず
  • ロゴ画像 → 設定せず
  • ヘッダー外側背景画像 → 1280×200の画像をアップ
  • グローバルナビを横幅いっぱいにする → チェック
  • モバイルヘッダー背景画像 → 1280×480の画像をアップ

背景画像

昔は無料ブログなどでタイル状に敷き詰めた背景画像を好んでつかっていたけれど、最近はあまり趣味ではないのでスルーした。今後もこのままで。

スキン

素晴らしい機能だ。サイトはコンテンツ優先で、デザイン性はあとまわしという方にピッタリだと思う。いくつかのデモサイトもチェックしたが、今回は「選択しない(デフォルト)」で。

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

「サイトフォント」はCSSで文字指定する。サイトのフォントは重要だと思っている。文字がメインなので「抜粋文字数」は増やした。「検索ボックスのスタイル」は背景色に合わせて、グレーを選んでいる。「メニューボタンのアイコン」「トップへ戻るボタンのアイコン」「トップへ戻るボタンに画像を指定」はデフォルトのままにした。「404イメージ」はカスタマイズが落ち着いてから。

  • サイトフォント → デフォルト
  • 一覧リストのスタイル エントリーカード(デフォルト) → サムネイル表示
  • サムネイルの角の丸め具合 → 丸めない(デフォルト)
  • 抜粋文字数(デフォルト:70) → 95
  • 抜粋に「メタディスクリプション」 → チェックせず
  • 検索ボックスのスタイル → グレー四角
  • ページネーションタイプ  → レスポンシブ(デフォルト)

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

「本文文字サイズ」はデフォルトの16px。大きすぎるとの意見もあるようだけれど、個人的にはこれがベターだと思っている。「完全レスポンシブ表示を有効」にはチェックを入れなかった。「関連記事の表示」に関してはすべてデフォルトのままだ。「関連記事表示数」は減らすかもしれない。デフォルトの10記事は多すぎるような気がする。

  • 本文文字サイズ(全角文字数) → デフォルト
  • 完全レスポンシブ表示を有効 → チェックせず
  • 関連記事の表示 → デフォルト
  • 関連記事の関連付け → カテゴリに関連付け(デフォルト)
  • 関連記事表示数 → デフォルト
  • [前ページ] [次ページ] ナビタイプ → デフォルト

レイアウト(モバイル)

また、この項目は触っていない。CSSでの変更も含めて、カスタマイズ後は念のためにiPhoneでチェックしている。モバイルからにアクセスが多い現状はわかっているが、とりあえず後回しということで。

画像

「アイキャッチを自動設定」は嬉しい機能だ。プラグインなしでアイキャッチを設定できるのはありがたい。YouTubeのサムネイル取得までできるのは感動した。「画像リンク拡大効果のタイプ」はCSSで設定するのでチェックしていない。

  • アイキャッチを自動設定 → チェック
  • 画像リンク拡大効果のタイプ  → 拡大効果なし

SEO

「トップページのメタディスクリプション」は空欄にした。そのうち何か思いついたら適当な文章を埋めると思う。「トップページのメタキーワード」はそれほど意味がないと思うので空欄。

※閑話休題

「外観→カスタマイズ」の参考にしたの本家Simplicityのサイト。「Googleサイト内検索」でわからないキーワードを入れると、たいていは解決した。古い情報でも、新しい情報と置き換えてあったりして、とても親切だと思う。感謝!

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

SNS

カラフルだったり、大きすぎるSNSボタンは苦手。なので、もちろん、メッセージは最低限にしか設定していない。「ツイート数を表示」もチェックを外してある。フォローを促すアイコンも「Twitter」「Feedly」「RSS」しか表示していない。「Facebook OGP」に関しては以前、別のサイトで使用したときにIDを取得したけれど、ここではスルー。項目が多いので、下は一部だけを列挙してみた。

  • シェアボタンのタイプ(PC) → Twitterタイプ(高速)
  • タイトル下にシェアボタンを表示 → チェック外す
  • 本文下シェアボタンを表示 → チェック
  • シェアメッセージ → なし
  • ツイート数を表示 → チェック外す
  • フォローメッセージ → Feel free to follow me!
  • Twitterカードタグを挿入 → チェック
  • Twitterカードタイプ → サマリー(summary_large_image)
  • FacebookOGPタグを挿入 → チェック
  • OGPやTwitterカードのホームイメージ → 最低サイズの画像をアップ
  • フォローボタンに色をつける → チェックしない

アクセス解析(Analyticなど)

「Google Analytics」と「Google Search Console」はすでにアカウントを持っていたので、新しくサイトを追加した。詳しくはこちら。

Simplicityは、Google AnalyticsのトラッキングIDを設定するだけでGoogle Analyticsの計測を開始することが可能です。以下では、Simplicity上でトラッキングIDの設定を行い、アクセス解析を行う方法
Simplicityでは、「外観’カスタマイズ’アクセス解析」からGoogleのウェブマスターツールのサイト認証を行うことができます。その手法を簡単に説明します。サイト所有者確認方法まずは、ウェブマスターツールにログインし「サイトの追加」ボ

広告

広告は今のところ設定していない。まったく触らなかった。Google AdSenseのアカウントやメジャーなASPには登録しているので、そのうち設定すると思う。

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

サムネイルを右側にしたのは本文のバランスがどうしても左寄りになるのは緩和するだめだ。やはりブログカードは便利。内部リンクは「はてブ数を表示」しないようにした。

  • ブログカード有効 → チェック
  • サムネイルを右側にする → チェック
  • 新しいタブで開く → チェック外す
  • はてブ数を表示 → チェック外す
  • 日付表示 → 投稿日を表示(デフォルト)

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

Simplicity独自のカードなので少し迷った。外部のリンクはそれほどつかわないと思っている。おそらく、最も貼り付ける機会が多いのはYouTubeあたりだろう。正直にいえば、外部のサイトが消えることも多いので、ブログカードは最小限に抑えた方が安全だと感じている。

  • ブログカード有効 → チェック
  • 外部ブログカードタイプ → ブログカード(独自キャッシュ)
  • サムネイルを右側にする → チェック
  • 新しいタブで開く → チェック
  • はてブ数を表示 → チェック

ソースコード

使用するのはSimplicityカスタマイズのネタぐらいだと思う。「ソースコードをハイライト表示」を選んだ。あまり派手な見た目でなければいいでしょ。どのような感じになるのかは次のページを参考にした。

Simplicity2.1.6からプラグインを使用せずとも、ソースコードをハイライト表示出来るようになりました。ソースコードのハイライト表示には、jQueryプラグインのhighlight.jsを利用しています。ハイライト機能追加は、以前か

コメント

「コメントの表示」は切っている。これは完全に好みの問題だろう。以前ほど、ひとつひとつの記事に対して、誰にでも読めるコメント欄が必要かどうか疑問を感じているという気持ちもあった。

AMP(β機能)

スルーした。もう少しモバイルでのAMPに必要性が感じられたら考え直すと思う。

テーマ内テキスト

基本、英語に変えてある。本文が日本語なので、「テーマ内テキスト」は英語の方がさっぱりしているかな……という程度だ。それほど深い意味はない。日付表示はすべてデフォルト。

  • パンくずリストのホームを変更 → Home に変更
  • 関連記事タイトルを変更 → Related Posts に変更
  • 「記事を読む」の変更 → Read more に変更
  • 「続きを読む」の変更 → Read more に変更

管理者機能

ビジュアルエディターに「Simplicity」を選んでいる。あまり慣れてしまうと他のWordPressで困るような気もするけれど、やはりめちゃくちゃ見やすい。

  • ビジュアルエディターにSimplicityスタイルを適用 → チェック!
  • タイトル等の文字数カウンター表示 → チェック!!
  • 管理者用PV表示 → 一応チェック(あとで外す予定)

その他

「ファビコン」は設定しなかった。サイトの下にあるライセンス表示は「Copyright©」を選んだ。残りの項目はデフォルトのまま。

メニュー

とりあえず、いくつかの項目を作成してみた。あとは記事が増えてから随時、追加していくつもり。ただ、「Home(ホーム)」は不要だと思っているのでつくっていない。固定ページは「Profile」「Mail」と英語表記にしている。「Font Awesome」を利用してアイコンを付けてみた。ヘッダーナビとフッターナビ(サブメニュー不可)の両方にチェックしている。

ウィジェット

サイドバーウィジェットには上から順に「検索」「新着・人気記事」「カテゴリー」「アーカイブ」「タグクラウド」を設定した。しばらくして変更するかもしれない。タイトルはここでも英語。フッターにはウィジェットを設定していない。

追加CSS

CSSは子テーマでカスタマイズするので、ここは利用しないと思う。はてなブログなどの無料ブログではお世話になった項目だけれど。

カスタマイズはWordPressの楽しみ

Simplicity2のカスタマイザーには、ここに触れなかったものもある。もしかすると漏れ落ちている項目があるかもしれない。Simplicityがバージョンアップして項目が増えたり減ったりしたときはその都度、追加や削除していく。

「カスタマイズに時間をかけるのはムダだ」と言う人もいる。自分好みのサイトをつくるカスタマイズはWordPressの楽しみだ。自己満足と言われても、それはそれでいい。個人的には最高のオモチャだと思っている。