シェアする

【初心者でもできるカスタマイズ】Simplicityのデザインを変更してみよう!

Sponsored Link

ブログをはじめて5ヶ月。

ずっとシンプルなブログでしたが、もっと自分のブログを「可愛く」「自分らしく」デザインしたいなーと思い始めて、ついにカスタマイズに挑戦しました。

これが思ったよりも簡単!しかもブログが自由自在に変えられて楽しい!

まったくHTMLやコードなど書けなくてもCSSコードをコピペだけすればいいので、今回は私がSimplicity2版のCCSを使ってカスタマイズした方法を紹介します。

今回カスタマイズしたこと

  • 文字(フォント)を変更
  • 見出しタグを変更(h2のみ)
  • サイドバーの見出しの装飾
  • 記事と記事の間に線を引く
Sponsored Link

1. カスタマイズする前に・・・

私が使っているテーマはSimplicity2になります。

(1)カスタマイズする際は必ず子テーマをインストールしてください。子テーマでカスタマイズします。

子テーマのインストールはこちらから。

(2)CSSコードをコピペする場所はこちらです。

ここで紹介するCSSコードをコピー&ペーストしてくださいね♪

2. 文字(フォント)変更(游ゴシック体)

「游ゴシック体」へ変更方法です。下記のコードをコピペしてください。

フォントを変えるだけで、ブログの雰囲気が柔らかくなります。

ぜひお試しください!

3. 見出しタグを変更(h2のみ。吹き出しタイプ)

出来上がりはこんな感じになります。吹き出し&ピンクが可愛いです。

こちらのCSSコードをコピペするだけです。

私の場合はh3、h4のデザインはオリジナルのままです。

何の変更もしていません。

h3

h4

4. サイドバーの見出しの装飾

出来上がりはこんな感じです。見出しの下にラインを引きました。メリハリがでて見やすくなります。

CSSコードはこちらになります。

★上記のCCSコードの3行目に注目!

(1)サイドバーの見出しの「線(ライン)の太さ」を変更する場合

「border-bottom: ◯px」の数値を変更します。数値が小さいほど細くなります。

(2)サイドバーの見出しの「色」を変更する場合

「solid #ffcccc;」の#以降の6桁の文字を変更します。例えば、ラインを黒にしたい場合は「#000000」と入力します。

色のコードはこちらをご参照ください。

5.「記事を読む」ボタンの位置を右寄せ

出来上がりはこんな感じです。「記事を読む」が右寄せになり、見やすくなりました。

CSSコードはこちらです。

簡単ですね!

6. まとめ

ブログのデザインがより自分らしくなると、記事を書くことも楽しくなり、ファンもつきやすくなります。ぜひ参考にしてください。

Sponsored Link

ブログランキングに参加中です。
こちらからランキングが見れます♪

ブログランキング・にほんブログ村へ