絶景@日本

素人写真で紹介する日本の絶景スポット

スライダーの設置とメインのカラー変更


スポンサーリンク

このブログはよく脱線しますが、
「日本の絶景を自分の写真で伝えたい」
と言うのが根底としてあるので、できるだけ写真を沢山載せていきたいと考えています

スライダーの設置

そこで、トップページでおススメの記事を紹介するだけでなく、
フォトギャラリーとしての意味合いも込めてスライダーを設定しました

まず、
設定 > 詳細設定 > headに要素の追加
に以下のコードを追加します

<!-- スライダー設定始まり -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><!-- ←は既にjqueryを読み込んでいる場合は読み込まなくても大丈夫です -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script>
<script>
$(document).ready(function () {
// initiates responsive slide gallery
var settings = function() {
var settings1 = {
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
mode: 'horizontal',
startSlide: 0,
captions: true
};
var settings2 = {
minSlides: 2, //スライダーの最小数を設定
maxSlides: 4, //スライダーの最大数を設定
moveSlides: 1,
mode: 'horizontal', //スライダーのスタイル設定
slideWidth: 280, //スライダーの大きさを設定。
startSlide: 0,
slideMargin: 10,
captions: true, //キャプションの有無
adaptiveHeight: false
};
return ($(window).width()<630) ? settings1 : settings2;
}

var mySlider;

function slideSetting() {
mySlider.reloadSlider(settings());
}

mySlider = $('.slider').bxSlider(settings());
$(window).resize(slideSetting);
});
</script>
<!-- スライダー設定終わり -->

 
続いて
カスタマイズ > ヘッダ > タイトル下
に以下のコードを追加します

<!--スライダー始まり-->
<div id="slider_wrap">
<div class="slider">
<div class="slide-inner"><img title="☆" src="#" alt="△" /></div>
<div class="slide-inner"><img title="☆" src="#" alt="△" /></div>
<div class="slide-inner"><img title="☆" src="#" alt="△" /></div>
<div class="slide-inner"><img title="☆" src="#" alt="△" /></div>
<div class="slide-inner"><img title="☆" src="#" alt="△" /></div>
</div>
</div>
<!--スライダー終わり-->


img title="☆"の☆は画像のタイトル
src="#"の#には画像のURL
alt="△"の△にはalt属性を入力していきます

すると、サイト上ではこのように表示されます

f:id:zekkei-japan:20181001184703j:plain

本当は、このスライダーが自動で動くように設定したかったんですが、、、
その設定がわからなかったので手動やることに、、、(>_<)

まぁ、それでもトップに4つ表示されるので少しは直帰率を下げる効果があるかな?
(スマホでは1つだけ表示されます)

なお、今回はヘッダ下にコードを追加しましたが、
記事の中でもコードを入れれば記事中に表示させる事は可能です

スライダーの数を増やす場合は
<div class="slide-inner"><img title="☆" src="#" alt="△" /></div>の分だけ
スライダーの数を増やす事ができます

メインカラーの変更

「トップへ戻る」の設置と目次のカスタマイズ - 絶景@日本

で目次のカラーを変更しましたが、メインカラーも変更して
サイト全体を青のイメージに変更しました

コードは以下のコードを
デザイン > カスタマイズ > デザインCSS
に追加しました

/*****メインの配色始まり****/
#blog-title #title a,#blog-description,.search-module-input,.search-module-input::placeholder,.entry-content h3,.entry-content h4,.leave-comment-title:hover {
color: blue !important;
}
.top-menu-bar,.page-index .enable-top-editarea .page-archive .categories,.page-archive .categories,.page-index .enable-top-editarea .page-archive .pager a,.page-archive .pager a,.archive-heading,.search-module-button,.entry-content h2,.leave-comment-title,.page-entry .pager-prev a:hover,.page-entry .pager-next a:hover {
background: blue !important;
}
.search-module-input,.search-module-button,.leave-comment-title,.page-entry .pager-prev a,.page-entry .pager-next a {
border: 1px solid blue !important;
}
.entry-content h3 {
border-top: double 5px blue !important;
}
.entry-content h3 {
border-bottom: double 5px blue !important;
}
.entry-content h4 {
border-bottom: solid 3px blue !important;
}
/*****メインの配色終わり****/


コードの中の blue の部分をカラーコードにするとメインカラーを変えられます
カラーコードはこちら(↓)を参考下さい

www.colordic.org