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

この記事は約4分で読めます。

[metaslider id=”4553″]

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

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

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

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

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

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

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

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

(1)Simplicity2の子テーマのインストール

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

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

Simplicity2の子テーマ
テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

(2)CSSコードをコピペする場所

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

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

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

body {
 font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif !important;
}

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

ぜひお試しください!

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

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

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

.article h2 {
	position: relative;
	padding: .5em .75em;
	background-color: #ffcccc;
	color: #fff;
	border-radius: 6px;
	border-left:none;
}
.article h2::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #ffcccc;
}

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

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

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

#sidebar h3 {
  font-size:20px;
 border-bottom:15px solid #ffcccc;
  padding:10px 0;
}

#main .entry {
    border-bottom: 1px dotted #333333;
    padding-bottom: 15px;
}

 

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

 border-bottom:15px solid #ffcccc;

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

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

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

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

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

HTMLカラーコード
HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

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

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

CSSコードはこちらです。

.entry-read {
  text-align: right;
  margin-right: 10px;
}

簡単ですね!

6. まとめ

ブログのデザインがより自分らしくなると、記事を書くことも楽しくなり、ファンもつきやすくなります♪

カスタマイズ第二弾の記事もアップしました。ぜひあわせてご参考ください♪

タイトルとURLをコピーしました