【コピペok】NOEL(tcd)の文字サイズを変更するCSS

スタートアップブログセミナー

こんにちは、和久井港(@misanwakui)です。

さて今回は、NOEL(TCD)のブログの文字サイズを16pxに変更する方法をご紹介します。

16pxはGoogleが推奨しているフォントサイズ?

Font sizes smaller than 12px are often difficult to read on mobile devices, and may require users to pinch-to-zoom in order to display the text at a comfortable reading size.

https://developers.google.com/web/tools/lighthouse/audits/font-sizes#overview

1~2年前からGoogleは16pxを推奨しているという話がやたらとブロガー、アフィカス界隈で話題になっていました。

当時僕は駆け出しだったので黙って16pxに従っていたのですが、今更になって調べてみると別に16pxとは明記されてないですね。

文字サイズが12pxより小さい場合、モバイルデバイスで読むのが大変だし、読むためにズームとかしなきゃならくね?

と、Overviewでは語られています。

Aim to have a font size of at least 12px on at least 60% of the text on your pages.

https://developers.google.com/web/tools/lighthouse/audits/font-sizes#recommendations

ページ上の最低60%の文字サイズが12px以上であることを目指す。

ということです。

内部SEO監査ツール「Lighthouse」

で、これらは全てGoogle公式のクローム拡張機能であるLighthouseで言われていることなんですね。

Lighthouseというのは、内部SEOをチェックするツールのことです。Googleが公式で認めているということなので、かなり信憑性が高いです。

ご自身のブログやウェブサイトのSEOをチェックしてみると良いでしょう。無料ですので、以下からどうぞ。

フォントサイズは2014年の情報だった?

Googleが公式で「16pxが一番いいです。SEO的に優先されます」というステートメントはおそらくどこにもありません。

日本のブログでもそれっぽいリンクが紹介されていますが、既に切れていたり、情報が2014年、それ以前のものであったり、2020年現在、16pxが最も適切だ!と明確に確認は出来ません。

もし見つけた方がいましたらぜひコメントください。よろしくお願いします。

【事実】ただTCDのブログは文字サイズが小さすぎ

まずこちらがデフォルトの文字サイズです。

多分ですが、全テーマ共通して12~14pxくらいですよね?

で、これが16pxです。

12~18pxで文字サイズ比較をしてみる

【12px】いつも和久井大学をご覧いただき誠にありがとうございます。これからも楽しいコンテンツを発信していきますので応援よろしくお願いします。

【14px】いつも和久井大学をご覧いただき誠にありがとうございます。これからも楽しいコンテンツを発信していきますので応援よろしくお願いします。

【16px】いつも和久井大学をご覧いただき誠にありがとうございます。これからも楽しいコンテンツを発信していきますので応援よろしくお願いします。

【18px】いつも和久井大学をご覧いただき誠にありがとうございます。これからも楽しいコンテンツを発信していきますので応援よろしくお願いします。

実際、これだけ違います。

どれが一番読みやすいですか?最低12pxということは公式に明記してあったので、12以上であれば何pxでも、自分が気に入ったサイズのものを使えばいいと思います。

文字サイズやフォントによって、世界観とかって変わってきますからね。

【コピペok】TCD全テーマで使える文字サイズ変更CSS

ダッシュボード > 外観 > カスタマイズ > 追加CSS

に上記をコピペしてください。

1~4行目までがブログの文字サイズです。

6~18行目までが目次の文字サイズです。

ブログの文字サイズを変更したら目次のサイズも変更しないと違和感がありますので、併せてご利用ください。

フォントサイズが変わるのはブログだけ

僕は個人的に、ブログだけ文字サイズを変えています。

理由はランディングページもセールスも全てブログ記事で行っているからです。基本的に僕が運用するサイトやブログは大半が検索流入が90%以上になるので、TOPの文字サイズが14pxでも気にしないかな、と。

むしろ個人的にですが、TOPはそれくらいの方が綺麗に見えるのかなという気がしています。

本当に個人的な意見ですが。

ブロガーも教養としてプログラミングを

ほとんどコードをいじる必要がないテーマが販売されていたり、無料でも使える時代ですからブロガーにはプログラミングは不要です。

確かに不要だとは思うんですが、このようなマイナーチェンジをするだけでもSEOって全然変わってきます。

収益なんか関係ないよっ!

という方ならいいと思いますが、ブログで稼ぎたい方にとってHTML、CSS程度の知識は教養としてぶっちゃあってもいいものだと思います。

表現の幅が間違いなく広がりますから。

方法はいくつかあります。

01・Code Campの無料体験で教わる

僕が大学生の頃に通っていたCode Campです。

マコなり社長でおなじみのTECH::CAMPにも体験に行きましたが、僕はCode Campにしました。理由は渋谷より新宿の方が好きだからです。

Code CampはTECH::CAMPと同じくらいの老舗プログラミング教室で、オンラインの指導もかなり評判がいいのは有名です。

ぶっちゃけ、ブロガー。ガチエンジニアを目指すわけではないなら無料体験に参加するだけでも良いと思います。

02・教材を買って自習する

例えばこういった本で学習するのもありかと思います。

技術書に関してはKindleより紙の方が良いです。図とかも出てくるので、紙の方が正直見やすいです。

03・無料のオンライン動画

HTML、CSSは確か無料かと思います。

bootstrapというのを身に着けるとかなり便利です。

まとめ

以上、NoeLのブログの文字サイズを変更する方法でした。

ご参考にしてみてください。それでは、また。

【事例紹介】TCDのGENSENユーザーの僕がカスタマイズを語る

【開発者の口コミ】TCD「NOEL」の事例と実際に使ってみた感想

【事例紹介】TCDの「OOPS!」を実際に使っていた僕の口コミ

【全テーマ共通】TCDの見出しカスタマイズCSS【コピペでok】

140種を使い回し可能【格安ワードプレステーマGrand Theme】