海外行ったことないけどebay輸出

ebay輸出のブログ / File exchangeの使い方 / Affinger4カスタマイズ / Amazonプライムビデオ

Meta SliderのCSSカスタマイズ方法【Affinger4で使えるスライダープラグイン】

投稿日:2017年2月10日 更新日:

metaslider-customize

ワードプレスのスライダープラグイン Meta Sliderのカスタマイズ方法を紹介します。導入後のCSSカスタマイズです。

フリー版「Flex Slider」のキャプション部分をもっと読みやすく変更しましょう!(このサイト用にカスタマイズしたのを公開するだけ)

カスタマイズを実際に使用しているページがこちら:ebay輸出

Flex Sliderとは初期設定のやつ
flex-slider

基本的な使い方などはMeta Sliderでググると、ありがたい記事がたくさん出てくるので説明を省きます。

今回のカスタマイズはこちら

次の画像になるよう作っていきます。

▼ 元の画像から完成形へ ▼before-meta-after

ご覧の通り、CSSでいじれるのは説明文のところだけです。ただこの部分が非常に簡素で味気ないため、もっとアピールしていこうぜ!が今回の目的。

2工程でさくっとできるでしょう。

1.カスタマイズしたCSS(コピペでOK)

まずはCSSから紹介

これをコピペして、子テーマのstyle.cssなどに張り付けます。

パソコン用です。スマホ用はデフォが一番綺麗よ!

2.Meta SliderにHTMLを追加する

あとはHTMLの追加で完成です。

この例では、CSSとは別にHTMLのdlタグを使ってます。HTMLはMeta Sliderで自動挿入されないのでプラグイン側で直接入力したらOK!

Meta Slider の設定へ行き、一般タブにdl、dt、ddを加えたのが次の画像。記事のタイトル部分はaタグでリンク付けてる。

ippan-tab

あとは保存して完成!

metaslider-customize-kansei

これで終わると寂しいので、他のパターンも紹介しますね。

ボビー・フィッシャーを探して (字幕版)

ボビー・フィッシャーを探して (字幕版)

ちなみにこの映画、超おススメです!実話を元にしたチェスの天才少年の成長物語。子供を持つお父さんにぜひ見て頂きたい!きっと色んな想いで胸が熱くなるでしょう。

Amazonレビューもとんでもなく好評だから、みんなにおすすめ!

2行いらない場合のCSS

ptag2

前述した参考例では「2行」で表現しましたが、▲上の画像みたいな1行でいいよ!って場合はPタグか何も書かずにCSSあてましょう。

P使う場合は、CSSとMeta Sliderの設定を次のような感じでどうでしょうか。

ptag

これで次のようになると思われます。文字が大きくなって、マウスのせるとほわっと青くなるだけw

ptag2

説明を中央に持ってくるCSS

caption-center

ワードプレステーマのAffinger4用として作ってますが、キャプションを中央に持っていく場合は以下のような感じでいかがでしょうか。

注意ワードプレステーマ:Affinger4に合わせてます。Meta Sliderも初期値に対してサイズ指定しますのでテーマによってズレが出ると思います。もし使用される方はそれぞれの数値をいじって調節お願いシャス!

追記:写真によっては文字が見えずらくなったので、影入れたりして調節しました。

Pタグ使う場合です。

ptag

サンプルは以上でした。

複数のスライダーでそれぞれCSSを変更する場合

最後に、オリジナルのCSSクラス指定について。

複数スライダーがあってそれぞれ別のCSSを指定したい場合など、スライダーごとにCSS クラスを付ることができます。

kaihatu-option

というわけで、当サイトでは2つのカテゴリー別でスライダーを使い分けてみました。

このノリでebay輸出されてはいかがでしょうか?という誘導です。

yotta
プラグイン側でいじれるスライダーが他にありそうですが、Affinger4や、micata/Stinger公式で紹介されてたので使ってみた。

スライダーがあるだけでそれっぽいサイトに仕上がるのが良いですね。

こちらもどうぞ

ワードプレスのテーマを AFFINGER4 に変更しました。最先端だからね!

\ シェアしてください /

  • この記事を書いた人
  • 最新記事

yotta(よった)

海外オークションサイトのebayでセラー(販売者) やってるよ。たどたどしい英語を操り目指すは友達100人♪ 書く前にツイートで発散します。好きなアルコールは芋焼酎です。

-Affinger4, WordPress

Copyright© 海外行ったことないけどebay輸出 , 2017 All Rights Reserved.