雑記 shigu

Simplicityのh2,3,4タグ・見出しをおしゃれにカスタマイズする方法

yossya

私自身、Simplicityはゲーム特化ブログで使わせてもらってます。

h2〜h4タグはよく使うので、おしゃれにすることにしました。

とはいってもデフォルトも十分シンプルで使い易いですので、差別化を図りたい人のみでよいでしょう。

スポンサーリンク

 

Simplicity 基本タグ

ちなみにデフォルトはこんな感じ。

2016-03-30 19.06.56

Simplicity タグ変更方法

ダッシュボード ＞ テーマ編集 ＞ Style.CSS

「article h2」をページ内検索 (Ctrl+F)

以下を変更します。

※編集ミスなどに備え、メモ帳などにバックアップすることをお忘れなく。

.article h2 {
  border-left:1px solid #000;
  margin: 40px -29px 20px;
  padding:25px 30px;
  font-size:26px;
}
 
 
ちなみに、私はこんな感じのものを作りました。↓
 
2016-03-30 19.21.16
 
.article h2 {
  color: #ffffff ;
  background:  #404040;
  font-size: 16pt ;
  line-height: 1;
  margin:10px 0px;
  padding: 10px 5px 10px 5px;
    box-shadow:1px 1px 2px 0px #666666 ;
    border-radius: 1px ;
}
 
CSSを自分で作る
 
↑ ここでお手軽に作れますのでオススメです。
 
 

 まとめ

今回はH2タグのみを編集しましたが、h3やh4も同様に変えていくだけですね。
見出しを変えるだけで大きくデザインが変わりますので、味気なさを感じている人は是非やりましょう。
 

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。