貯金2000万からのセミリタイア継続中

40代・貯金2000万円で無謀なセミリタイア生活を始めて5年以上継続中。気がつけば50代に…

はてなブログのhttps化が完了したので移行準備に入る

はてなブログ独自ドメインまで含め、全てのhttps対応が完了したので、やっと移行ができそうです。

staff.hatenablog.com

元々は4月1日からの予定だったんですけどね…(´・ω・`)

 移行準備はこれから

https化するにあたり、先ずはこのブログを作って、カスタマイズをした以外は準備はできていません。

独自ドメインもまだ取っていませんし、はてなPROにしないといけないし、はてなPINGをうてないのでそれも考えないといけないのかな。

やらなければいけない準備はたくさんあります。

キリのいいところで移行します

そんなわけで、キリのいい7月から移行しようかと思っています。

あと2週間以上あるので、ぼちぼち進めていくつもりです。

 

f:id:retire2k:20180331025120j:plain

このブログで行ったカスタマイズについて(その3)

旧ブログのフォントは「メイリオUI」という世間の流れに少し逆らったフォントを使っていました。

世間の少し前の流れは「メイリオ」で、最近は「游ゴシック」?

「游ゴシック」が好まれているのはWindowsMac両方に最初からインストールされているからのようです。

でも、「游ゴシック」と言えばWindowsで細く表示される問題がありました。私もWindows 8.1を使っていた時は、「読みにくいブログがあるなぁ」などと思っていたものです。

www.cherrypieweb.com

Windowsでは細いRegulerが選択され、MacではMediumが選択されるため、Windowsでは細くかすれて見えたという問題です。(Windows10以降は解消?)

これはfont-weightを指定するか、フォントの指定を「游ゴシック Medium」にすれば解決できます。

游ゴシック Mediumを使ってみたけど

ということで、最初は「游ゴシック Medium」にしていたんです。でもやっぱりWindowsでみると細い印象が拭えませんでした。元々細めのフォントなんですよね。

やっぱりメイリオに戻そうかと思ったのですが、そこでGoogleAdobeが共同開発した「Noto Sans」の存在を知りました。

11neko.com

Androidのシステムフォントとして使われているのでAndroidスマホタブレットを使っている人にはおなじみのフォントです。

Androidのブラウザではフォント指定をしてもこれが使われるそうです。(ただし機種によってはシステムフォントが違う場合もあり)

ならスマホでの表示も合わせてこれでいいんじゃない?と思ったわけですが、Webから自動でインストールするのは無駄にトラフィック発生させて悪い気がしました。

私は「Noto Sans CJK JP」をローカルにインストールしちゃったので、他にもそういう人もいるだろうということで・・・フォントの優先順序は

  1. Noto Sans CJK JP
  2. メイリオ(Meiryo)
  3. 游ゴシック Medium

にしてみました。つまり、Noto Sans フォントをローカルにインストールしてる人、Windowsの人、Macの人でそれぞれ見え方が違っているはずです。

ちなみに見え方はこのように違います。

f:id:retire2k:20180407045428p:plain

 「あいうえおかきくけこさしすせそ」

これがどれで表示されてるかで、どのフォントが選択されてるかがわかると思います。(上の画像はWindows上のChromeレンダリングされたもので、ブラウザによって変わりますが)

文字の作り自体は、游ゴシックが一番やわらかくて読みやすい気はしますねー。

また気が向いたらフォント設定は変えるかもしれません。

月刊MdN 2016年11月号

このブログで行ったカスタマイズについて(その2)

シンプルなデザインが好きで、説明(Description)も表示しない方がいいと思っています。記事一覧の要約も非表示に変更しました。

ブログのタイトルの下のブログの説明もPC用には必要だと思いますが、スマホ用には不要だと思っています。そこでこれをスマホ用の表示のみ消すことにしました。

レスポンシブデザインでのスマホ用の指定部分

まずレスポンシブデザインとは、1つのデザインでPC用、タブレット用、スマホ用の表示に対応したデザインテーマのことです。

NakedはPC用では2カラムデザインで、タブレットスマホでは1カラムデザインで、サイドバーは記事の下に表示されます。

その記述方法はいくつかありますが、Nakedで使っているのはこの形。

「PC用、及び共通の設定」

@media screen and (max-width: 768px) {
  「タブレット用の設定」
}
@media screen and (max-width: 680px) {
  「スマホ用の設定」
}

追加・変更設定でも「@media」を使ってスマホ用の変更点を書き加えることができます。

ブログタイトル下の説明の非表示設定

次に「非表示」をどう指定するか、ですがこれは簡単。「display: none;」を指定するだけです。

ブログタイトル下の説明は「#blog-description」ですから、カスタマイズとして書き加えるのは次のようになります。

@media screen and (max-width: 680px) {
    #blog-description {
        display: none;
    }
}

シンプルな表示が好きで、非表示にしたいものがあるなら「display: none;」を指定してどんどん非表示にしてしまうのも良いですね。

はてなブログカスタマイズガイド