［はてなブログ］ ヘッダーにスライダー画像

スライダー画像の反映例

ブログのヘッダーに画像を設定する・・・

というのが、
まずはカスタマイズの典型…といいますか、そんな感じで多いケースかと思います。

そんなとき思いついたスライダー画像、
自分のブログでもできるんだろかと。。。
初のスライダー画像でっす😁

もっとも自サイト…
スライダーが向いてるとはいいがたい?笑）

完全に自己満な世界で反映させてます😆
ご参考までに…デキた！
ということで、、ご了承ください。

 

いくつか…参考にさせていただいたサイトありましたが、
取り入れたのはこちらのサイト様…
ありがとうございます。。。

www.domustox.com

 

スクリプトScript

「設定」画面 →「詳細設定」→
＜head＞要素にメタデータを追加
に以下のスクリプトを入力。

<script type="text/javascript" src="https://unpkg.com/flickity@2.2.2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2.2.2/dist/flickity.css" rel="stylesheet" type="text/css" />

 

HTML

管理画面の「デザイン」→
スパナマーク🔧のカスタマイズをクリック →
ヘッダーをクリックして開き →
ブログタイトル下に以下を入力

<div class="gallery js-flickity"
data-flickity-options='{ "wrapAround": true, "autoPlay":true }'>
<div class="gallery-cell"><img src="〇〇" width="" height="" /></div>
<div class="gallery-cell"><img src="〇〇" width="" height="" /></div>
<div class="gallery-cell"><img src="〇〇" width="" height="" /></div>
<div class="gallery-cell"><img src="〇〇" width="" height="" /></div>
<div class="gallery-cell"><img src="〇〇" width="" height="" /></div>
<div class="gallery-cell"><img src="〇〇" width="" height="" /></div>
</div>

 

<img src="〇〇">

〇〇には載せたい画像のURLを入力します。
なんと欲張って6つも設定w
数は任意、設定したい数だけ載せてください。

画像は、
はてなフォトライフ（Hatenafotolife）に上げ、コピペするのがスムーズだと思います。

画像の上で右クリックし、
画像リンクをコピーを選択、〇〇箇所にペーストすればok

自分の場合、
width（幅）とheight（高さ）は設定してません。なんとなく、設定しなくてもうまく反映したので、、

 

CSS

🔧カスタマイズ内の一番下に
｛ ｝デザインCSSって箇所あります。

デザインCSSの設定場所

クリックすると画面が開き、
さらにクリックで画面が少し大きくなり、
コードを入力できるようになってます。

そこがスタイルシート（CSS）の入力場所。

すでに書かれてる上の行を消さずに、、
その下の行から以下を追加。

* external css: flickity.css（スライダー画像） */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.gallery {
background: RGBa(0,0,0,0);
margin-bottom: 10px;
}

.gallery-cell {
width: 296px;
height: 200px;
margin-right: 10px;
margin-bottom: -10px;
background: linear-gradient(to right, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
/*background: #8C8;*/
counter-increment: gallery-cell;
text-align: center;
font-size: 70px;
color: white;
}

.gallery-cell img {
width: 640px;
height: auto;
max-width: 100%;
max-height: 100%;
}

最後は
変更を保存するボタンを押すのをお忘れなく。。。

 

my カスタマイズ

自身で調整したのは画像の背景色です。

というのもスマホで見た際、
他ページへ遷移するタイミングで、一瞬…デフォルトの背景色が見えてしまい。

このチラつく現象はPCでは起きず…

なのでスライダーの背景を、
反映しているレスポンシブのヘッダー色に合わせてみました。

それが上記CSSに含まれるこの部分　↓

background: linear-gradient(to right, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);

同じレスポンシブテーマ（Haruni）を使ってる方なら、これで有効です。

もしデフォルトの色を変えたいなら、
それぞれ背景色に合わせ設定する感じです。

といいつつ、このグラデーションのカラーを反映させるのにまた苦心w

“サイトで使われている色を知るには?”
を調べる必要があるわけです😅

その下にあるコードはデフォルトの背景色。

/*background: #8C8;*/

/* ～ */で囲んだエリアは反映しない、
という意味の表記です。

違う色を設定する場合は、囲みを取ってカラー指定してもokかと。

 

スマホでのスライダー画像反映例

このスライダー方法…
パソコンだけでなく、スマホにまで遜色なく反映されるのがすごいなぁーと感動。テスト動作ページです⇩

Hobby@Collection
Hobby@Collection
metalfaked.hateblo.jp

スマホならちょうど1画面ずつが中央へ…
PCならスライドが複数出ちゃいますがw
ちゃんと一定で推移してくれます♪

見る方をかえりみず、、😆
一人ニマニマしちゃってます♪

コメント