ブログの作り方

スワローでブログ作成

スワローでブログを作る手順3。スライダーを設置してみよう

OPENCAGEのスワローでブログを作る手順3です。

今回は、スワローのカルーセルスライダーを設置してみようと思います。

カルーセルスライダーは、記事を自動で横にスクロール(ループ)させるものです。

トップページ上部にあって、しかも動くので目に留まりやすいです。

お気に入りの記事をカルーセルスライダーに登録して目立たせましょう。

★スワローでブログを作る手順1の記事はこちら↓
スワローでブログを作る手順1。基本設定と人気記事を作成>>

★スワローでブログを作る手順2の記事はこちら↓
スワローでブログを作る手順2。カスタムHTMLでプロフィールを作成>>

スライダーを設置する

スワローのカルーセルスライダーは、まずカルーセルスライダー専用のタグを準備します。

専用タグが準備できたら、カルーセルスライダーに表示したい記事に、その専用タグを付けます。

それだけで完成です。では、詳しく説明していきたいと思います。

タグの設定

ワードプレス管理画面から、

投稿→タグ

の順にクリックします。

タグの設定1

上の画像の画面になるので、名前欄に「おすすめ」、スラッグ欄に「pickup」と入力します。

名前は「おすすめ」以外の言葉にしても大丈夫ですが、「pickup」は必ずpickupと入力してください。

最後に「新規タグを追加」ボタンを押せば、タグが追加されます。

これでタグの設定は終わりです。

カルーセルスライダーの設定

カルーセルスライダーに表示用のタグを設定していきます。

カルーセルスライダーには、一度に8つの記事を表示させることができます。

今回はダミー記事が8つなので、8つとも表示させてみたいと思います。

ワードプレス管理画面の、

投稿→投稿一覧

の順にクリックしてください。

カルーセルスライダー1

表示させたい記事にカーソルを乗せると、上の画像のように「クイック編集」というメニューが現れます。

では、「テスト用の記事。その8」にタグを設定してみます。

クイック編集をクリックしてください。

カルーセルスライダー2

上の画像のように、クイック編集画面が表示されます。

右側のタグ欄に「おすすめ」と入力してください。(タグの設定のときに、名前欄に入力した言葉にします。)

入力したら、「更新」ボタンをクリックします。

これで、「テスト用の記事。その8」にタグが設定されました。

これを表示したい記事すべてに同様の設定をしていきます。

カルーセルスライダー4

すべて設定すると、上の画像のようになるはずです。

このタグを設定した時点で、すでにカルーセルスライダーに表示されています。

ブラウザでブログのトップページを表示してみましょう!

カルーセルスライダー5

こんな感じで、トップページにカルーセルスライダーが表示されているはずです。

スワローのカルーセルスライダーの特徴

カルーセルスライダーは、テーマによって以下の2つのタイプに分かれます。

  • 画像の縦横比を画像に合わせるタイプ
  • 画像の縦横比をスライダーに合わせるタイプ

まず、縦横比を画像に合わせるタイプでは、元画像の比率が正しく表示されます。

元の画像が縦や横に伸びて表示されないのが良い点ですね。

ただし、カルーセルスライダーで表示される画像の高さが揃わなくなります。

このタイプのテーマでは、画像の高さを極端に変えてみると、こんな感じになります↓
カルーセルスライダー揃わない

次に、縦横比をスライダーに合わせるタイプでは、元画像がスライダーの枠に合わせて切り取られたり、伸ばされたりします。

ただし、カルーセルスライダーの枠の大きさはすべて揃っています。
カルーセルスライダー

スワローのカルーセルスライダーは、後者の「スライダーに合わせるタイプ」ですね。

このスワローのようなタイプなら、画像の縦横比が変わらなければカルーセルスライダーの枠に合わせてきれいに表示されます。

だいたい同じ縦横比の画像なら、カルーセルスライダーが枠に合うように自動で調整してくれるので便利です。

どちらのタイプも善し悪しがあるのですが、スワローのタイプは初心者でも簡単なのでおすすめです。

記事数が増えてきたら、ぜひカルーセルスライダーの設定をしてみましょう。

★スワローはブログ部門1位にさせていただきました↓
2018年、WordPressテーマの部門別お勧めベスト3を発表!>>

スワローの詳細はこちら>>

関連記事

  1. MAGの広告スペース

    TCDテーマ「MAG」の広告設置方法。広告ウィジェット編

  2. BRIDGEの注意点

    TCDのテーマ「BRIDGE」の設定をするときに気をつけたこと

  3. MAGのブログのイメージ

    TCDの「MAG」でブログを作る手順。簡単に美しいブログが完成します

  4. BRIDGEのカスタム投稿タイプ

    TCD「BRIDGE」のランキング機能の使い方を紹介します

  5. Diverでブログを作る

    Diverでブログを作る手順1。プロフィールや記事スライダーを設定しよ…

  6. スワローでブログ作成1

    スワローでブログを作る手順1。基本設定と人気記事を作成

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

メーカー別おすすめ

Web集客に特化した「EMANON」のWordPressテーマを5段階評価してみ…

EMANON

メーカー別おすすめ

ブログに特化した「OPEN CAGE」のWordPressテーマを5段階評価して…

スワロー

メーカー別おすすめ

多機能かつ洗練されたWordPressテーマ「DigiPress」を5段階評価し…

fresco

メーカー別おすすめ

デザインの美しさは最上級!「TCD」のWordPressテーマを5段階評価してみ…

TCDのSwitch

メーカー別おすすめ

美しい日本語にこだわった「isotype」のWordPressテーマを5段階評価…

MONOSTYLE

メーカー別おすすめ

検索上位表示と収益化「Diver」のWordPressテーマを5段階評価してみた…

Diverのテーマ

メーカー別おすすめ

アフィリエイト専用のWordPressテーマ「AFFINGER」を5段階評価して…

wing-affinger5

メーカー別おすすめ

マテリアルデザインのWordPressテーマ「SANGO」を5段階評価してみた

SANGOテーマ