サイトをプチリニューアルしました。【Cocoonカスタマイズ】

1.サイドバーを復活させました

1カラムのほうが本文のテキストサイズや画像大きくできて見やすいだろうと、しばらくサイドバーを非表示にしていました。ですが、目をあまり動かさずに読める範囲を考えたら、あまりメインカラムの幅広くしないほうがよいということに気づきました。
1行あたりの文字数もたくさんすぎると読みづらい。
メインカラムの幅戻すならサイドバーも戻そうとなり、カテゴリとタグ選択を復活させました。(SPは関連記事の下にあります)

2.サムネイルに薄いグレーの境界線をつけるようにしました

背景が白でサムネも白だと馴染んで気持ち悪かったので、薄い色で画像を囲いました。
box-shadowと迷ったけど、サイトデザインは線と背景色とフォントサイズ、ウェイトで強弱をつけるようなシンプルなものにしたかったので、borderを使いました。

3.サムネ付き記事リンクのマージンを詰めました

タップのしやすさを考えると余白多めの方がよいかもですが…。
わたしはキュッとしているのが好みなので詰めました。
自分の好みで好き勝手変えれるのが個人ブログのいいところ！

4.YakuHanJPを導入して約物を半角に！

地味～に気になってた役物の空白を詰めてくれるWEBフォントを導入しました。
テキスト画像だと字詰めできるんだけど、HTMLだとそこの調整がめんどくて諦めてました。
たまたまTwitterでこのYakuHanJPという存在を知りダウンロード。【】とか！？とかを半角にして詰めてくれます。役物だけのフォントだから容量も軽い！おすすめです。

Yaku Han JP - 約物半角専用のWebフォント

Yaku Han JP（ヤクハンジェイピー）は、Web上の日本語テキストに含まれる約物を半角にする「約物半角専用Webフォント」です。

yakuhanjp.qranoko.jp

おまけ：追加CSSでSASSが使える！

プリプロセッサでSassを選ぶと使えます。めちゃめちゃ便利。

一部ですが、こういうふうに使ってるよというのを紹介します。

/*ブレイクポイント*/
@mixin pc {
  @media screen and (max-width: 1100px) {
  @content;
  }
}
@mixin sp {
  @media screen and (max-width: 750px) {
  @content;
  }
}

/*px→vw変換*/
$viewport: 1100;
@function pxVw($px) {
@return (($px / $viewport) * 100) + vw;
}

/* 色 */
$color-main:#b3ccdd;
$color-main-b: #79a3bf;
$color-accent: #ffeb8f;
$color-accent-b: #fff6cc;
$color-bg: #f1f1f1;
$color-text: #727f87;
$color-link-after: #9381c8;
$color-bg-b: #f9f9f9;

/* フォントサイズ */
$size-small: 15px;
$size-small-sp: 12px;
$size-text: 18px;
$size-text-sp: 16px;
$size-h2: 26px;
$size-h2-sp: 24px;
$size-h3: 22px;
$size-h3-sp: 20px;

.tagline {
　color: $color-main;
  background: $color-accent-b;
  margin: 0;
  padding: 2px 0;
　font-size: 16px;
  @include sp {
    font-size: 12px;
  }
}

CSSカスタマイズするときは、VScodeでバーっと書いてそのまま追加CSSにコピペしています。
もしエディタ入れてなくて追加CSS欄でCSS書いてるよって方いたらVScodeをおすすめします！

【アニメ図解たっぷり】VSCodeの使い方入門！～ 基本からWeb制作まで

VIsual Studio Code（VSCode）の導入の仕方から使い方をアニメーションたっぷりで解説する入門記事です。はじめて使う人は迷いなく、導入〜基本的な使い方まで出来るようになります。プログラミング初心者の方には最適ですよ。

skillhub.jp