【Appointment】スライダー設定

スライダーの画像を変更します

テーマのインストール後、スライダーに表示されているのはデモデータです。
このスライダーの画像を自分のサイトに合わせ変更するには、スライダーの必要枚数分のブログ(新規投稿)を作成する必要があります。

スライダーに使用する写真のサイズは、テーマのデモで使われているのが『1600px × 500px』、このブログのスライダーは『1900px × 600px』です。

後に記載しますが、CSSをいじらないとスマホでの表示の縦横比も一緒なので薄っぺらいスライダーになってしまいます。

スライダー画像変更・・・記事の準備

スライダーに表示したい内容の新規投稿を作成します。
作成した投稿の、見出し、本文、アイキャッチ画像がスライダーに表示されます。

1. カテゴリー設定

まずは新しいカテゴリー『スライダーポスト』を作成します。カテゴリー名は任意ですので何でも構いません。
そのカテゴリーに記事を書くとスライダーに表示されます。

2. アイキャッチ画像

指定カテゴリーの記事に設定するアイキャッチ画像が、そのままスライダーとなります。
テーマにはスマホ表示の際に画像の両端を切り取るなどの機能がありません。

後述するCSSの変更を行わない場合は、パソコンでの表示のみを考えてサイズを決定すると悲惨な結果となります。
スマホも考えなるべく縦横比を正方形に近づけましょう。

3. 続きを読むボタンの表示

最初にここでつまずくと思います。『続きを読む』ボタン、中々表示されません。

設定は何も必要ありません。
サポートサイトには25文字以上入力すれば自動的に表示されるとありましたが、日本語入力50文字でも現れない場合もありました。

結局、よくわからないのですが、コピペだと出ないとか50文字以上直接入力したら現れるとか…。
バグでは無いのでいろいろ試して表示させてみてください。

 

スライダー画像変更・・・設定カスタマイズ

ダッシュボード>外観>カスタマイズから、アポイントメントのトップページの設定を変更します。

カスタマイズ内の『スライダー設定』を開き、特集スライダー設定に進みます。

1. スライダーの種類を選択

スライダーデモからカテゴリースライダーにチェックを変更。

2. スライダーのカテゴリーを選択

ここで選択したカテゴリーの投稿がスライダーに表示されます。

3. 長さ

スライダースピードを変更します。

 

 モバイル表示設定

残念なことにこのスライダー、デフォルトの設定のままではモバイル表示の事を考えていません。
テーマのうたい文句にレスポンシブ対応と書かれているので是非対応してもらいたいです。

CSSの変更は簡単です。

下記のコードを、ダッシュボード>外観>テーマの編集に張り付けましょう。

 

 

 

 

この記事を書いたのは

白馬のおんじ

人生半分過ぎたところでブログ始めちゃいました(笑)

\今だけ!/ ゼロ円で作る高機能ホームページ

◆数量限定◆
高機能&デザインのスペシャルサイトを無料作成中。今なら貴方の会社やお店のサイトを、ワードプレス形式またはホームページソフトを使用して無料で作成いたします。

まずはフォームにてご連絡ください。

【Appointment】スライダー設定” に対して 2 件のコメントがあります

  1. えんどう より:

    はじめまして、appointmentテーマを具体的に解説されている日本語サイトが少なく、非常に助かっております。

    一点教えていただきたいのですが

    まずは新しいカテゴリー『スライダーポスト』を作成します。カテゴリー名は任意ですので何でも構いません。
    そのカテゴリーに記事を書くとスライダーに表示されます。

    任意の名前でスライダーポストのカテゴリを作成した後、どのようにスライダーポストとして認識させるのでしょうか?

    1. 白馬のおんじ より:

      はじめまして。
      ご閲覧ありがとうございます。

      励みになります。

      未完成の記事を、後々追記しようと思い取り合えずUPしておりました。
      わかりにくくて申し訳ありません。

      少し記事に追記いたしましたのでご覧ください。

      またわからなかったらご連絡ください。
      ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です