2017年9月15日金曜日

WordPressテンプレートMH Magazines Lite MH Slider Widget

WordPressテンプレートMH Magazines Lite

トップページに貼れる、
スライドショー機能、

MH Slider Widget

の覚書です。


外観→ウィジット

MH Magazines Lite
をHome2にドラッグする。











MH Magazines Liteをプルダウンし、
表示させる

ノーマルとラージの仕様はよくわかりませんが
ノーマルにしとけば問題なし。

ノーマルは高さが390pxになぜかなりました。
ラージは幅678pxでの元の画像そのままで縮小

上下が切り取られてます。


次に、

外観→テーマの編集で
以下のソースがある。


mh-slider.phpを選択すると、
ノーマルとラージの条件が書いてあるが難しくてわからない・・


style.cssを選択する
/***** MH Slider Widget *****/

.mh-slider-widget .flex-control-nav { bottom: 10px; }
.mh-slider-widget .flex-control-nav li { margin: 0 10px 0 0; }
.mh-slider-widget .flex-control-paging li a { width: 15px; height: 15px; border: 1px solid #2a2a2a; background: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.mh-slider-widget .flex-control-paging li a:hover { background: #f5f5f5; }
.mh-slider-widget .flex-control-paging li a.flex-active { background: #E78E98; border: 1px solid #fff; }
.mh-widget-col-1 .mh-slider-widget .flex-control-nav { width: auto; top: 15px; right: 10px; bottom: auto; }
.mh-slider-item { position: relative; overflow: hidden; }
.mh-slider-normal { width: 678px; max-width: 100%; overflow: hidden; }
.mh-slider-caption { position: absolute; width: 350px; max-width: 100%; top: 0; right: 0; color: #fff; border-bottom: 3px solid #E78E98; background: #2a2a2a; background: rgba(42, 42, 42, 0.8); }
.mh-slider-caption .mh-excerpt-more, .mh-slider-title { color: #fff; }
.mh-slider-content { padding: 25px; overflow: hidden; }
.mh-slider-content .mh-excerpt { margin-top: 10px; margin-top: 0.625rem; }
.mh-widget-col-1 .mh-slider-caption { position: relative; width: 100%; margin: 0; background: #2a2a2a; }


つまり、幅は678pxってことかな。
とりあえず、ノーマルにしておけば大きさが揃って綺麗。