【はてなブログ】スライダーを設置してみた〈ZENO-TEALカスタマイズ〉

f:id:finana:20190612000657p:plain

こんばんわ。はたらきアリです。@hatarakiari0818

ブログのカスタマイズ熱がなかなか冷めあがりません。

いろいろなブログを見ているとカッコいいサイトって多いですよね。

それを見ていると

あれをやってみたい!かっこよすぎる!

 となって、普段の記事作成に手が付きません。

ということでもう少しカスタマイズにお付き合いください。

本当にカスタマイズが完結したときには、使用したコードの一覧を記事にしてみたいなとも思っています。

テーマごとで使えるもの、そうでないものとあるでしょうが、私なりに分かりやすく解説しながら作成してみたいものです。

スポンサーリンク

スライダーをタイトル下に設置

スライダーってワードプレスの有料テーマには必ずと言っていいほど付いていますよね。

リンクを貼った画像が勝手に流れてくるなんてかっこよすぎる。。

画像とURLいれたら簡単に設置できるんだろうなー

と指をくわえていたのですが、どうしても取り入れたくなりググりました!

そしてZENO-TEALに相性が良かったコードがこちらになります。

【bxSlider】ブロガー必見!コピペだけで簡単にコンテンツスライダーを導入する方法

設置方法

f:id:finana:20190607035108p:plain

今回、私はヘッダーの真下にスライダーを設置しました。(ヘッダーを含めすべてタイトル下の枠内に収まっています。)

記事数は5記事。いずれも私が自信をもって公開している記事になります。

コードを入力する場所は

「デザイン」➡「カスタマイズ」➡「タイトル下」に入力しました。しかし、その他の「記事上」「記事下」「サイドバー」などへのHTML貼り付けで同様に設置することができます。

1<link href=”https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css

rel=”stylesheet” />

 2<div style=”text-align:center;”>
 3<div class=”bx-top”>
 4<ul class=”bxslider”>
 5<li><a href=”URLリンク入力”><img src=”画像リンク” title=”タイトル入力”/></a></li>
 6<li><a href=”URLリンク入力”><img src=”画像リンク” title=”タイトル入力”></a></li>
 7</ul>
 8</div>
 9
 10<script src=”https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js

defer></script>

 11<script>
 12$(function() {
 13$(‘.bx-top’).fadeIn(‘slow’);
 14});
 15$(document).ready(function(){
 16$(‘.bxslider’).bxSlider({
 17mode: ‘horizontal’,
 18moveSlides: 1,
 19slideMargin: 40,
 20infiniteLoop: true,
 21slideWidth: 400,
 22minSlides: 1,
 23maxSlides: 1,
 24speed: 800,
 25pager: false,
 26captions: true, 
 27auto: true
 28});
 29});
 30</script>
 31
 32<script type=”text/javascript”>
 33
 34$(function() {
 35$(‘.bxslider’).fadeIn(‘slow’);
 36});
 37</script>
 38
 39<style type=”text/css”>
 40
 41.bx-top{
 42display:none;
 43}
 44
 45.bx-wrapper {
 46position: relative;
 47margin-bottom:0px !important;
 48padding: 0;
 49-ms-touch-action: pan-y;
 50touch-action: pan-y;
 51}
 52</style></div>
view rawgistfile1.txt hosted with ❤ by GitHub

URLリンク、画像リンク、タイトルにそれぞれ自身のサイトの情報を入力しましょう。

  • URLリンクは記事URLのことでスライダーで表示したい記事です。
  • 画像リンクはスライダーで表示したい画像アドレスのことです。
  • タイトルはスライダーの下部で表示される説明文のことです。

他の設定

  • 21行目の400の値を変更することでスライドショーの大きさを自由に変更できます。
  • 25行目で「次へ」、「戻る」のページャーの有無の設定ができます。
  • 26行目でタイトルの表示の有無の設定ができます。それぞれ有の場合は「true」、無の場合は「false」を入力してください。
  • 現在はスライドは「2つ」に設定されていますが、増やしたい場合は、「li〜li」までをコピーして貼り付けてもらうと増やして使用可能です。

※注意点※

現時点、グーグルクロームではアップデートの関係か、スライダーに表示されている画像をクリックしてもリンクが飛ばないようになってしまっています。

そこで

<script src=”https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js” defer></script>
<script>
$(document).on(‘mousedown’,’.bx-viewport a’,function(){
window.location.href = $(this).attr(‘href’);
});
</script>

のコードを「設定」➡「詳細設定」➡「headに要素を追加」にコピペしてください。

これでリンクが正常に動くようになります。

フッターの設置

簡単に説明します。以下のフッタコードを「フッタ」にコピペし、編集しました。

zeno-teal.hatenablog.com

1<div class=“three-footer”>

<div class=“footer-1”>

<div class=“footer-h”><i class=“blogicon-help-alt lg”></i> ABOUT</div>

<p>ZENO TEALはトップページをカード型にしたはてなブログ用テーマです。

全体的にはフラットにまとめています。テーマをもとに、いろいろカスタマイズして自分に

使いやすいようにカスタマイズしてみてください。</p>

</div>

<div class=“footer-2”>

<div class=“footer-h”><i class=“blogicon-account lg”></i> CREATOR</div>

<p>製作者:orefolder</p> <p>茨城県つくば市在住のウェブサイト運営者。普段は<a

href=http://www.orefolder.net>orefolder.net</a>というAndroidスマートフォンの

情報サイトをメインに活動しています。はてな歴は2017年で13年ほどの中堅。</p>

<p>ブログ:<a href=http://www.foxism.jp>FOXISM</a></p>

</div>

<div class=“footer-3”>

<div class=“footer-h”>LIFE <i class=“blogicon-heart lg”></i>

<i class=“blogicon-heart lg”></i><i class=“blogicon-heart-alt lg”></i>

<i class=“blogicon-heart-alt lg”></i><i class=“blogicon-heart-alt lg”></i>

</div>

<p>書くことがない…。</p>

</div>

</div>

view rawgistfile1.txt hosted with ❤ by GitHub
これによって、「お問い合わせ」と「プライバシーポリシー」しかなかったサイトの足元が充実しました。私のブログに対する思いみたいなものを書きました。

ページの最後まで充実したサイトづくりが出来たと思っています。

はてなブログのカスタマイズが楽しい

他のかっこいいブログの影響もあって、取り入れたいデザインが多いですね。

はてなは自分でやらないとだめですが私は楽しんでます。

といってもカスタマイズも最終番。

考えている残りのカスタマイズは以下の通りです。

  • カテゴリーの整理と階層化
  • サイトマップの作製
  • 画像の軽量化と貼り直し

デザインを考え尽くした結果、残りはこれだけです。

サイトの改善点

ここで問題が発生しています。

PageSpeedInsights

このサイトは自身のサイトの速度を図るものですが、80点を切るようではPV増加を妨げる結果になるようです。

そんななか私のサイトはなんと24点。

衝撃でした。

早急に改善する必要があり、画像の軽量化はその一環です。

記事数が多いので、ちょっと長丁場になりそうですがやり切ります。

速度が遅い内容も教えてくれるので、私の場合は原因の大半が画像が重すぎるようです。

しかも調べてみると、はてなブログは画像をはてなフォトライフにアップロードするときに元の画像よりさらに重くなってしまうらしい。

ということで、

ことによって対応したいと思います。

改善点が次から次へと見つかり、あたふたしながらも楽しんでいたりします。

※追記

【⇓⇓このサイトにおける【ZENO-TEAL】カスタマイズを総まとめした記事はこちら】

【はてなブログ】初心者がすべてコピペで出来たZENO-TEALカスタマイズまとめ

スポンサーリンク
>副業サポートツール

副業サポートツール

こんにちわ。はたらきアリです。こちらでは僕が作成した、副業をサポートするための商品を紹介しています。どれも私が取り組んだ本業・副業から得た知識や経験を存分に取り入れたサポートツールになります。副業を後押しする、失敗しないためのサポートツールです。価格も抑えた購入しやすい商品としていますので、どうぞご覧ください。以下のリンクからはそれぞれの解説ページとなります。解説を読んでいただき、使ってみたいと感じてもらえれば幸いです。

CTR IMG