スライダーと見出しで簡単にオシャレなはてなブログを作る方法

スライダーと見出しで簡単にオシャレなはてなブログを作る方法ブログ
この記事は約8分で読めます。

はてなブログでブログをカスタマイズするときにトップページにスライダーでピックアップ記事を出す方法についてまとめています。

テーマはMinimalismです。

これがあることでブログがより華やかに、そしてオススメ記事が目立つようになります。
スマホ版についても記載しています。

・Minimalism対応のスライダーの表示
・見出しの表示方法
について知りたい方にオススメの記事です。
スポンサーリンク

トップページにピックアップ記事を表示

はてなブログのトップページにピックアップ記事を表示させたくて、試行錯誤しました。
はてなブログカスタマイズ3
これが元のブログです。
上のメニューのすぐ下に記事一覧が来ている状態です。

今回新しくカスタマイズしたブログがこちらです。
はてなブログカスタマイズ4
まず、メニューの下にいくつかのピックアップ記事をスクロールで表示させています。
それと同時に、Pick UpとNew Postの見出しを表示しました。
だいぶ雰囲気が変わりました。

今回参考にさせていただいたブログから自分なりにコードを変えて使用しております。

スライダーの表示方法

参考:【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 – ひつじの雑記帳
スライダーは、参考ブログに載っているコードを好きなデザインになるようにサイズ等を調節して使っています。
それぞれの欄にある数字を変えていきます。

*このタグは参考ブログに書いてあったコードの一部です。
この数値を変えていきます。

moveSlides: 1, /*一度に動かすスライドの数*/
slideMargin: 40, /*空白調節*/
infiniteLoop: true, /*途切れなくループさせるか*/
slideWidth: 660, /*スライドの幅*/
minSlides: 1, /*1つの画面に表示させるスライドの最大数*/
maxSlides: 1,/*1つの画面に表示させるスライドの最小数*/
speed: 800, /*スライダーの移動スピード*/
pager: false, /*ページャーを表示させるかどうか*/
captions: false, /*スライダーの画像にタイトルを被せる場合はTRUE*/
変更したところ

・スライドの幅 660⇒250
・スライド最大数 1⇒2
・スライド最小数 1⇒4
・スライダーのスピード 800⇒500
の4点です。

PC版では4枚ずつ、スマホ版では2枚ずつアイキャッチが表示されるように設定しています。
画像を増やしたいときは下記のタグを増やしていきます。

<li><a href="URLリンク"><img src="画像リンク" title="タイトル"/></a></li>
<li><a href="URLリンク"><img src="画像リンク" title="タイトル"></a></li>

参考ブログに載っていたコードの数値を変えたものを下にまとめました。
★デザイン⇒スパナマーク⇒ヘッダ⇒タイトル下

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" />
<div class="bx-top">
  <ul class="bxslider">
    <li><a href="URLリンク"><img src="画像リンク" title="タイトル"/></a></li>
    <li><a href="URLリンク"><img src="画像リンク" title="タイトル"></a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script>
<script>
$(function() {
  $('.bx-top').fadeIn('slow');
});
$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'horizontal',
    moveSlides: 1, /*一度に動かすスライドの数*/
    slideMargin: 20, /*空白調節*/
    infiniteLoop: true, /*途切れなくループさせるか*/
    slideWidth: 250, /*スライドの幅*/
    minSlides: 2, /*1つの画面に表示させるスライドの最大数*/
    maxSlides: 4,/*1つの画面に表示させるスライドの最小数*/
    speed: 500, /*スライダーの移動スピード*/
    pager: false, /*ページャーを表示させるかどうか*/
    captions: false, /*スライダーの画像にタイトルを被せる場合はTRUE*/
    auto: true
  });
});
</script>

<script type="text/javascript">
/* ### ゆっくり表示 ### */
$(function() {
  $('.bxslider').fadeIn('slow');
});
</script>

<style type="text/css">
/* ### 最初は非表示 ### */
.bx-top{
	display:none;
}

/* ### 各種調整 ### */
.bx-wrapper {
	position: relative;
	margin-bottom:0px !important;
	padding: 0;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
}
</style>

タイトル下の見出し

参考:はてなブログのトップページカスタマイズ-ブログっぽさを無くす | ニケッチャメモ
こちらのブログでは固定されたPICKUP記事の仕方について詳しく書いてあります
このブログに載っているタグの見出しに関係する部分を使用させていただいています。
*スマホ版だと現在【NewPost】とラインが出ていない状態となっています。

こちらはピックアップの文字と下のラインを表示するためのものです。
★デザイン⇒スパナマーク⇒ヘッダ⇒タイトル下

<div class="recommend-wrap">
<p class="recommend-heading">Pick Up</p>

【NewPost』の文字は下記のCSSを入れるとラインとNewPostの文字が入ります。
コードの【好きなカラーコード】のところにお好きなカラーコードを入れてカスタマイズを楽しんでください。
参照:WEB色見本 原色大辞典 – HTMLカラーコード
★デザイン⇒スパナマーク⇒デザインCSS

/*PickUp*/
.page-index .archive-entries {
padding-top: 60px;
position: relative;
}
.page-index .archive-entries:before {
content: 'New Post';
color: #444;
font-size: 1.3rem;
font-weight: 900;
position: absolute;
margin-top: -40px;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.page-index .archive-entries:after {
content: '';
position: absolute;
top: 40px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #好きなカラーコード;
border-radius: 2px;
}

/* NewPost */
.recommend-wrap{
display:none;
}
.page-index .recommend-wrap {
display: block;
padding: 0 20px 10px;
margin: 0 auto;
max-width: 1200px;
}
.recommend-heading {
font-size: 20px;
font-weight: bold;
text-align: center;
position: relative;
}
.recommend-heading:after {
content: '';
position: absolute;
bottom: -10px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #好きなカラーコード;
border-radius: 2px;
}

真ん中にならないときは

すべてのタグを入れてプレビューをしたときに、スライダーなどが左に寄ってしまうときは、タイトル下に入れるスライダーと文字のタグを下記のコードで囲んでください。

<center>
ここに今回タイトル下に入れるすべてのコードを入れる
</center>

まとめ

今回私はこの方法で無事タイトル下周辺を編集することができました。
まだまだ勉強中の身なので、カットしきれていないものもあるかかもしれませんが、少しでも参考になれば幸いです。
参考ブログ様ありがとうございました。

コメント

タイトルとURLをコピーしました