はてなブログ無料版: トップページを魅力的にカスタマイズする方法①

①基本設定、見出しの装飾、
コンタクトへのリンク

本記事では無料版はてなブログのトップページを、自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。

ブログを運営する上での重要なポイントを押さえつつ、分かりやすく解説します。これらの手順やアイディアを元に、ブログアレンジのヒントとしていただければ幸いです。

affordable design product — https://pixabay.com/users/geralt-9301/

デモページ
カスタマイズの概要
カスタマイズの手順
コンテンツ
- リンクボタンの設置
  - ソースコード
  - Output
- 見出しの装飾
  - ソースコード
    - CSS
    - Markdown
  - Output
おわりに
- 続きはこちらです

デモページ

デモページを見る

カスタマイズの概要

はてなブログの無料版では、トップページには記事本文が新着順に羅列されるのみで、表示形式を選択することが出来ません。Pro版や有料ブログ風にカスタマイズするために、先ずは1記事をトップページ風にアレンジする下地を作ります。

1つの記事をトップに固定表示することにより疑似的なトップページとし、あとはその記事をトップページ風にカスタマイズしていきます。

カスタマイズの手順

①基本設定

ダッシュボードの「設定」-> 「詳細設定」の「ブログ表示」から、トップページの記事数を「1」に変更します。

②不要な要素を消す

記事タイトル、パンくずリストなどトップページでは不要と思われる要素を非表示にします。

ソースコード

CSS

.entry-header,  /* 記事タイトル */
#top-box,  /* パンくずリスト */
.pager,  /* 記事下ページャー */
#box2,  /* サイドバー要素 */
#footer  /* フッタ */
{display: none;}

③フッタのカスタマイズ

既存のフッタに変えてオリジナルのフッタを配置（お好みで）。置く場所は、「デザイン」->「カスタマイズ」->「フッタ」

ソースコード

HTML

<div id="copyright" style="font-size: .8em;background: #eee;text-align: center;">Copyright © 20XX <strong>ブログ名</strong>, All Rights Reserved.<br>
    <a href="お問い合わせへのリンク"><i class="blogicon-mail lg"></i>Contact Us</a> | <a href="免責事項へのリンク">Privacy Policy and Disclaimer</a>
</div>

Output

④ページの公開

トップページ用の記事が完成したら公開をします。公開する時、公開日時を当分先の未来（上限は9999年12月31日）に指定することにより、ページドメインのホーム画面にトップページ用の記事が常に表示されます。

アーカイブページから消す

ただそのままだと、記事一覧ページ（/archive）でも常に最上位に表示されてしまうので、記事一覧ではdisplay: noneで非表示にします。ピンポイントで特定の記事を非表示にするには、その記事のID番号を取得する必要があります。

ID番号を検索・取得して記事一覧から非表示にする手順

記事一覧ページ（ブログドメインに/archiveを付けたページ）を開く
一覧から、トップページ用の記事のタイトルを選んで右クリックする
「検証（開発）ツール」を選択して起動
各記事を構成するセクションタグ（<section>）から、
data-uuid="19桁のID番号"のID番号部分をコピー
CSSで非表示にする

実際のコード

<section class="archive-entry test-archive-entry autopagerize_page_element" data-uuid="6801883189061650872">

ピンクで網掛けされた部分の数値を下記のコードで指定して、一覧から非表示にします。

.archive-entry[data-uuid="コピーしたトップ用記事のID番号"] {
    display: none;
}

これで、トップページの下地が出来上がりました。

コンテンツ

下地が出来たので、実際にトップページに載せる内容を記事ページに作成していきます。

リンクボタンの設置

先ずは「Main Category」、「Contact」セクションにボタン形式のリンク要素を設置します。 about・免責事項・問い合わせページへのリンクをトップページに置くことは、アドセンスの申請にも重要な意味を持ちます。

ソースコード

HTML

<ul class="top-banner1">
  <li style="background: #e3ba96;">
    <a href="カテゴリページへのＵＲＬ" class="link-btn"><i class="fa-solid fa-blog"></i>カテゴリ名１</a></li>
  <li style="background: #e3acac;">
    <a href="カテゴリページへのＵＲＬ" class="link-btn"><i class="fa-solid fa-chart-line"></i>カテゴリ名２</a></li>
  <li style="background: #b2bfce;">
    <a href="カテゴリページへのＵＲＬ" class="link-btn"><i class="fa-solid fa-wrench"></i>カテゴリ名３</a></li>
</ul>

<ul class="top-banner1 hai">
  <li><a href="ABOUTへのＵＲＬ" class="link-btn"><i class="fas fa-home"></i>ABOUT</a></li>
  <li><a href="お問合せへのＵＲＬ" class="link-btn"><i class="fa-solid fa-envelope"></i>お問合せ</a></li>
  <li><a href="免責事項へのＵＲＬ" class="link-btn"><i class="fa-solid fa-file-invoice"></i>免責事項</a></li>
</ul>

CSS

ul.top-banner1 {
    display: flex;
    justify-content: center;  /* 要素を横方向センター寄せ */
    align-items: center;  /* 要素を縦方向センター寄せ */
    margin: 0 15px;
    padding: 0;
    list-style: none;
}

.top-banner1 li {
    width: calc(100%/3);
    max-width: 204px;
    min-width: 150px;
    margin: 15px 5px;
    line-height: 20px;
    border-radius: 7px;
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}

.top-banner1.hai li {
    background: #bababa;
}

/* マウスオーバー時のスタイル */
.top-banner1 li:hover {
    transform: translateY(-4px);
    box-shadow: 0 3px 7px rgba(0, 0, 0, .4);
    opacity: .8;
}

.link-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 700;
    padding: 10px;
}

i.fa-solid {
    margin: 0 .1em;
}

/* 500pxまで */
@media (max-width:500px) {

    ul.top-banner1 {
        flex-direction: column;  /* 要素を縦並びに */
    }

}

ボタン風の外観にして、マウスオーバーすると少し浮き上がる仕様にしています。また、画面幅が狭まると横並びから縦並びに変わります。

アイコンにはFont Awesomeを利用しています。

fontawesome.com

ライブラリのCDN

以下のCDNコードをheadなどに配置することによって、Font Awesomeのライブラリが利用可能になります。CDNとは、Content Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

Output

見出しの装飾

トップページの見出し項目をCSSで装飾します。

ソースコード

CSS

.entry-content h6 {
    position: relative;
    margin: 100px auto 50px;
    padding: 1.5rem;
    font-size: 200%;
    font-family: 'Playfair Display';  /* Google Fonts「Playfair Display」を利用 */
    text-align: center;
    font-weight: 400;
    line-height: auto;
}

.entry-content h6:before {
    content: '';
    position: absolute;
    width: 60px;
    height: 5px;
    bottom: 10px;
    left: calc(50% - 30px);
    border-radius: 3px;
    background: #e3acac;
}