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

［はてなブログ］ヘッダーにスライダー画像を設置してみる

2025.12.01 
スライダー画像の反映例

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

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

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

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

 

いくつか…
参考にさせていただいたサイトありましたが、

取り入れたのはこちらのサイト様…
ありがとうございます。。。

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" />

 

画像を上げる

スライダーにしたい画像をいくつかアップします。

画像の上げかたについては、
リンク先をご覧ください（端折ってｽﾐﾏｾﾝ😅）

ブログ画像URLの違いについて
はてな、アメブロ、ムラゴンのブログ画像URLの貼りかたとその違いを比べてみました。
hobby-run.site

はてなフォトライフ（Hatenafotolife）に事前に上げ、操作するやり方がおすすめです。

 

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を入力します。
数は任意、設定したい数だけ載せてください。

画像の上で右クリックし、
画像リンクをコピーを選択、〇〇箇所にペーストすれば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;*/

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

 

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

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

スマホならちょうど1画面ずつが中央へ…

PCならスライドが複数出ちゃいますがw
ちゃんと一定で推移してくれます。

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

コメント