7分でカスタマイズ。自分に合った見出しの選び方

シェアする

  • このエントリーをはてなブックマークに追加
  • 0
スポンサーリンク

そうだ、見出しを変えてみよう

テーマを『Simplicity』に変えてデザインや機能面で満足していた私が記事を読んでいて気になったことがある。それは見出しのデザインがシンプルすぎる。記事を読んでいて見出しがあるのとないのでは見やすさが違うし、デザインが良いとそのサイトを見てみようと思ってしまう。

見出しについて設定しみよう。

見出しにはどんなものがあるのだろうか?

調べてみると意外と奥が深い。デザイン重視からSEO対策も考えての見出しも。今回はシンプルすぎる見出しを変えたいので入門編と位置づけて簡単にできるものを実践してみようと思う。

装飾だけを変更する方法

基本的にCSSを設定するだけなので比較的簡単にできそう。セレクタやプロパティはやりながら調整すれば良さそう。

画像を使った見出しに変更する方法

難しいのか?と思ったけど、パスを指定するだけなのでハードルはそこまで高くない。
変更するだけならどちらも難しくはなさそうなのでh2タグには装飾だけのもの。h3タグには画像を使用した変更を加えてみようと思う。

さあ、やってみよう

h2タグの装飾を変えてみる

メニュー > 外観 > テーマの編集

でCSSを編集していく。
変更を加えるファイルはstyle.css

上の記述に設定を追加していく。

h3タグに画像を追加してみる

h2タグと同じように変更を加えるファイルはstyle.css

上の記述に設定を追加していく。

失敗したこと

画像のサイズを考えずに設定していた

□修正前

□修正後

画像の高さがデフォルトだと見切れてしまったのでheight、line-heightのプロパティを追加した。

やってみて気付いたこと

CSSだけで表現が色々できる

デザインをカスタマイズするのにCSSが分かるようになれば誰でもできる、よく書籍やネットで見かけたけど確かに変更したい箇所と方法さえ知ってれば簡単に設定していける。

参考にしたこと

見出しデザイン.comで画像とテキストの配置について色々勉強させてもらった。このサイトではカテゴリが印象的だった。デザインというと私にとって感覚的な部分も多く、言葉にするとこう表現されるのかと新しい発見があった。

まとめ

今回は装飾を変えてみる、画像を背景に使った見出しを設定してみるということで実践してみた。まだまだ奥が深くて面白い楽しいと感じた瞬間である。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする