snow_monkey_prepend_main

デザイン

snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

Snow Monkey 全体のデザイン設定を行う部分になります。

常時設定可能な項目とライブビュー表示ページによって切り替わる項目

常時設定可能な項目

基本的な設定項目として、以下のような項目があります。

項目名用途
基本デザイン設定サイト全体のデザイン設定を行えます
ヘッダーサイトのヘッダー部分(ロゴとかメニューとかある部分)のデザイン設定を行えます。
フッターサイトのフッター部分(フッターウィジェットやコピーライト部分)のデザイン設定を行えます。
ドロワーナビゲーションスマホやタブレット表示時にハンバーガーメニューをタップした際に表示されるメニュー(=ドロワーナビゲーション)のデザイン設定

これらは、ライブビュー画面でサイト内のどのページを表示していても、メニューとして常時表示されます。

切り替わる項目

これらとは別に、ライブビュー画面に表示している画面によって切り替わる項目があります。ライブビュー画面に表示されているページ(ホームページ・記事一覧・アーカイブ一覧など)で設定が可能な項目がリアルタイムで切り替わります。

投稿一覧ページの場合

設定可能項目

  • ページレイアウト
  • アイキャッチ画像の位置
固定ページの場合

設定可能項目

  • ページレイアウト
  • アイキャッチ画像の位置
投稿詳細(記事)ページの場合

設定可能項目

  • ページレイアウト
  • アイキャッチ画像の位置
  • 記事にプロフィールボックスを表示する
  • 記事に関連記事を表示する
  • 関連記事のレイアウト
[テンプレート]というカテゴリーのアーカイブページの場合

設定可能項目

  • アクセントカラー
  • アイキャッチ画像

この他にも、カスタム投稿タイプやカスタムタクソノミーにも対応しています。

基本デザイン設定

アクセントカラー

ウェブサイトやブログのキーカラーを指定できます。ブログの見出しやセクションのタイトルなど各所に自動的に反映されます。

サブアクセントカラー

アクセントカラーほどには使われる箇所は限られていますが、設定することで自動的に反映されます。

基本の文字サイズ(px)

サイト全体の基本の文字の大きさを設定できます。デフォルトでは 16px に設定されています。

文字の大きさは、ウェブサイトの対象とする読者層などによっても変わってきます。

基本の line-height

サイト全体の基本の行間を設定することができます。

1 だと1文字分の行の高さになります。2だと1行分上に空間があくような感じになります。お試しください。

基本の文字間(rem)

サイト全体の基本の文字間を設定することができます。

文字間というのは、文字と文字の間隔です。閲覧者ターゲットや好みによっても変わってくると思いますので、色々と試して設定してみてください。

こちらは全体で設定する値となりますが、必要箇所のみ設定したい場合には、Snow Monkey Editor プラグインを利用することで可能となります。

基本フォント

サイト全体の基本のフォントを設定することができます。

  • サンセリフ(ゴシック体)
  • セリフ(明朝体)
  • Noto Sans JP
  • Noto Serif JP
  • M PLUS 1P
  • M PLUS Rounded 1C

コンテンツの最大幅

コンテンツ幅の最大値を設定することができます。

モバイル端末時のコンテンツの左右余白
標準
広め
PC時のコンテンツの左右余白
標準
広め
要素間の余白サイズ
標準
広め
余白サイズ
標準
広め
パンくずリストの表示位置

上の画像のようなパンくずリストを表示する位置を設定することができます。

  • コンテンツの上
  • コンテンツの上(コンテンツ幅に合わせる)
  • コンテンツの下
  • コンテンツの下(コンテンツ幅に合わせる)
  • なし
記事一覧レイアウト

投稿一覧やアーカイブ一覧などの記事を一覧表示させるページのレイアウトを設定できます。

  • リッチメディア
  • シンプル
  • テキスト
  • テキスト2
  • パネル
  • カルーセル(リッチメディア)

【モバイル端末時に記事一覧を1列にする】にチェックを入れることによって、モバイル表示時に記事を1つずつ縦並びに表示させることができます。

デフォルト(2列表示)
1列表示
デフォルトページヘッダー画像

固定ページの添付画像に示す位置に自動的に表示させる画像を設定することができます。

ページヘッダー画像の出力箇所の変更は、別途「切り替わる項目内」にて可能です。

デフォルトアイキャッチ画像

投稿ページのデフォルトアイキャッチ画像を設定しておくことができます。

デフォルトアイキャッチ画像の出力箇所の変更は、別途「切り替わる項目内」にて可能です。

サイトの概要をサイトロゴの下に表示する
Pure CSS ギャラリーを使用する

JavaScriptを使わずに画像の拡大表示を行う機能です。JavaScriptを使わないので軽量です。詳しくは公式ドキュメントを参照ください。

more タグとパスワード保護を同時に使用している場合、more タグより前のコンテンツを表示する

more タグとパスワード保護機能を併用することで、moreタグ以降はパスワードを持っている人しか閲覧できなようにする仕組みを作ることができます。

詳しくは公式ドキュメントを参照してください。

ページ上部へ戻るボタンを表示
記事中の h2 のデザイン

記事中の h3 のデザイン

ウィジェットタイトルのデザイン
標準
なし

ヘッダー

ヘッダーレイアウト

ヘッダーのレイアウトを以下の中から選べます。

  • 1行
  • シンプル
  • 中央ロゴ
  • 2行
1行
シンプル(常時ハンバーガーメニュー)
中央ロゴ
2行
モバイル用ヘッダー位置
PC用ヘッダー位置

ヘッダーの表示方法や位置を設定することができます。また、モバイル表示時とPC表示時で別の設定をすることができます。

  • 上部固定→常にレイアウト変わらず最上部に固定表示)
  • オーバーレイ(上部固定)→コンテンツエリアの上に被さる感じ。文字色は白になる。
  • オーバーレイ(上部固定/スクロール時背景白)→コンテンツエリアの上に被さる感じで、スクロールをすると2列レイアウトで背景白になる
  • オーバーレイ→コンテンツエリアの上に被さる感じで、最上部に固定表示になる。
  • ノーマル→最上部表示され、スクロールするとロゴなし1列になる。
ヘッダーコンテンツ

サイトヘッダー右上部に設定した情報を表示することができます。HTML記述が使えます。

モバイルでもヘッダーコンテンツを表示する。

チェックを入れるとモバイル表示時にも「ヘッダーコンテンツ」で設定された内容が表示されます。

グローバルナビゲーションのホバーエフェクト

グローバルナビゲーションのメニュー項目にマウスオンした際の動作を設定することができます。

  • 文字色の反転
  • 下線
  • なし
ヘッダーの文字色

グローバルナビゲーションのメニュー項目の文字色を変更することができます。

現在地を示す文字色はアクセントカラーとなっています。

フッター

フッターを全幅にする

フッターを全幅にする場合にはチェックを入れます。通常はコンテンツ最大幅でコントロールされています。

ドロワーナビゲーション

ハンバーガーボタンの位置

スマホ表示時のハンバーガーメニューの表示位置を設定します。

ドロワーナビゲーションのタイプ

ドロワーナビゲーションの表示タイプを切り替えることができます。

  • デフォルト(左からうにゅっと出てくる)
  • オーバーオール(画面全体がメニューになる)
ドロワーナビゲーションの協調タイプ

ドロワーナビゲーション内に検索ボックスを表示する

ドロワーメニュー下に検索フォームを表示するかどうかを設定できる

Snow Monkey で困ったら…?

オレインデザインまでご相談ください!

HAPPY SNOW MONKEY を
さまざまな形でサポート頂けます。

snow_monkey_append_entry_content
snow_monkey_after_entry_content
snow_monkey_append_main