bloggerの見出しとリンク、ホバーアクションを変更する方法

新米ブロガー：ブログの見出しとリンクの色、マウスカーソルを合わせた時のアクションを変更するのはどうすればいいのかな？

こんな疑問にお答えします。

ブログデザインを変更する上で、見出しは記事を印象づける重要な要素です。見出しが綺麗だと文章の視覚的リズムが良くなり、圧倒的に読みやすくなるからです。
>>読みやすい文章は【視覚的リズム】が圧倒的に良い

また、bloggerの標準のリンクのデザインは、一昔前のホームページを思わせるような青字に青のアンダーラインで、正直なところ、古臭さがハンパない気がします。

今回はブログに重要な見出しのデザインと、リンクデザインの変更方法について深掘りしていきます。

この記事を書いている私は、Googleが運営するブログサービスのbloggerの日本語テンプレート、【zelo】、【QooQ】の2つを使用していて、この記事では【QooQ】と標準テンプレートの【Emporio】をカスタマイズする方法について解説しています。

この記事を読んでわかること

bloggerカスタマイズの方法

bloggerのカスタマイズ方法については、2通りあります。
上記の方法についてよくわからないという方は、まずはこちらの記事からご覧ください。
>>読みやすい文章は【視覚的リズム】が圧倒的に良い

バックアップについても記載しているので、HTML編集を行う場合はバックアップを取っておくと安心です。bloggerでは、1クリックでバックアップできます。

今回使用するCSS

h2 {
  font-size: 22px;
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

HTMLから見出しデザインを探す方法

見出しに使われるh2のcssをHTML編集画面から検索します。下記のような記載を探しましょう。検索窓から検索すると早いです。
検索窓の出し方は「Command + F」または「Ctrl + F」

【QooQ】の場合

#single-content h2{
  font-size: 115%;
}

【Emporio】の場合

h2 {
  font-size: 22px;
}



見出しは大きく<h1>, <h2>, <h3>, <h4>, と分けられています。
<h1>タグは記事のタイトルに使用されています。

視覚的リズムが良いデザインにする方法

フォントや文字の太さ、行間、スムージング、などを最適化することで脳にかかるストレスを軽減することができます。視覚的リズムをよくする方法についてはこちらの記事をご覧ください。
>>読みやすい文章は【視覚的リズム】が圧倒的に良い

おしゃれなcssコピペ集

h2 { ~ } の{ }内の記述を変更することで、デザインを自由に変更することができます。おしゃれなcssコピペ集はサルワカ さんのサイトが参考になると思います。
>>CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

HTMLからリンクデザインを探す方法

同じく検索窓からa:link を探してください。リンクはaを使って表します。
テンプレートごとに記載方法が異なるので注意が必要です。

例えば、
【QooQ】では、#single-content a
【Emporio】では、a:link で検索するとスムーズです。

【QooQ】の場合

#single-content a{
  color: #337ab7;
    text-decoration: none;
    font-weight: 600;
}

【Emporio】の場合

a:link {
  text-decoration:none;
  color: $(link.color);
}
a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

それぞれの意味を見ていきましょう。

color

文字の色です。

text-decoration

underline 下線を引きます。
none 線をなくします

その他、cssのコピペ集からいろんなデザインに変更することができます。

a:visited

リンクを踏んだ後に色が変わることがありますよね？リンクをクリックした後のアクションを指定できます。

ホバーアクション

マウスカーソルをリンクに合わせた時に表示されるアンダーラインや、リンクの文字が少し薄くなるアクションなどのことをホバーアクションと言います。

リンクの後ろに: hoverをつけることで指定できます。

【QooQ】の場合

ホバーアクションが設定されていないので、下記のコードを追加します。
#single-content a:hover {
    color: #275f8e; }

【Emporio】の場合

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

リンクを新規タブで開く方法

リンクをクリックした時に新規タブで開くように設定しておくと、自分のサイト閲覧時間が伸び、SEO的にサイト評価がよくなるのでおすすめです。

まとめ

今回は見出しとリンクの編集方法について書きました。おしゃれなCSSはたくさんあるので、デザインにこだわりたい方は調べてみてください。

また、文字のフォントや行間、視覚的リズムについてを改善することで文章が読みやすくなります。視覚的リズムについての記事もよければご覧ください。
>>読みやすい文章は【視覚的リズム】が圧倒的に良い