HTMLをちょっとかじっただけ。しえるです。
初心者でもコピペで簡単にできる、はてなブログカスタマイズを色々試しています。
最初は、今からコーディング勉強する気は今のところないので「もうカスタムしなくていいから、できるだけデザインが仕上がっているテーマを選ぼう」と思って、しばらくの間はテーマ「510」にしていました。
しかし、やはりナビゲーションバーを設置したいと思い、いろんな方がカスタムを公開している人気テーマ「Minimalism」に変更してみました。
（コードを公開してくださってる方々は皆、神様すぎます！！ありがとうございます！）
今日は自分用のメモも兼ねて、参考にしたサイト様をまとめてみました。
はてなブログテーマ「Minimalism」をコピペだけで簡単カスタマイズしてみた
コピペカスタマイズの仕方
はてなブログダッシュボード「デザイン」＞「カスタマイズ」＞「デザインCSS」
基本的にブログ全体のデザイン変更は、上記にある「デザインCSS」欄にコピペしていくだけでOKです。
ちなみに、いっぱいコピペしていると何が何だかわからなくなってしまいますよね。
そんなときは「/*〇〇カスタマイズ*/」のように/**/で文字を括ると、何のコードだったかをメモしておくことができます。
詳しくは下記リンクを参照、もしくは「CSS コメントアウト」や「CSS 非表示」などでググってみてください。
また、記事中やヘッダ・フッタをカスタムしたい場合はHTML表記となり、コピペする欄がそれぞれ変わってきますので都度ご確認ください。
整理したいときは、CSSのときと同じ要領で「<!-- 非表示にする内容 -->」のように<!-- -->を入れてメモしておくと分かりやすくなります。
参考：【初心者向け】HTMLの一部を非表示にする方法 | CodeCampus
CodePenというサイトで左上にある「Start Coding」をクリックするとHTMLやCSSを試して結果が確認できるので便利です。
私が行ったカスタマイズまとめ
ナビゲーションバー
ブログのヘッダ（上部）に、記事カテゴリーを表示するバーの設置をしました。
現在は親カテゴリーのみ表示していますが、今後は子カテゴリーも選べるようにしていきたいと考えています。
パンくずリスト
パンくずリストとは、階層表示のことです。
この記事の上の部分、ブログタイトル・ナビゲーションバーの次に表示されている住所ですね。
簡単に言えば、サイトのどの部分にいるのかという現在地を示す地図のようなもの。
ずっと取り入れたいと思っていたのですが、100記事を超えていたので躊躇している間に200記事も突破してしまいました汗
今が１番少ない時！と思い直し、ようやく重い腰をあげて、カテゴリーの整理をしました。ダッシュボードの記事一覧から一括変更や、ブログ自体からの地道にローラー作戦を使いわけて、数時間かけて終わらせました！頑張った！
サイドバーのカテゴリーも集約され、少しは見やすくなったかな？と思っています。
目次
下記のステッチ風を参考に、少し自分好みにアレンジを加えてみました。
先頭のマークは下記のサイトを参考にさせていただきました。
見出し
＜h3＞と＜h4＞の見出しデザインを変更しました。
この作業をしていて初めて気付いたのですが、はてなブログって＜h1＞がブログタイトル、＜h2＞がブログ説明文になっているんですね！
だから大見出しが＜h3＞で始まるという仕様になっていたわけか！
＜h1＞＜h2＞のデザインを変えると、ブログタイトルにも影響があるので注意です。
[css付き]見出し・目次・配色などブログデザイン一新しました！ | ズボラ式
囲み枠
先にも使ってみましたが、こういった囲みポイントですね。
はてなブログでは4/30に新しく「定型文貼り付け機能」がリリースされたばかりなので、これを機会に定型文登録して使っていってみようかと思います♪
下線（マーカー）
このような感じで、今後使っていくかもしれない…！？
引用
引用ボタンを押してできる引用デザインも変更しました。
なるべく過去記事の文字位置調整をしないで済むことを重点的に選んでみました。
このような形になります。
ソーシャルパーツ
記事下にある各SNS等のシェアボタン。デフォルトをやめて変更してみました。
記事下を関連記事の上に移動させる
ソーシャルパーツを、デフォルトではないもので埋め込もうとすると、記事下に入れることになると思うのですが、そうすると関連記事よりも下になって遠くなってしまいます。
それを解消してくれる素晴らしいCSSです。
トップに戻る
これまでhomeキーでトップに戻っていたので必要性を感じていなかったのですが、スマホで見る場合は特にあった方が便利だということで、右下に押すだけでトップに戻れるボタンを設置しました。
記事の更新日表示
記事を開いた時、上部に更新日を表示するようにしました。
元々のCSSコピペ内容には「color: #888888;」と色指定が入っていたので、色を公開日とそろえるために1行削除して利用させてもらっています。
プロフィールのSNSアイコン
プロフィールにYouTubeやインスタのアイコンを設置してみました。
商品リンク（カエレバ）
カエレバとは、Amazonや楽天市場の商品を簡単に紹介できるブログパーツツールです。
こちらもたくさんのカスタマイズが公開されているので、結構色々試しました。
上記すべてを満たしたのが下記のサイトでした。
↓このような形で表示されるようになります。
基本コピペで簡単にカスタマイズできるものばかりですので、 よかったら試してみてくださいね。
