はてな無料版 | カテゴリーのタイル表示、トップページのアーカイブ表示 - ブログ

f:id:Zzak:20201011125229j:plain

(図脳 Pixabay)

ブログを利用してから1年が過ぎたところです。

わずかですが要望が出て来ました。

細かいことを忘れてもいいように、久しぶりにメモ化します。

どなたかのお役に立つことがあればうれしいです !

はてな無料版 | カテゴリーのタイル表示、トップページのアーカイブ表示

目的：徐々に増えたカテゴリーを少しでも整理

環境：PC、デザインテーマ「Report」

手法：みなさまの記事にて学ばせていただき、実践

項目：

１. カテゴリーのタイル表示

２. トップページのアーカイブ表示

１. カテゴリーのタイル表示

はてなブログの初期状態では、サイドバーに表示されるカテゴリーがリスト形式で表示されます。当初はそのまま利用していましたが、ブログの利用時間とともにカテゴリ―が少しずつ増えました。カテゴリーのヒエラルキー表示も含めて、いろいろと検討しました。サイドバーが間延びしてきており、これを少しでもまとめたい気持ちになりました。

以下はデザインテーマ「Report」に適用している例になります。デザインテーマにより諸々が変わると思います。

手順：ダッシュボード：「デザイン」>「カスタマイズ」>「デザインCCS」

に次のコードを記入します。

コードの注釈文で「枠」と記載している箇所は、「タイルに見立てる境界の囲み枠」のことになります。

/* カテゴリの表示 */

.hatena-module-category a::before {

    content: "";                           /* 文字先頭部共通 */

}

.hatena-module-category .hatena-urllist li {

    display: inline-block;

    width: auto;

    margin-bottom: 5px;            /* 枠の上下間隔 */

    padding: 1px 2px;                 /* 枠の間隔 */

/* background-color: #fbfbfb; 枠内の背景色 */

}

.hatena-module-category .hatena-urllist li a {

    border: 1px solid #e6e6e6; /* 枠線の太さと色 */

    border-radius: 2px;              /* 枠の面取り */

    display: inline-block;

    font-size: 0.8667em;            /* 文字の大きさ */

    line-height: 25px;                 /* 枠内の上下余白 */

    padding: 0 3px;                    /* 枠内の左右余白 */

}

PC とマウス利用の環境ですので、詰め気味の調整としています。タッチパネルの利用を意識するのでしたら、詰め過ぎない方がいいのかもしれません。パラメーターの値を調整されるときは、1～3px づつ加算して様子をみながら動かしてみると良いと思います。
色番号に対応する色見本は、原色大辞典 ( https://www.colordic.org/ ) を参考にしてください。もしくは、16進数カラーコード・RGB・RGBA変換ツール( http://j-press.info/16torgba/ )も便利です。

編集が終わったら、上部にある「変更を保存する」ボタンをクリックして完了です。

f:id:Zzak:20201012015454j:plain

上図の赤枠内にCCSコードを追加したことで、サイドバーのカテゴリーがタイル表示になった例。

２. トップページのアーカイブ表示

はてなブログのPCで表示される初期状態は、ブログのトップページに入ると最新の記事が表示される仕様になっています。みなさまそれぞれが拘りを持たれて、さまざまなトップページを作り込まれています。

トップページにつきましては、シンプルにアーカイブの表示をさせるだけを採用することにいたしました。自分の目的に合うより優れたトップページを求めて、気が変わりましたら迷わず変更するかもしれません。

手順：ダッシュボード：「設定」>「詳細設定」>「検索エンジンの最適化」>「headに要素を追加」

<script type="text/javascript">

if( location.href == 'https://your-page.hatenablog.jp/'){

location.href='https://your-page.hatenablog.jp/archive';

}

</script>

<noscript>

<p><a href="https://your-page.hatenablog.jp/archive">あなたのブログの名称</a></p>

</noscript>