フロントページに横方向に動くスライダーを設置してみました

Blog運営
記事内に広告が含まれています。

こんにちは、こなきあです。

フロントページ(トップページ)に、
新着記事やカテゴリー、
ランキングなど表示して、

サイト型っぽくなってきた、
konaka-netですが、

さらに、サイト型ぽくしたくて、
横方向に動くスライダー
を設置してみました。

プラグインが必要です

メインビジュアルをスライダーにするのは、
パターンを使用していますが、
今回はプラグインを使用します。

メインビジュアルの下に、
自己紹介、Aboutがあって、
その下に、新着記事、ランキングと
まあ、シンプルな感じだったんですが、

Cocoon-grayish
grayish(グレイッシュ)は、無料で高機能なWordPressテーマ、Cocoonのスキンです。画面いっぱいに表示されるメインビジュアル、シンプルなデザイン、独自のテーマカスタマイザーが特徴です。...

↑ここを訪れるたびに、

thank youとか新着記事が
横方向に動いているのを見て、

「私もやりたいな~」と思っていました。

やりたいと思いながら、
「きっと難しいのだろう」
「今度でいっか」と
挑戦せずにいたのですが、

やっぱりやってみたくて、
挑戦してみました。

難しいのだろうと、
覚悟していたんですが、
そんなことはなくて、

プラグインを追加すれば、
簡単にできました。

Cocoonの新着記事ブロックなどをスライダーにできるプラグイン作りました※Cocoon ver2.8.5.1へアップデート後はプラグインもアップデートしてください
新着記事ブロックなどの追加CSSクラスに指定のクラス名を入力することで、自動で横方向にアニメーションするスライダーにできます。等速で無限ループするタイプと、記事ごとにスナップするノーマルタイプから選択...

↑こちらに、詳しく説明されています。

人気記事に変更しました

横方向に動くスライダーを
設置したときは、
新着記事だったのですが、

記事の更新も少ない?遅い?し、
新着記事がスライダーの次にもあるのは、

なんだかしつこい?かなと思い、
人気記事に変更しました。

・・・フロントページ下方に、
ランキングあるんですけど、
まあ、連続で同じものじゃないから、
しつこくないかな~と思ってます。

ショートコード

新着記事から人気記事に変更するのは、
ショートコードを

new_Listをpopular_Listに
変更するだけなので、
簡単にできました。

私、ブログを始めて、
4年?5年?くらいなんですが、

ショートコードの意味が、
いまいち理解できていなかったんです。

なんとな~く、
こういうものなんだろうな~と
思っていたショートコード。

ほとんど使用することもなく、
これまできたんですが、

今回の挑戦で、
何となくではなく理解できました!

konakia-netではもちろんですが、
メインブログの方でも、
ショートコードを使ってみようと思ってます。

まとめ

横方向に動くスライダーは、

・スライダータイプ①等速ループタイプ
・スライダータイプ②ノーマルタイプ

2種類のタイプがあります。

私が使用しているのは、
スライダータイプ②ノーマルタイプです。

せっかくショートコードを理解したので、
忘れないうちに等速ループタイプに
変更してみたいと思います。

表示する記事数も変更できるみたいだし、
その辺も挑戦してみたいと思います。

最後まで読んで頂きありがとうございました。

備忘録・雑記ランキング
備忘録・雑記ランキング

comment

タイトルとURLをコピーしました