海外行ったことないけど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 に変更しました。最先端だからね!

[PR]3つのおすすめサービス!

そのギフト券出品してもらえませんか?
これからのサーバー!30日間無料お試し!このサイトはmixhostで運営されてます。
あなたの市場価値を調べてみませんか?(無料ユーザー登録)

おすすめ記事一覧

mercari 1

先日、飲んで家に帰ってきたら Amazon から荷物が届いてました。 メルカリの売り上げで買った家電製品です。 ん? メルカリで買ったんだけど、、って次の日シラフになって気づいた所からの話 もくじメル ...

発送 2

日本郵便のEMS送料が値上がりしました。昨年の6月1日から300gの区分が廃止されて、全体が300円~500円上があがってます。アメリカまで300gで1200円の送料だったのが2000円ですよ! そう ...

e-pake 3

2016年10月1日から、国際郵便の発送方法が一つ追加されると発表がありました。 その名も「国際eパケット ライト」、eパケライト! スタートに向けて、詳細とそのほかの発送方法との違いを簡単に比較しま ...

affinger-eye 4

遂にサイトのテーマを変更しましたよ!導入したのはAFFINGER4です。 アフィリエイトするなら第一候補になるであろうAFFINGER4というワードプレステーマについてと導入理由を書きますね。 どうせ ...

amazon-prime-2000 5

2013年からずっとAmazonのプライム会員です!続けている理由がAmazonプライムビデオ! 僕は月に10本ぐらいで年間120作品の映画を見る生活を20年以上続けています。これって2,400本程度 ...

-Affinger4, WordPress

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