Snow Monkeyカスタマイズガイド

Snow Monkeyには、数多くのカスタマイズ項目があり、自分好みのウェブサイトに仕上げることができます。ここでは、各設定項目について紹介していきましょう。

カスタマイズを始めるには

カスタマイズは、WordPressの管理画面にログインして、左側のメニューから「外観→カスタマイズ」メニューをクリックしましょう。次のような、カスタマイズ画面に移動します。

左の各項目を変更すると、右側のプレビューが変化します。これを見ながらカスタマイズしていきましょう。

各設定項目について

Snow Moneky コミュニティ

ここでは、Snow Monkeyのサポートページなどに移動することができます。

サイト基本情報

ロゴ

画像ファイルをアップロードし、ウェブサイトの上部などにロゴマークを表示することができます。

サイトのタイトル

ウェブサイトの名前を指定します。企業名やサービス名など、そのサイトの名前を入力してください。

キャッチフレーズ

ウェブサイトの説明を一言加えます。「ヘッダー」のカスタマイズで表示したりすることができます。必要ない場合は、空欄でも構いません。

コピーライト

フッター部分に著作権表記をすることができます。リンクを設定することもできます。

サイトアイコン

ウェブブラウザーのアドレス欄などに表示される、小さなアイコンを設定できます。

メニュー・ウィジェット

メニューのカスタマイズについては、別途「メニューを作ろう(執筆中)」をご参照ください。また、ウィジェットについては「 ウィジェットを活用しよう (執筆中)」をご参照ください。

ホームページ設定

WordPressは標準ではトップページに、最新の投稿が時系列で表示されるブログ的なレイアウトで固定されています。これを、「固定ページ」にすることでトップページでコンテンツを展開したり、最新のニュースを数件だけ表示することができるなど、自由にレイアウトができます。

「固定ページ」を選択したい場合は、あらかじめ次の2つの固定ページを作成してください。

  • フロントページ用の固定ページ: ここでトップページの内容を作成して行きます
  • 投稿ページ用の固定ページ: この固定ページは内容を空にしておいて構いません。「パーマリンク」を変更しておく必要があります。

ホームページ設定について詳しくは、「固定ページをフロントページにする方法」をご参照ください。

追加CSS

CSSを直接記述して、細かくカスタマイズする場合はここに入力していきます。この機能については詳細を省略します。

デザイン

ここでは、デザインの細かい設定を行うことができます。

基本デザイン設定

アクセントカラー・サブアクセントカラー

強調文字の色や、ラベルなどで使われる色を設定できます。

基本の文字サイズ・基本フォント

本文などで使われる文字サイズを変更できます。ここで設定した内容に合わせて、全体の見出しの大きさなどのバランスも調整されます。通常は 16px程度、小さくても 14px異常に設定すると良いでしょう。

コンテンツの最大幅

コンテンツの幅を設定できます。狭くした場合は、表現に制限が出る代わりにスマートフォンとデスクトップの見た目の差が少なくなります。

パンくずリストの表示位置

記事の詳細ページの「パンくずリスト」を画面の上部と下部のどちらに表示するか、およびその幅を設定できます。

記事一覧レイアウト

投稿の一覧などで、次の3種類から選ぶことができます。

デフォルトページヘッダー画像・デフォルトアイキャッチ画像

各記事にアイキャッチ画像を指定しなかった場合に表示される、標準の画像がある場合に指定することができます。

その他の設定項目

  • サイトの概要をサイトロゴの下に表示する – 「キャッチフレーズ」がヘッダーに表示されます
  • Pure CSS ギャラリーを使用する – 「Pure CSS」という CSSライブラリーが利用されます
  • more タグとパスワード保護を同時に使用している場合、moreタグより前のコンテンツ表示する – 「パスワード保護」をした記事で、記事の一部を表示するかを選択します
  • ドロワーナビゲーション内に検索ボックスを表示する
  • ページ上部へ戻るボタンを表示

ヘッダー

ヘッダーレイアウト

ヘッダーのレイアウトを次の種類から選択できます。

グローバルナビゲーションを縦書きにする

縦書きメニューを利用できます

ヘッダー位置・PC用ヘッダー位置

次の各組み合わせで選ぶことができます。

  • 上部固定・オーバーレイ – 最初に表示されるメニューがそのまま固定されるか、スクロール時に上からメニューが被るか(オーバーレイ)を選びます
  • 背景色 – オーバーレイは透明色、ノーマルや上部固定は白になります
ヘッダーコンテンツ

ヘッダー部分に、HTMLを挿入できます。常時表示するバナーなどを掲載できます。HTMLタグをそのまま挿入する必要があります。また、「モバイルでもヘッダーコンテンツを表示」にチェックをつけると、スマートフォンでも表示されます。

フッター

フッターウィジットエリアのカラム数

フッターの列数を決められます。数が多いほど、多くのウィジェットが設置できます。

アーカイブページレイアウト

ニュースの一覧ページなどのレイアウトを次の中から選ぶことができます。

  • ランディングページ(スリム幅) ※
  • ランディングページ ※
  • 左サイドバー
  • フル幅
  • 1カラム(スリム幅)
  • 1カラム
  • 右サイドバー

ランディングページというのは、CSSでのカスタマイズが前提のレイアウトで余白などがまったくなくなります。

お知らせバー

画面の上部に、お知らせを常時掲載することができます。コンテンツ、リンク先とテキストカラー、背景色をカスタマイズできます。緊急のお知らせや、常時掲載したいキャンペーン情報などにご利用ください。

デザインスキン

デザインスキンは、Snow Monkeyのウェブサイトの見た目を変化させることができるスタイルシートです。無償で配布されているものなどから変更することができます。

SEO

ここでは、検索エンジン最適化(SEO)に関する設定を行うことができます。各設定項目については、専門的な知識が必要なため、ここでは説明を省略します。

SNS

Twitterや Facebookのシェアボタンの設置の他、Facebookのいいね数のカウントや、Facebookページへのいいねの誘導などを設置できます。

広告

Google Adsenseを利用した広告配信を行う場合、発行されるタグなどをここに設置します。

ページ速度最適化

ページの表示速度をより早めて、Googleの評価を上げたり、利用者のストレスを軽減することができます。

Snow Monkeyの JavaScript読み込みを最適化する

JavaScriptの読み込みを遅らせて表示速度を速めます。ただし、JavaScriptのプログラムによっては動作しなくなる時などがあるため、その場合はこれを解除します。

jQueryの読み込みを最適化する

上記と同様に、jQueryの読み込みを最適化します

HTTP2 Server Pushを利用する

HTTP2という高速な通信を利用します。ただし、対応したサーバーでのみ利用できます。

CSS headに出力する

通常、外部ファイルとして読み込まれる CSSファイルを直接記述させることで、ファイルのダウンロード数を減らすことができます。HTMLソースが見にくくなると言うデメリットがあります。

ブラウザキャッシュを利用する

ブラウザーのキャッシュ機能を最適化します。対応したサーバーが必要です。

メニューをキャッシュ

メニューをキャッシュして、保存しておくことで表示速度を速めます。正し、キャッシュが更新されないとメニューが変わらないなどの弊害があります。メニューの内容が変わらなくなるタイミングなどに ONにしましょう。

画像の非同期読み込み

画像ファイルをページの読み込みとは分けて(非同期)読み込みます。ページ自体の表示速度が速くなりますが、画像を多用しているウェブページの場合は、内容が分からなくなるなどの恐れがあります。

軽量な FontAwesomeを利用する

FontAwsomeとは、アイコンを利用するためのファイル群です。これを、軽量のものを利用することで表示速度を速めます。ただし、使えるアイコンの個数が減るなどの弊害があります。

この記事を書いた人

谷口 允(たにぐち まこと)

エイチツーオー・スペース代表。関連会社でオンライン教育コンテンツ制作会社「ともすた」代表も勤める。

「ウェブをちゃんと」をテーマに、ウェブや動画を「ちゃんと」活用するためのアドバイスなどを行う。
主な著書に「よくわかるPHPの教科書」や、「マンガでざっくり学ぶプログラミング(監修)」など。