MANO-LOG

時間とお金、大事なのはどっち?【時間が何よりも大切】
フリーターが年金を払うのは無理ゲーな話【免除制度or納付猶予制度を推奨】
フリーターの平均年収と実態を解説【貧乏は覚悟】
めんどくさい仕事に直面した時の対処法【松岡修造式で乗り切る】
一人暮らしは何歳から始めるのが最適か?【答え:就職してから数年後】
サラリーマンに向いてない人の4つの特徴【当てはまるなら起業orフリーランスに】
サラリーマンは辛いと感じているのは甘え【サラリーマンは楽チンです:理由も解説】

【コピペで楽勝!】はてなブログで最低限カスタマイズするべき3つのことと、おすすめのカスタマイズ3選

f:id:manochang:20190619225924j:plain
こちらの記事はこのような方達向けです。

はてなブロガーの方
ブログデザインをカスタマイズをしていない方
カスマイズ方法を知りたい方

はてなブログをご利用の方、お疲れ様です。

ブログデザインはカスタマイズしてますか?

 

先日、このようなツイートをしました。

 

ブログでWordPressを利用している方は、そもそも自由度が高いことから初心者の方でもある程度のカスタマイズをしている方が多いですね。

それとは逆に、はてなブログを利用の方はテーマを選べばある程度のデザインが出来上がるため、そこでストップしている方が多いように感じます。

 

僕は人のブログを読むときに、ブログデザインがデフォルトのままだと読みにくかったり、読む意欲が失せてしまうこともしばしば。

 

ブログをやるからには、誰かに記事を読んでもらうためにやるわけなので、読み手のことを考えなければいけません。

 

僕の主観では、最低限この3つはカスタマイズするべきだと思っています。

フィントサイズ
記事タイトル・見出しデザイン
目次デザイン(テーマによる)

カスタマイズが面倒だと思っていたり、難しいと思っている方がいるかもしれませんが、基本的にGoogleで調べてコピペすればOKです。

僕が使っているコピペ参照サイトとともに、それぞれ解説していきます。

この記事の手順に従ってもらえば、最低限のブログカスタマイズは可能です。

 

はてなブログで最低限カスタマイズするべき3つのことと、おすすめのカスタマイズ3選」についてまとめます。

   

スマホはPCと同じデザインを推奨

f:id:manochang:20190619225140j:plain

まず、スマホとPCはデザインを分けていますか?

PCでのカスタマイズとスマホでのカスタマイズは初期設定だと別々に作業しなければいけません。

 

しかし、レスポンシブデザインのテーマであれば、PCデザインをいじるだけでスマホにも反映されますのでおすすめです。

以下の設定をしましょう。(はてなブログ

<管理画面より>
デザイン
詳細設定
レスポンシブデザインにチェック
以上でOKです。
これでPCデザインとスマホデザインは一緒になります。

 

PCで見るときっちりデザインされていても、スマホで見るとデフォルトのままの人がわりと多いように思います。

ブログをスマホで見る人が多いので、スマホのデザインは重要です

フォントサイズ

f:id:manochang:20190619225153j:plain

基本的に、はてなブログの文字サイズは小さいです。

テーマにもよりますが、14px15pxがなぜか多いです。

 

Googleは16px以上を推奨しており、SEOにも影響が出てきます。

詳しくはこちらの記事にまとめてあります。↓

上記の記事を見てもらってもOKですが、簡単に説明しておきます。

方法は以下の手順になります。(はてなブログ

<管理画面より>
デザイン
カスタマイズ
{}デザインCCS
「.entry-content p {font-size: 16px;}」 をコピペ

以上でOKです。

 

これでブログフォントサイズは16pxになります。 

もし、16pxでは小さいという方がいたらコード内の数字を変えればOKです。

16pxか17pxが良いと思います。

 

ちなみにこのブログは現在「16px」となっています。

参考にしてください。

記事タイトル・見出しデザイン

f:id:manochang:20190619225406j:plain

次に「記事タイトル」「見出しデザイン」です。

意外とここのカスタマイズをしていない人が多く、見出しが単なる大文字のようになっている人を見かけます。

 

方法は非常に簡単です。(はてなブログ

<管理画面より>
デザイン
カスタマイズ
{}デザインCCS
「好きなデザインのCCSコード」をコピペ

「好きなデザインのCCSコード」には、Googleで調べるとCCSをまとめてくれている人がいるのでそれをコピペでOKです。

 

例えば、以下のサイトなど非常に便利です。

上記のサイトから好きなデザインを選んでCCSをコピペしましょう。

この方法ではコピペで完了するので、専門知識がなくても簡単にできます

 

上記のサイトでのコードは、「h1」や「h3」となっていますが、それぞれカスタマイズしたいところを下記のように変えていきます。

  • 記事タイトル → h1
  • 大見出し → h3
  • 中見出し → h4
  • 小見出し h5 

WordPressの方は「h2」が大見出しですね。 

はてなブログでは「h2」は、スマホデザイン時のブログタイトル説明欄になります。

目次デザイン(テーマによる) 

f:id:manochang:20190619225310j:plain

3つ目に、目次デザインです。

PCデザインではテーマである程度カスタマイズされていますが、スマホデザインは皆無である場合が多いです。

 

前述したスマホをPCと同じレスポンシブデザインにしてあれば問題ありませんが、スマホとデザインを分けたい方や、テーマの目次が気に入らない人向けに参照サイトを紹介します。

 

下記のサイトがおすすめです。

こちらもCCSをコピペするだけでOKです。

 

現在の目次を気に入っている方は問題ありません。

ちなみに、このブログの目次もデフォルトです。

   

その他のカスタマイズ

上記の3つ以外に、もっとデザインカスタマイズしたい方のためにいくつか例を挙げていきます。

フォント

f:id:manochang:20190619225323j:plain

フォントを変更することが可能です。

 

「フォントなんてどうでもいいじゃん?」

と思うかもしれませんが、フォントを変更してみるとすごく読みやすくなります

 

こちらのサイトはメイリオになっています。

読みやすくて気に入っています。

 

方法はフォントサイズ変更や見出しデザイン変更と同じく「{}デザインCCS」にコードを入力します。

下記のコードをコピペして下さい。

/*フォントの設定 */

body {

font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "MS ゴシック", sans-serif;

}

こちらのコードを入力するとフォントがメイリオに変更され、もし無理な場合は「游ゴシック」になる、といった感じです。

 

もし、他のフォントを使用したい場合には「font-family:」の後の部分に希望のフォントを入力して下さい。 

囲み線

f:id:manochang:20190619225944j:plain

ブログの説明に囲み線を入れ、内容をまとめるとグッと読みやすくなります。

こんな感じのやつです。

 

こちらの方法は以下になります。(はてなブログ

<管理画面より>
デザイン
カスタマイズ
{}デザインCCS
「好きなデザインのCCSコード」をコピペ
 
<ブログ編集画面>
HTML編集
挿入箇所に「好きなデザインのHTMLコード」をコピペ

 

こちらもあらかじめデザインしてあるコードを紹介してくれているサイトがありますので紹介します。

以下の2つがおすすめです。

非常に簡単なので、お気に入りの囲み線を見つけてブログを読みやすくしましょう

蛍光ペン式アンダーライン

f:id:manochang:20190619230046j:plain

はてなブログでアンダーラインを使っている人いますか?

はてなブログのデフォルトのアンダーラインでは、全く強調になりませんね。

 

おすすめは、斜線ボタン一発で蛍光ペン式アンダーラインを挿入する方法です。

 

こんな感じのやつです。

 

この方法は下記の記事にまとめてあります。

具体的なやり方は下記になります。(はてなブログ

<管理画面より>
設定
詳細設定
検索エンジン最適化「headに要素を追加」
コードをコピペ
コピペするコードは  下記になります。
<style type="text/css">
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, #ffd700 60%) !important;
}
article i{
font-style:oblique !important;
}
</style>

これで完了です。

是非ご利用下さい。

   

まとめ:ブログデザインは大事です

f:id:manochang:20190619230028j:plain

はてなブログで最低限カスタマイズするべき3つのことと、おすすめのカスタマイズ3選」についてまとめました。

 

ブログデザインは記事を読んでもらうために非常に重要です。

せっかく頑張って書いた記事を読んでもらうためにも、いち早く読み手に優しいカスタマイズをしていきましょう 

POINT!
  • ブログデザインは超重要!
  • スマホはPCと同じデザインがおすすめ!
  • カスタマイズは超簡単、コピペでOK!
  • 「フォントサイズ」「記事タイトル・見出しデザイン」「目次」は最低限必要!
  • 「フォント変更」「囲み線」「蛍光ペン式アンダーライン」でさらに読みやすさUP!

はてなブロガーの方も、WordPressに負けないようなデザインを目指しましょう!