JUGEMからはてなブログに引っ越してきて、デザイン設定でカスタマイズした箇所を記録しておきます。
CSSやスクリプト内容は基本的に転載せず、記載場所のみの記録です。
やりたかったことは、ほとんどできたかな？
- デザイン
- ヘッダ画像とタイトル文字の配置
- ナビゲーションメニューの設置
- 「TOPへ戻る」ボタンの設置
- 本文内画像を角丸にする
- 本文内画像の拡大表示をオフにする
- カテゴリを折り畳む
- プロフィールに文章を追加する
- 最新記事にサムネイル画像を追加する
- サイドバーのリンク文字色を黒に変更
- 無料プランでもトップページを一覧表示にする
- トップページをカード型レイアウトにする
- SNSシェアボタンを記事下に追加
デザイン
テーマストアから『Stripe』を選びました。
決め手は、
- 右サイドバー２カラム
- シンプル
- 白でアクセントが紺色（Knights色！）
- レスポンシブデザインテーマ（スマホもPC版と同じデザイン）
でした。
ヘッダ画像とタイトル文字の配置
推奨サイズは幅1000px、高さ200pxとのこと。
タイトル文字が真ん中だとルイたんが隠れてしまうので、左下にくるように配置しました。
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ デザインCSS
#blog-title #title {
margin:0px;
padding: 120px 0px 0px 25px;
text-align: left;
}
#blog-title #blog-description {
margin:0px;
padding: 0px 0px 0px 25px;
text-align: left;
}
ナビゲーションメニューの設置
『Stripe』テーマページにある、ナビゲーションメニューを追加しました。
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ ヘッダ ＞ タイトル下
（コードは『Stripe』テーマページ参照）
ドロップダウンメニューは使用予定がないので、コメントアウトしておきました。
「TOPへ戻る」ボタンの設置
超絶長いゲームプレイ日記もあるので、TOPへ戻るボタンは欲しかったです。
ありがたく追加させていただきました。
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ フッタ
（コードは『Stripe』テーマページ参照）
本文内画像を角丸にする
これができるCSSを知らなくて、ずっとPhotoShopで角丸に加工して画像を用意していました。
▼こんな感じで
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ デザインCSS
.entry-content img{ border-radius:20px; }
角丸具合を数字で指定できるので、20pxにしておきました。
CSSの設定のほうが角丸きれいだ(´；ω；`)ｳｯ…
本文内画像の拡大表示をオフにする
個人的に、この拡大表示は不要だなと……思うんです。
「サムネイル表示で、拡大して見る」ならアリだけど。
こちらのブログを参考に、CSS追記しました。
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ デザインCSS
.hatena-fotolife{ pointer-events: none; }
カテゴリを折り畳む
あれこれと手を出して書いてきたので、ジャンルが多岐にわたります。
JUGEMでもカテゴリを折りたたむカスタマイズをしていたので、はてなブログでも同様にしたかったのですが、標準ではできない模様。
こちらのブログパーツを利用させていただくことにしました。
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ 記事 ＞ パンくずリストにチェック
カテゴリーの名前を指定通りに変更
※カテゴリーの新規追加は、「ブログ記事を書く」ページ、もしくは「記事の管理」一括追加の所からしかできない模様？
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ フッタ
※上記説明ブログ内指定のスクリプトを追加
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ ヘッダ
※上記説明ブログ内指定のスクリプトを追加
※2023.4.30追記
直接記述する方法を試したところ、一時畳まれない現象があったので、こちらの方法も試してみました。こちらだと、記事内に表示されるのが親カテゴリだけになってしまうようです。（子カテゴリだけの表示ができない）
設定＞詳細設定＞head内タグ ＞<head>要素にメタデータを追加
※上記説明ブログ内指定のHTMLを追加
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ サイドバー
※HTMLのモジュールを追加し、上記説明ブログ内のコードを追加
プロフィールに文章を追加する
サイドバーのプロフィール文の設定がどこだかわからなくて、ものすごく探し回ってしまったのですが、
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ サイドバー ＞ 編集
だったのか……
サイドバーの”編集”の文字を完全にスルーしてしまった( ；∀；)
最新記事にサムネイル画像を追加する
プロフィール文同様、めちゃくちゃ探し回りました。
どこかにHTMLを記述しないといけないと思って、やり方を探したけど見つからなくて。
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ サイドバー ＞ 編集
簡単に設定できました(^^;
ここのサムネイル画像の大きさは、80pxにしてあります。
サイドバーのリンク文字色を黒に変更
本文内のリンクは黒以外がわかりやすいなと思います。
好みもあるだろうけど。
でも、サイドバーのリンク色は濃い色の方が好きなので、変更することにしました。
ついでに、カーソルが乗った時に色を変更。
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ デザインCSS
.hatena-module-body a { color: #333; }
.hatena-module-body a:hover { color: #00afcc; }
ちなみに、「#00afcc」はターコイズブルー✨ ALKALOIDカラー……！
無料プランでもトップページを一覧表示にする
有料プランは、トップページを一覧表示にできます。
無料プランに戻した時に一覧表示にしたくなるかもしれないので、メモしておきます。
ダッシュボード ＞ 設定 ＞ 詳細設定 ＞<head> 要素にメタデータを追加
<script type="text/javascript"><!--
if(location.href === "自分のブログURL") {
location.href = "自分のブログURL/archive"
}
// --></script>
トップページをカード型レイアウトにする
これをやってみたかった……！
念願のカード型レイアウト！
カード型レイアウト、記事タイトルをサムネの下、本文非表示の３つを追加しました。
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ デザインCSS
※上記説明ブログ内指定のCSSを追加
SNSシェアボタンを記事下に追加
デフォルトのシェアボタンを設置してみたものの、サイズがバラバラで見た目よろしくない。
よく見かける記事下に同じ大きさのアイコンが並ぶようにしたいなぁと思って、こちらのnoteのシェアボタンを利用させていただくことにしました。
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ 記事 ＞ 記事下 ※上記説明note内指定のスクリプトを追加
ダッシュボード ＞ デザイン ＞ カスタマイズ ＞ デザインCSS
※上記説明note内指定のスクリプトを追加
以上、このくらいかな？
いろいろ設定し終わった後にうっかりデザインテーマを変更したら、追加したCSSとか全部無くなっちゃって。
同じような設定を何度も繰り返すたびに、記述箇所探したり追記したりするのが大変だったので、自分用にまとめてみました。
目次機能の使い方もわかったので、過去記事で目次あったほうがよさそうな長いものに追加しておこうと思います。
