みそトマトのブログ

好きなことを書く

ブログデザインをカスタマイズした記録

 新ブログを作ってから実際に始動するまでの準備として、まずブログのデザインをいろいろカスタマイズした。そこで、ブログのどこをどうカスタマイズしたのか全部まとめておきたい。

 はてなブログレスポンシブデザインにするとPCのデザインをスマホに反映させられるのが良いね。おかげでデザインをいじるのが楽しい! 今後もカスタマイズするたびにこの記事に記録していこうと思う。

更新履歴

  • 「カテゴリーの階層化」を追加(2021/4/18)
  • 更新履歴を追加(2021/4/27)
  • 「箇条書き」に追記(2021/4/27)

 

デザインテーマ

 今使っているのは「Minimalism」というデザインテーマ。テーマストアに上がっているデザインを片っ端から見ていったけど、結局人気1位のこれにした。詳しくは↓

hitsuzi.hatenablog.com

 ヘッダーの背景色/文字色を変更。旧ブログでも使ってたピンク系統の色にして、ブログ全体のカスタマイズをだいたい同じ色で統一することに。季節ごとに変えるのも良いかも?

 ヘッダーの下にナビゲーションメニューが表示できる。ここのアイコンと項目も少しいじった。記事が増えてきたらその都度変えたい。いろいろと便利な使い方ができるはず。

 

見出しデザイン(大)

見出しデザイン(小)

 大きい見出しと小さい見出し1個ずつあれば十分だと思うのでh3とh4について設定。どちらも「サルワカ」さんの以下の記事で紹介されているもの(の色を変えたバージョン)。h3のほうは旧ブログでも使ってた。

saruwakakun.com

 

目次デザイン

 見やすくて可愛い良い目次デザインが出来た! 以下の「サルワカ」さんの記事にある「4.リストにタイトルタブをつける」を参考に、これをはてなブログの目次タグを記述するだけで出せるようにしたもの。

saruwakakun.com

 

箇条書き

 目次と同じようなデザインのリストボックスにしようと思った。順序なしリストは3階層までで階層ごとにアイコンの色を変更。順序ありリストはwikipediaみたいに子要素が1-1, 1-2と表示されるようにしてみた(サルワカさんのリストデザイン34選の記事と、以下の記事を参考に)

www.dreamark.tokyo

 ※2021/4/27追記 目次と同じデザインだと紛らわしいなと思い直し、別のデザインを採用。以下サンプル(クリックで開閉)

現在使っているデザインのサンプル

◆順序なしリスト

◆順序ありリスト

  1. ロシア語の数詞
    1. 基数詞
      1. 基数詞の格変化
      2. 数詞と名詞の結びつき
    2. 順序数詞
    3. 集合数詞
  2. ウクライナ語の数詞
  3. ベラルーシ語の数詞

 

引用ボックス

何かを引用するときに使う予定のボックスデザイン。以下の「サルワカ」さんの記事から拝借して、色を変えたもの。ここに出典

saruwakakun.com

 

アンダーラインを引く

 カスタマイズについていろいろ調べてたら蛍光ペン風のアンダーラインを使ってるサイトがいくつかあって、良いな~と思ったので設定。7色のライン+太字が出せるようにした。色は後で変えるかもしれない。

 都合上常にライン付き+太字の形でしか使えないけど、たぶんこの形で強調するときしか使わないし大丈夫だろう。

 赤色のライン+太字

 オレンジ色のライン+太字

 黄色のライン+太字

 緑色のライン+太字

 青色のライン+太字

 紫色のライン+太字

 ピンク色のライン+太字

 

表(テーブル)

 表のデザイン自体はかなりシンプルに。キャプションを可愛くしたのと、横に長い表をスマホで見たときスクロールできるようにしてみた。

 たぶんスマホだけじゃなくて、表が横に長くなってはみ出す場合はPCからでもスクロールができる(↓に長めの表のサンプルを)

webcommu.net

サンプル(東スラヴ諸語の曜日)
  「月曜日」 「火曜日」 「水曜日」 「木曜日」 「金曜日」 「土曜日」 「日曜日」
ロシア語 понедельник вторник среда четверг пятница суббота воскресенье
ウクライナ понеділок вівторок середа четвер п'ятниця субота неділя
ベラルーシ панядзелак аўторак серада чацвер пятніца субота нядзеля

 

フォント

 表のカスタマイズをしてたらキリル文字がなぜか全角っぽく表示されてしまうことが発覚。それは困るというわけで、綺麗に表示されるようにいろいろ試した結果、Google FontsからNoto Sansをインストールして設定した。綺麗になった…!(↑の表を参照)

 

ボックスデザイン

ここにタイトル

 引用ボックスと同じで、「サルワカ」さんの記事から拝借して色と文字サイズを少し変えたもの。タイトル付きで、ここを変えることでいろいろなことに使えそう。

saruwakakun.com

 

サイドバー

 タイトルの色を変更。

カテゴリーの階層化

 以下の記事を参考に、カテゴリーが階層表示されるようにした。旧ブログでもそうしてたし、このほうがきっと見やすい。↓の記事では、カテゴリーの表示順をアルファベットにする必要があると書かれてるけど、別の方の記事では「カスタム」でも行けそうなことが書いてあったので、とりあえずカスタムで設定。順番を正しく並べないと表示が変になるので注意。

blog.wackwack.net

 

アイキャッチ画像

 表示する場所によって「正方形にしかならないもの」「長方形にしかならないもの」「どちらにも出来るもの」があって非常に面倒。基本的には長方形で、スマホから見たときは少し小さめに表示されるように、正方形にしかならないものは正方形にした。具体的には↓

  1. 関連記事(正方形)
  2. サイドバー(長方形)
  3. アーカイブページ(長方形)

 この辺りは検索して調べたりもしたけど、ほぼほぼ自力で。サイドバーの設定は簡単にできるし、アーカイブページの画像サイズ(PCから見たとき)も比較的楽だったけど、スマホから見た場合の画像サイズやら文字や画像の位置を調整するのが大変だった…。

www.chankome.com

 ↑の記事がとても役に立ったのでリンク貼っておく。構造を把握するって大事…!

 

カテゴリーページの見出し

 カテゴリー名をクリックするとそのカテゴリーの記事一覧が表示されるんだけど、見出しがあまりにも簡素だったので「(カテゴリー名) カテゴリーの記事一覧」という風に表示されるようにした。↓を参考に。

focus3.hatenablog.com