フジブロっ！

はてなブログのカスタマイズに役立つ記事やツール、デザインテーマの制作を行なっている、カスタマイズ専門ブログ

はてなブログカスタマイズまとめ
その場でコードを編集できる便利なツール集
はてなブログテーマ別カスタマイズ
トップ > カスタマイズ > はてなブログヘッダー下におすすめ記事を設置するカスタマイズ

はてなブログヘッダー下におすすめ記事を設置するカスタマイズ

カスタマイズ 便利ツール
 本ページはプロモーションが含まれています

どうも！フジグチです！

今回は、おすすめ記事を設置するカスタマイズを紹介したいと思います。

以前Cappuccinoで（Neumorphismでも）使えるおすすめ記事の設置方法は紹介しましたが、今回ははてなブログのどのテーマでも使えるおすすめ記事を設置するカスタマイズを紹介したいと思います。

ヘッダー下におすすめ記事を設置することで回遊性が良くなり、ユーザーがサイト内を巡回しやすくなるのでPV数の向上にもつながります。

おすすめの「記事」に限らず、カテゴリやまとめページを設置することで、よりユーザーに適したコンテンツを提供することも出来ます。

今回紹介するカスタマイズはHTMLが苦手な方や初心者の方でも、簡単に導入できるようにしています。

以下に、今回の記事の特徴を挙げます。

この記事の特徴
  • 入力が簡単
  • 使用する画像のアスペクト比に合わせてCSSを変えられる
  • レスポンシブで画像サイズが違っても使える
  • ワンクリックでコピー
  • CLSエラーが起こりづらい

このカスタマイズでは入力フォームを用意したので、この記事内で必要な項目を入力し「コピーする」ボタンをクリックしてコードを持ち帰り、ヘッダに貼り付けるだけです。

HTMLが苦手な方でも編集画面を見る必要がないので、「HTMLのどの部分にURLを打ち込めばいいのか分からない」「入力している途中で間違ってコードを消してしまった」といったことがありません。

また、ヘッダー部分に読み込みの時間が掛かる画像を使用すると、画像より下のコンテンツが先に表示されたあとに画像が遅れて表示されます。

このとき、先に表示されたコンテンツが下に押されて動いてしまいCLSエラーというものが起きてしまいます。

このカスタマイズではCSSのpaddingハックというものを使用して、予めCSSで画像が表示される場所を確保しておくように記述しているので、CLSエラーが起こりづらいです。

さらに、今回からカスタマイズのコードを持ち帰るために、ワンクリックでコピーできるボタンを用意したので、コピーするのも簡単になりました。ぜひチャレンジしてください。

はてなブログヘッダー下におすすめ記事を設置するカスタマイズ

デザインの説明

表示できる記事数は４記事です。PC表示時（992px以上）は横並び、それ以下（992px未満）の場合は２列になります。

ほとんどのテーマで問題なく使えると思いますが、デザインが崩れた場合はご自身で調整してください。人気のテーマではデザインの確認済みです。

デザイン確認済みテーマ
  • Minimalism
  • Brooklyn
  • UnderShirt
  • Haruni
  • Innocent
  • Naked

もちろん私が製作したテーマでも使うことが出来ます。

デザインはシンプルなものと、カード型を用意しました。どちらもCappuccinoで使えるおすすめ記事のデザインと同じようなものです。（その時の気分で作っているので若干違うかもしれません）

シンプル（PC表示）おすすめ記事デザインシンプル

シンプル（スマホ表示）おすすめ記事デザインシンプル（スマホ表示）

 

カード型（PC表示）おすすめ記事デザインカード型

カード型（スマホ表示）おすすめ記事デザインカード型（スマホ表示）

 

画像のみおすすめ記事デザイン画像のみ

画像のみで使いたい場合は、「画像のみで使用する」のチェックボックスにチェックを入れるとHTMLのタイトル部分が削除されます。画像のみで使用する場合、CSSはシンプルなデザインのみになります。

画像のアスペクト比は２：１に設定しています。対比が違うとはみ出た部分は切り取られて表示されます。

切り取られて問題ない場合はそのままでも使えますが、使用したい画像のアスペクト比が違う場合は入力フォームに使用する画像サイズを打ち込めば、計算してCSSが書き換わります。

横長の画像にしてバナーのように、縦長の画像でファッションのカテゴリ分けのようにするなど、こだわりの画像を作るのもいいですね^^

カスタマイズ方法

以下に簡単な流れを記します。

入力項目を埋める → HTMLをコピー → ヘッダに貼り付け → デザインを選びCSSをコピー → デザインCSSに貼り付け

説明しなくても分かりやすいように作ったつもりですが、念のため使用方法を含めて詳しく説明します。

STEP

記事のURLを入れる

表示したい記事（もしくはカテゴリ等）のURLを入れてください。
STEP

画像のURLを入れる

表示したい画像のURLを入力してください。

画像のURLの取得の仕方は、はてなフォトライフを開き画像の上で右クリックして「画像アドレスをコピー」するという方法と、見たまま編集画面で画像を貼り付け、HTML編集画面に切り替え<img src="https//～">というタグの「""」に挟まれたhttps~から始まる部分をコピーするという方法があります。

文章だけでは分からないという方は、Cappuccinoにおすすめ記事を設置するカスタマイズの記事で画像URLの取得の仕方を図解していますのでご覧下さい。（リンクをクリックすると自動で該当の場所に飛びます。）

STEP

記事タイトルを入れる（alt属性にも使用します）

表示する記事のタイトルを入力してください。画像のalt属性にも適用されますので画像のみで使用する方も入れてください。

画像のみで使用する場合は「画像のみで使用する」のチェックボックスにチェックを入れるとタイトルが消えます。（alt属性は残ります）

STEP

HTMLコードを入れる

全ての入力欄に入力したら「このコードをコピーする」のボタンをクリックし、HTMLコードをコピーして下さい。

コピーしたコードを【ダッシュボード】>【デザイン】>【スパナマーク】>【ヘッダ】の「タイトル下」に貼り付けてください。

STEP

CSSコードを入れる

「シンプル」か「カード型」のデザインを選び使用するCSSコードをコピーします。

コピーしたコードを【ダッシュボード】>【デザイン】>【スパナマーク】>【デザインCSS】に貼り付けてください。

STEP

確認する

実際にページに飛ぶことが出来るか確認してください。修正がないか確認できるまでこのページを開いたままにしておくと良いと思います。

おすすめ記事のHTML

フォームに入力してください。

1記事目
2記事目
3記事目
4記事目
画像サイズ（半角で入力してください） px px

※画像のみで使用する場合はこのチェックボックスに、チェックを入れてください

全ての項目入力後、下ボタンを押してコードをコピーして下さい。 

<!--おすすめ記事-->
<div class="recommend-container">
  <ul class="recommend-wrap">
  
  <!--１記事目-->
    <li class="recommend-item">
      <a href="" class="recommend-link">
        <figure class="recommend-figure"><img src=" " alt=" " class="recommend-img"></figure>
        <span class="recommend-title"> </span>
      </a>
    </li>
    
  <!--２記事目-->
    <li class="recommend-item">
      <a href=" " class="recommend-link">
        <figure class="recommend-figure"><img src=" " alt=" " class="recommend-img"></figure>
        <span class="recommend-title"> </span>
      </a>
    </li>
    
  <!--３記事目-->
    <li class="recommend-item">
      <a href=" " class="recommend-link">
        <figure class="recommend-figure"><img src=" " alt=" " class="recommend-img"></figure>
        <span class="recommend-title"> </span>
      </a>
    </li>
    
  <!--４記事目-->
    <li class="recommend-item">
      <a href=" " class="recommend-link">
        <figure class="recommend-figure"><img src=" " alt=" " class="recommend-img"></figure>
        <span class="recommend-title"> </span>
      </a>
    </li>
    
  </ul>
</div>

おすすめ記事のCSS

デザインを選びCSSをコピーして下さい。

おすすめ記事デザインシンプル

/***おすすめ記事デザインシンプル***/
[class^="recommend"] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.recommend-container {
    padding: 20px 1vw 0;
    background: #fff;
}

.recommend-wrap {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    list-style: none;
}

.recommend-item {
    width: 50%;
}

.recommend-figure {
    margin-bottom: 10px;
    padding-top: 50%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.recommend-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: .3s ease-in-out;
}

.recommend-title {
    display: block;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    line-height: 1.4;
    margin: 10px 0 20px;
}

.recommend-link {
    text-decoration: none;
    color: #454545!important;
    display: block;
    padding: 0 1.2vw 1vw;
}

@media (min-width: 992px) {
    .recommend-container {
        padding: 20px 20px 0;
    }
    .recommend-item {
        width: 25%;
    }
    .recommend-link {
        padding: 0 8px 8px;
    }
}

.recommend-link:hover .recommend-figure img {
    transform: scale(1.05);
}

.recommend-figure::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: .2s ease-in-out;
}

.recommend-link:hover .recommend-figure::before {
    opacity: 1;
}

 

おすすめ記事デザインカード型

※2021/5/18 カードの背景色の指定方法を修正しました

/***おすすめ記事デザインカード型***/
[class^="recommend"] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.recommend-container {
    padding: 20px 2vw;
    background: #fff;
}

.recommend-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    list-style: none;
}

.recommend-item {
    width: calc(50% - 1vw);
    border: solid 1px #ddd;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

@media (min-width: 992px) {
    .recommend-container {
        padding: 28px 28px 0;
    }
    .recommend-item {
        width: calc(25% - 10px);
    }
}

.recommend-figure {
    padding-top: 50%;
    position: relative;
    overflow: hidden;
}

.recommend-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: .3s ease-in-out;
}

.recommend-title {
    display: block;
    padding: 8px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    line-height: 1.4;
}

.recommend-link {
    text-decoration: none;
    color: #454545!important;
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
}

.recommend-link:hover .recommend-figure img {
    transform: scale(1.05);
}

.recommend-figure::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: .2s ease-in-out;
}

.recommend-link:hover .recommend-figure::before {
    opacity: 1;
}

カスタマイズする場合

背景色に白を設定しています。変えたい場合は.recommend-container の部分で指定している「#fff」のカラーコードを変更してください。
また、背景色を透過したい場合は transparent としてください。

.recommend-container {
    background: transparent;/* 背景色透過 */
}

もしも一記事だけ変更したいということがあった場合は１記事目の入力フォームを埋めた後に<!--１記事目-->と書かれた<li>～</li>の部分をコピーして入れ替えてください。

コードの作成を楽に出来るように工夫してみましたが、慣れないJavaScriptを使っているので、不具合がありましたら報告してください。

※コードを紹介する場合は引用や転載はせずにリンクを明記してください。

utoutosara

コメントを書く
　

お問い合わせ 　 プライバシーポリシー

Copyright © 2020 fuji-blo.com