Simplicityで見出しのデザインを変える方法

Simplicityのデザインはそのままだとシンプルで、ちょっと味気ないですよね?

特に記事の見出しはブログのデザインに大きく影響してしまいます。

ブログのレイアウトがずさんだと、それだけ訪問者が逃げてしまうので少し手を加えたいところです。

しかし、見出しのデザイン変更はWordPressが初めての方、ブログが初めての方には少し難しいと思うので今回はSimplicityの見出しのデザインの替え方について紹介していきます。

見出しを変える方法

まずは、「外観」→「テーマの編集」を開きます。

すると、下の画像のようなページが表示されます。

ここにプログラミングコードを書くことで、見出しのデザインを変えることが出来ます。

「うわっ、そんなのムリ!」と思うかもしれませんが、大丈夫です。

カンタンなデザイン変更であれば、特にプログラミングコードを覚える必要はありません。

これから紹介する手順に沿ってコードを貼り付けるだけでOKです!

デザイン・コードはサルワカさんの記事を参考に致しました↓

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

デザインを選ぶ

ここでは、よく見る見出しのデザインをいくつか紹介していきます。

下に書かれているコードを使う事で、デザインを変更させることが出来ます。

下で書かれているコードは見出し2を変更させるものです。

左ライン

●コード

.article h2 {
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    color: #494949;/*文字色*/
    background: transparent;/*背景透明に*/
    border-left: solid 5px #7db4e6;/*左線*/
}

左ラインと背景色

●コード

.article h2 {
    padding: 0.5em;/*文字周りの余白*/
    color: #494949;/*文字色*/
    background: #fffaf4;/*背景色*/
    border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/
}

吹き出し風

●コード

.article h2 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
  border-left: none;
}

.article h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

折り返すリボン

●コード

.article h2 {
   position: relative;
   padding: 0.5em;
   background: #a6d3c8;
   color: white;
   border-left: none;
}

.article h2::before {
   position: absolute;
   content: '';
   top: 100%;
   left: 0;
   border: none;
   border-bottom: solid 15px transparent;
   border-right: solid 20px rgb(149, 158, 155);
}

角丸のシンプルな四角

●コード

.article h2 {
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
    color: #fff;
    background: #ffa500;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 40px -29px 20px;
    margin-left:3px;
    margin-right:3px;
}

デザインのコードを貼る方法

上で選んだデザインの下に書かれているコードを全てコピーしておきます。

先ほど「テーマの編集」で開いたページに戻ります。

上の画像を参考に赤枠の部分にコピーしてきたコードを貼り付けます

↑このような感じです。

コードを貼り付けたらページ下の「ファイルを更新」ボタンをクリックします。

これで見出し2のデザインは変更されました。

デザインの色を変えるには?

上のデザインコードをただ貼り付けるだけでデザイン変更が出来ますが、色を変えたい場合は以下のようにします。

コードの中に下のような行があります。

background: #a6d3c8;

この「#」より右側の6ケタの英数字が見出しデザインの背景の色を表しています。

色には、それぞれ「カラーコード」という番号が割り振られています。

これを好きな色のカラーコードに変えてあげれば、色を変えることが出来ます

カラーコードは以下のサイトで調べることが出来ますので、好きな色を探してみましょう。

見出し2以外の見出しを変えたい場合

見出し2以外でよく使う「見出し3」「見出し4」もデザイン変更したい場合は以下のようにします。

上で紹介したコードの中に下の記述があります。

.article h2 {

見出し3の場合は下のように変更します。

.article h3 {

見出し4の場合は下のようにします。

.article h4 {

修正したら、後は同じようにコピーし貼り付けます。

まとめ

以上がSimplicityの見出しのレイアウトを変更する方法になります。

見出しデザインの修正は他のテーマでもほとんど同くこのような方法で修正します。

今回使ったこのコードはCSSと呼ばれる、主にWebサイトのデザインを作成するときに使うプログラミング言語です。

ブログをより良いものに突き詰めていくのならば、このCSSという言語の知識は今後必要になってくると思います。

CSSの知識があれば、ブログのデザインを細かく調整することが出来るので興味があれば勉強してみてください。

★初心者におすすめなASP(アフィリエイト・サービス・プロバイダ)★



A8.net登録審査なしで始めることが出来るASPサービスです。

広告数も多く、大多数のアフィリエイターが利用しています。

アフィリエイトを始めるなら、まず登録しておきましょう。

⇒登録方法はこちらの記事で紹介していますので参考にしてみてください
 
 

スポンサーリンク
スポンサードリンク
スポンサードリンク
応援ぽちっとよろしくお願いします
↓応援ぽちっとよろしくお願いします

シェアする

フォローする