はたらきアリ新聞~会社員×副業で生き抜く時代~

会社員が抱えるお金の悩みを解決するブログ

はたらきアリ新聞

【年収別】会社員の給料明細
【良いとこどり】会社員×副業
【スマホ1台】会社員が取り組む副業とは?
【忘れてはいけない】会社員の確定申告

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

スポンサーリンク

スポンサーリンク

f:id:finana:20190612000657p:plain

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

 

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

 

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

それを見ていると

 

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

 

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

 

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

 

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

 

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

 

  

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

 

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

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

 

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

 

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

 

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

 

※参考にさせていただいた記事はこちら

english-apple-diy.hatenablog.com

 

設置方法

f:id:finana:20190607035108p:plain

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

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

コードを入力する場所は

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

 

<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({
 17 mode: 'horizontal',
 18 moveSlides: 1, /*一度に動かすスライドの数*/
 19 slideMargin: 40, /*空白調節*/
 20 infiniteLoop: true, /*途切れなくループさせるか*/
 21 slideWidth: 400, /*スライドの幅*/
 22 minSlides: 1, /*1つの画面に表示させるスライドの最大数*/
 23 maxSlides: 1,/*1つの画面に表示させるスライドの最小数*/
 24 speed: 800, /*スライダーの移動スピード*/
 25 pager: false, /*ページャーを表示させるかどうか*/
 26 captions: true, /*スライダーの画像にタイトルを被せる場合はTRUE*/
 27 auto: 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{
 42 display:none;
 43 }
 44 /* ### 各種調整 ### */
 45 .bx-wrapper {
 46 position: relative;
 47 margin-bottom:0px !important;
 48 padding: 0;
 49 -ms-touch-action: pan-y;
 50 touch-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

 

 

 

<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

 

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

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

 

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

 

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

 

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

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

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

 

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

 

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

 

サイトの改善点

 

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

developers.google.com

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

 

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

 

衝撃でした。

 

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

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

 

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

 

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

 

ということで、

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

 

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

 

※追記

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

www.worker-ant0818.work