こんばんわ。はたらきアリです。@hatarakiari0818
ブログのカスタマイズ熱がなかなか冷めあがりません。
いろいろなブログを見ているとカッコいいサイトって多いですよね。
それを見ていると
あれをやってみたい！かっこよすぎる！
となって、普段の記事作成に手が付きません。
ということでもう少しカスタマイズにお付き合いください。
本当にカスタマイズが完結したときには、使用したコードの一覧を記事にしてみたいなとも思っています。
テーマごとで使えるもの、そうでないものとあるでしょうが、私なりに分かりやすく解説しながら作成してみたいものです。
スライダーをタイトル下に設置
スライダーってワードプレスの有料テーマには必ずと言っていいほど付いていますよね。
リンクを貼った画像が勝手に流れてくるなんてかっこよすぎる。。
画像とＵＲＬいれたら簡単に設置できるんだろうなー
と指をくわえていたのですが、どうしても取り入れたくなりググりました！
そしてＺＥＮＯ－ＴＥＡＬに相性が良かったコードがこちらになります。
※参考にさせていただいた記事はこちら
english-apple-diy.hatenablog.com
設置方法
今回、私はヘッダーの真下にスライダーを設置しました。（ヘッダーを含めすべてタイトル下の枠内に収まっています。）
記事数は５記事。いずれも私が自信をもって公開している記事になります。
コードを入力する場所は
「デザイン」➡「カスタマイズ」➡「タイトル下」に入力しました。しかし、その他の「記事上」「記事下」「サイドバー」などへのＨＴＭＬ貼り付けで同様に設置することができます。
| 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({ |
| 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> |
URLリンク、画像リンク、タイトルにそれぞれ自身のサイトの情報を入力しましょう。
- URLリンクは記事URLのことでスライダーで表示したい記事です。
- 画像リンクはスライダーで表示したい画像アドレスのことです。
- タイトルはスライダーの下部で表示される説明文のことです。
他の設定
- 21行目の400の値を変更することでスライドショーの大きさを自由に変更できます。
- 25行目で「次へ」、「戻る」のページャーの有無の設定ができます。
- 26行目でタイトルの表示の有無の設定ができます。それぞれ有の場合は「true」、無の場合は「false」を入力してください。
- 現在はスライドは「２つ」に設定されていますが、増やしたい場合は、「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>
|
これによって、「お問い合わせ」と「プライバシーポリシー」しかなかったサイトの足元が充実しました。私のブログに対する思いみたいなものを書きました。
ページの最後まで充実したサイトづくりが出来たと思っています。
はてなブログのカスタマイズが楽しい
他のかっこいいブログの影響もあって、取り入れたいデザインが多いですね。
はてなは自分でやらないとだめですが私は楽しんでます。
といってもカスタマイズも最終番。
考えている残りのカスタマイズは以下の通りです。
- カテゴリーの整理と階層化
- サイトマップの作製
- 画像の軽量化と貼り直し
デザインを考え尽くした結果、残りはこれだけです。
サイトの改善点
ここで問題が発生しています。
developers.google.com
このサイトは自身のサイトの速度を図るものですが、８０点を切るようではＰＶ増加を妨げる結果になるようです。
そんななか私のサイトはなんと２４点。
衝撃でした。
早急に改善する必要があり、画像の軽量化はその一環です。
記事数が多いので、ちょっと長丁場になりそうですがやり切ります。
速度が遅い内容も教えてくれるので、私の場合は原因の大半が画像が重すぎるようです。
しかも調べてみると、はてなブログは画像をはてなフォトライフにアップロードするときに元の画像よりさらに重くなってしまうらしい。
ということで、
ことによって対応したいと思います。
改善点が次から次へと見つかり、あたふたしながらも楽しんでいたりします。
