こんばんわ。はたらきアリです。@hatarakiari0818
ブログのカスタマイズ熱がなかなか冷めあがりません。
いろいろなブログを見ているとカッコいいサイトって多いですよね。
それを見ていると
あれをやってみたい!かっこよすぎる!
となって、普段の記事作成に手が付きません。
ということでもう少しカスタマイズにお付き合いください。
本当にカスタマイズが完結したときには、使用したコードの一覧を記事にしてみたいなとも思っています。
テーマごとで使えるもの、そうでないものとあるでしょうが、私なりに分かりやすく解説しながら作成してみたいものです。
スライダーをタイトル下に設置
スライダーってワードプレスの有料テーマには必ずと言っていいほど付いていますよね。
リンクを貼った画像が勝手に流れてくるなんてかっこよすぎる。。
画像とURLいれたら簡単に設置できるんだろうなー
と指をくわえていたのですが、どうしても取り入れたくなりググりました!
そしてZENO-TEALに相性が良かったコードがこちらになります。
※参考にさせていただいた記事はこちら
english-apple-diy.hatenablog.com
設置方法
今回、私はヘッダーの真下にスライダーを設置しました。(ヘッダーを含めすべてタイトル下の枠内に収まっています。)
記事数は5記事。いずれも私が自信をもって公開している記事になります。
コードを入力する場所は
「デザイン」➡「カスタマイズ」➡「タイトル下」に入力しました。しかし、その他の「記事上」「記事下」「サイドバー」などへのHTML貼り付けで同様に設置することができます。
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に要素を追加」にコピペしてください。
これでリンクが正常に動くようになります。
フッターの設置
簡単に説明します。以下のフッタコードを「フッタ」にコピペし、編集しました。
これによって、「お問い合わせ」と「プライバシーポリシー」しかなかったサイトの足元が充実しました。私のブログに対する思いみたいなものを書きました。
ページの最後まで充実したサイトづくりが出来たと思っています。
はてなブログのカスタマイズが楽しい
他のかっこいいブログの影響もあって、取り入れたいデザインが多いですね。
はてなは自分でやらないとだめですが私は楽しんでます。
といってもカスタマイズも最終番。
考えている残りのカスタマイズは以下の通りです。
- カテゴリーの整理と階層化
- サイトマップの作製
- 画像の軽量化と貼り直し
デザインを考え尽くした結果、残りはこれだけです。
サイトの改善点
ここで問題が発生しています。
このサイトは自身のサイトの速度を図るものですが、80点を切るようではPV増加を妨げる結果になるようです。
そんななか私のサイトはなんと24点。
衝撃でした。
早急に改善する必要があり、画像の軽量化はその一環です。
記事数が多いので、ちょっと長丁場になりそうですがやり切ります。
速度が遅い内容も教えてくれるので、私の場合は原因の大半が画像が重すぎるようです。
しかも調べてみると、はてなブログは画像をはてなフォトライフにアップロードするときに元の画像よりさらに重くなってしまうらしい。
ということで、
- iLoveIMG | 画像編集用オンラインツールで圧縮をすること
- はてなフォトライフの「設定」から画質を100⇒85に落とす
ことによって対応したいと思います。
改善点が次から次へと見つかり、あたふたしながらも楽しんでいたりします。
※追記
⇩このサイトにおける【ZENO-TEAL】カスタマイズを総まとめした記事はこちら