本ページにはプロモーションが含まれます。
自分用のバックアップも兼ねて、当ブログのHTML/CSSコードをご紹介します。
カテゴリー別記事一覧がゴチャゴチャしていて見にくいのですっきりさせました。
ミニマリストな方向けに最低限の要素だけ。
ご自由にコピペしていただいて構いません。
当ブログのカテゴリー別記事一覧ページ
引用元
↓以下のサイトで紹介されているコードを元に作成しました。
なすみのメモ帳
はてなブログの「記事一覧」をカスタマイズ！（CSS解説付き）【Minimalism】 - なすみのメモ帳
システムエンジニアのメモ
記事の日付を消す はてなブログのカスタマイズ - システムエンジニアのメモ
おーかみにっき。
【はてなブログ】記事下のはてなIDと執筆日時を消す方法【コピペのみ】 - おーかみにっき。
みにまる。
はてなブログカード下のURLを削除して「すっきり」とした表示に！ - みにまる。
デザインテーマ・設定
・デザインテーマSmooth（デフォルト）
・レスポンシブデザイン
カテゴリー別記事一覧ページのコード
【デザインCSS】に貼るコード↓
.page-archive .archive-entries .archive-entry {
padding: 10px;
width: 100%;
border-top: 4px solid #3cb371;
margin-bottom:15px;
background:none;
}
.page-archive .archive-entries .entry-title {
font-size: 0px;
}
.page-archive .entry-title a {
font-size: 18px;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
letter-spacing:0.3pt;
}
.page-archive .entry-thumb {
width: 300px;
height: 150px;
border-radius: 6px;
}
.archive-entry-tags-wrapper {
display: none;
}
.entry-description {
display: none;
}
CSS解説
.page-archive .archive-entries .archive-entry {
padding: 要素と端の間隔px;
width: 幅の割合%;
border-top: 上の線px solidは普通の線 #線の色（カラーコード）;
margin-bottom:記事と記事の間隔px;
background:noneは背景色を無くす（色付けたければカラーコード入力）;
}
.page-archive .archive-entries .entry-title {
font-size: 0px;
}↑デフォルトデザインをリセット
.page-archive .entry-title a {
font-size: タイトル文字の大きさの数値px;
font-family: 字体;
letter-spacing:文字間隔の数値pt;
}
.page-archive .entry-thumb {
width: 画像幅の数値px;
height: 画像高さの数値px;
border-radius: 画像角の丸みの数値px;
}
.archive-entry-tags-wrapper {
display: noneで記事一覧のブログタグ表示を消す;
}
.entry-description {
display: noneで本文の表示を消す;
}
・元から記述されているコードは消さないで最後の「 } 」のすぐ下にペーストします。
・他に自分でコードを書いている場合も同様に最後の「 } 」の下に追加でペーストします。
・通常、CSSは下に追加したコードの指示が優先して反映されます。
・↓字体の設定の仕方はこちらで知ることができます。
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
・↓カラーコードはこのサイトで調べられます。
・↓縦線はsolid（普通の線）の代わりにdotted（点線）など指定できます。
CSSで枠線（ボーダー）をデザインする方法：borderプロパティ | ワードプレステーマTCD
もっと記事内・一覧がスッキリするコード
【デザインCSS】に貼るコード↓
.date {
display:none;
}
.entry-footer-time {
display: none;
}
.categories a {
display: none;
}
.fn {
display: none
}
.entry-tags-wrapper {
display: none;
}
cite.hatena-citation{
display:none;
}
CSS解説
.date {
display:noneで日付の表示消す;
}
.entry-footer-time {
display: noneで記事下の何日前の記事かの表示を消す;
}
.categories a {
display: noneでカテゴリーの表示を消す;
}
.fn {
display: noneで記事下の名前とidを消す;
}
.entry-tags-wrapper {
display: noneで記事下のブログタグ表示を消す;
}
cite.hatena-citation{
display:noneで貼り付けたブログカード下のリンクを消す;
}
・元から記述されているコードは消さないで最後の「 } 」のすぐ下にペーストします。
・他に自分でコードを書いている場合も同様に最後の「 } 」の下に追加でペーストします。
・通常、CSSは下に追加したコードの指示が優先して反映されます。
・「デザイン」のページから各種SNSシェアボタンなど消せますが、パンくずリストは閲覧しやすさのため残した方が良いです。*1
・コメントボタンは「基本設定」で消せます。
・一覧ページでのカテゴリータイトルの表示は「詳細設定」で消せます。
・ヘッダーとフッダー、記事内下の読者になるボタンはいじらない方が良いらしいです。（無料ユーザーははてなブログの規約違反となる？）
ご参考になれば幸いです。
＼ ゆるく勉強中 ／
【関連記事】
dangomushijouhou.hatenablog.com
