SmartSlider3をSANGO風カードにカスタマイズする!スライドショーの導入方法!

smartslider3 SANGO風カスタマイズ スライドショー

この記事では、下記のことができるようになります。

できるようになること

  • SmartSlider3の使い方がわかります。
  • SmartSlider3でスライドショーを作れます。
  • SmartSlider3をSANGO風にカスタマイズできます。

after

レスポンシブ対応されています。

子供 共感力 育む メリット
子供 共感力 育む メリット
previous arrow
next arrow
Slider
注意
この記事ではstyle.cssを修正します。

必ずバックアップを取得するようにお願い致します。

また、プラグインを新規で追加する場合、ページ速度に影響を及ぼす可能性があります。

導入の際はご注意ください。

1. SmartSlider3とは?

SmartSlider3とは、wordpressのプラグインで、簡単にスライドショーをページに導入できる便利なプラグインです。

SmartSlider3の設定画面で多くの設定が可能となっているため、SANGO風にするための前段を整えていきます。

1-1. SmartSlider3をインストールする

まずは、SmartSlider3を検索してインストールしてください。

smartslider3 SANGO風カスタマイズ

インストールが完了すると、wordpressの管理画面のサイドバーから「Smart Slider」を選択できるようになります。

smartslider3 SANGO風カスタマイズ

1-3. SmartSlider3に新規追加する

設定画面に遷移したら、新規でSmart Sliderを追加していきましょう。

smartslider3 SANGO風カスタマイズ

あとで一気に編集をするので、この画面ではそのまま「Create」でよいでしょう。

smartslider3 SANGO風カスタマイズ

1-4. SmartSlider3の画像をアップロード

Smart Sliderを新規で追加できたら、まずは確認するための画像をアップロードしていきましょう。

smartslider3 SANGO風カスタマイズ

参考

SmartSlider3では、画像に対してタイトルやリンクを追加することができます。

記事の場合、リライトをする等でタイトルが変わると少々不便ですが、「Settings」タブでカスタマイズできます。

smartslider3 SANGO風カスタマイズ

リンクをコピーしなくとも、記事検索をできるのは便利ですね。

smartslider3 SANGO風カスタマイズ

1-5. SmartSlider3の各種設定

画像のアップロードが終わったら、各種SANGO風にするための前提を設定していきます。

Generalでスライダーのサイズを変更

Slider size : width 1200px , height 800 px

Margin : Right 40px , Left 40px

Maximum slide width : 800px

smartslider3 SANGO風カスタマイズ

自動再生の設定

Autoplay : Enable 4000MS(4秒)

個人的に、デフォルトの8秒は長く感じるので、4秒にしました。

smartslider3 SANGO風カスタマイズ

矢印の追加

矢印 : 真ん中を選択

Previous, Next position : 配置を外側にして、offset(位置)を10pxにする。

smartslider3 SANGO風カスタマイズ

テキストボックスの追加

Position : 外側に配置

Animate : ON

Style : 変更する

Title : 変更する

smartslider3 SANGO風カスタマイズ

Styleの変更

Background color : FFFFFF

smartslider3 SANGO風カスタマイズ

Titleの変更

Family : “Helvetica”,”Arial”,”Hiragino Kaku Gothic ProN”,”Hiragino Sans”,YuGothic,”Yu Gothic”,”メイリオ”,Meiryo,sans-serif

Color : 000000FF

Size : 17px

Font weight : 600 – Semi bold

smartslider3 SANGO風カスタマイズ

以上が、SmartSlider3の設定となります。

参考

おそらくもう少しSmartSlider3側の設定でSANGO風に近づけることができそうですが、めんどくさいところはCSSに頼ってます。

次の見出しを参考に、SmartSlider3側で設定変更できる方は、いずれでも大丈夫です。

2. style.cssに追加

SmartSlider3の設定が終わったら、あとはstyle.cssにSANGO風のCSSを追加します。

参考

SmartSlider3のDEVELOPERタブでCSSの追加ができますが、PROじゃない(無料版)の方は設定できないので、style.cssに追記していきましょう。

始めに、shortcodeから番号を取得します。(この画像の場合はslider=4 の “4”になります。)

smartslider3 SANGO風カスタマイズ

SmartSlider3は、スライダーごとで、CSSのクラスに付与される番号が違うので、下記、赤文字にしている数字をご自身のスライダーの番号と合わせて修正してください。

style.css

/* smartslider3をSANGOっぽくカスタマイズ! */

/* 矢印のCSS */
div#n2-ss-4 .nextend-arrow {
	width: 30px !important;
	height: 30px !important;
	margin-top: 50px;
	background: #6088c6 !important;/*ボタン色*/
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29) !important;
	text-decoration: none;
	color: #FFF;
	border-bottom: solid 2px #627295 !important;
	border-radius: 3px !important;
}

div#n2-ss-4 .nextend-arrow:active {
	/*ボタンを押したとき*/
    -webkit-transform: translateY(2px);
    transform: translateY(2px);/*下に動く*/
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2) !important;/*影を小さく*/
    border-bottom: none !important;
}

/* 画像とテキストのCSS */
div#n2-ss-4 {
	box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
	height: 100%;
	min-height: 530px;
    margin-bottom: 50px !important;
}

@media only screen and (max-width: 1024px){
	div#n2-ss-4 {
		min-height: 450px;
	}
	@media only screen and (max-width: 767px){
		div#n2-ss-4 {
			min-height: 285px;
		}
	}
}

style.cssの更新が終わったら、キャッシュを削除するか、「Ctrl + F5」でスーパーリロードを実施してください。

3. ページにSmartSlider3を設置する

SmartSlider3は、ショートコードで設置することができます。

smartslider3 SANGO風カスタマイズ

コピーしたショートコードを貼り付けたら、スライドショーの完成です!

トップページに追加したい場合などは、PHP codeをコピーして貼り付ける必要があります。

4. 高度なcss設定

今回のCSSの設定では、文字列が3行まではカードの高さが変わらないように設定をしています。

しかし、3行を超えるとカードの高さが変わってしまうため、表示される時に不自然にページが動いてしまいます。

そのため、3行目以降は3点リーダーになるようにCSSを追加します。

少々めんどくさいですが、一度ご自身のページから、カードを右クリックし、検証を押してcssのクラスを取得してください。

smartslider3 SANGO風カスタマイズ スライドショー

カード内のテキストをクリックするとクラスを取得できますが、n2-font-76080cb9f1a580c52d7c65db29c758ca-simple このようなクラスが見つかるはずです。

カードごとで、n2-font-xxx-simpleのxxxが違います。クラスは検索でも見つかるかと思います。

3行目以降を3点リーダーにするためには、以下のコードを追加します。

赤文字の部分は、ご自身のクラスに合わせて修正してください。

style.css

div#n2-ss-4 .n2-font-160f3fbf4fe58b5a701ceff068b6fb4d-simple {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
	overflow: hidden;
}

5. まとめ

今回のSANGO風のサイズ感は、固定ページやトップページに貼り付けるサイズ感で設定しています。

若干のずれが気になる場合は、適宜CSSの更新をお願い致します。