基本デザイン設定

アクセントカラー

サイトのアクセントカラーを設定できます。テーマによっては場所ごとに細かく色を設定できるものもありますが、本テーマではデザインのバランスが崩れてしまいにくいようにアクセントカラーだけを設定するようにしています。

アクセントカラー設定サンプル

設定手順

  1. ダッシュボードを開く
  2. 外観 > カスタマイズをクリック
  3. デザイン > 基本デザイン設定をクリック
  4. アクセントカラー色を選択をクリックし、使用したい色を選択
  5. 公開をクリック

動画で手順をみる

サイトの概要をサイトロゴの下に表示する

「キャッチフレーズ」に入力した文がロゴの下に表示されるようになります。

設定手順

  1. ダッシュボードを開く
  2. 外観 > カスタマイズをクリック
  3. デザイン > 基本デザイン設定をクリック
  4. サイトの概要をサイトロゴの下に表示するにチェックで表示
  5. 公開をクリック

デフォルトページヘッダー画像

以前は「アイキャッチ画像の表示位置」設定で「ページヘッダー」もしくは「ページヘッダーの上にタイトルを表示」を選んでいる場合に、アイキャッチ画像があればアイキャッチ画像がページヘッダーに表示されるけど、無い場合は画像が表示されないという仕様でした。ただ、これだとヘッダーの表示位置設定を「オーバレイ」にしたときに、ページヘッダーがないのでヘッダーが直接コンテンツにかぶって超読みにくくなっちゃうんですよね。

そこで「デフォルトページヘッダー画像」設定をつくりました。デフォルト画像を設定しておくことで、アイキャッチ画像がない場合でもページヘッダーに画像が表示されるようになり、オーバレイヘッダーとの相性もばっちりです。

設定方法

  1. ダッシュボードを開く
  2. 外観 > カスタマイズをクリック
  3. デザイン > 基本デザイン設定をクリック
  4. デフォルトページヘッダー画像で画像を設定
  5. 公開をクリック

Pure CSS ギャラリーを使用する

JavaScript を使用せずに CSS のみで画像の拡大表示をおこなう機能です。JavaScript を使用してないため軽快に動作します。この機能を有効にすると、次の部分で画像の拡大表示が適用されます。

  • リンク先がメディアファイルになっているギャラリー
  • リンク先がメディアファイルになっている画像
サンプル

設定方法

  1. ダッシュボードを開く
  2. 外観 > カスタマイズをクリック
  3. デザイン > 基本デザイン設定をクリック
  4. Pure CSS ギャラリーを使用するにチェックで表示
  5. 公開をクリック

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

WordPress には記事のパスワード保護機能があります。記事編集画面の「公開状態」で「パスワード保護」を選択すれば、パスワードを入力しないと記事が見れなくなります。ただこれ、記事がまるっと全部見えなくなっちゃうんですよね。

この機能を有効にすれば、途中までは読めるけど、途中からパスワードで保護されて読めない、ということができます。ショートコードとかを使えば比較的簡単に実装できますが、なるべく WordPress の既存機能の組み合わせでやりたいなと思ったので、more タグ を入れた場合はそれより前は読めるけど、それより後はパスワード保護されて読めない、となるようにしました。

設定方法

  1. ダッシュボードを開く
  2. 外観 > カスタマイズをクリック
  3. デザイン > 基本デザイン設定をクリック
  4. more タグとパスワード保護を同時に使用している場合、more タグより前のコンテンツを表示するにチェックで表示
  5. 公開をクリック

スマホ時のカスタムロゴの拡大率(%)

デフォルトはロゴの実際の大きさの1/3で表示されます。拡大率を変更することで、最大で1/2の大きさまで大きくできます。(ちなみに、PC はレティナ対策で1/2のサイズで表示されるようになっています)

設定方法

  1. ダッシュボードを開く
  2. 外観 > カスタマイズをクリック
  3. デザイン > 基本デザイン設定 > スマホ時のカスタムロゴの拡大率(%)で数値を入力
  4. 公開をクリック

動画で手順を見る

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

スマホなどのときに表示されるドロワーナビゲーションの中に検索ボックスを表示できます。デフォルトは表示されるようになっているので、不要な場合はカスタマイザーでチェックを外してください。

設定手順

  1. ダッシュボードを開く
  2. 外観 > カスタマイズをクリック
  3. デザイン > 基本デザイン設定をクリック
  4. ドロワーナビゲーション内に検索ボックスを表示するにチェックで表示
  5. 公開をクリック