ブログをはじめて5ヶ月。
ずっとシンプルなブログでしたが、もっと自分のブログを「可愛く」「自分らしく」デザインしたいなーと思い始めて、ついにカスタマイズに挑戦しました。
これが思ったよりも簡単!しかもブログが自由自在に変えられて楽しい!
まったくHTMLやコードなど書けなくてもCSSコードをコピペだけすればいいので、今回は私がSimplicity2版のCCSを使ってカスタマイズした方法を紹介します。
今回カスタマイズしたこと
- 文字(フォント)を変更
- 見出しタグを変更(h2のみ)
- サイドバーの見出しの装飾
- 記事と記事の間に線を引く
目次
1. カスタマイズする前に・・・
私が使っているテーマはSimplicity2になります。
(1)Simplicity2の子テーマのインストール
カスタマイズする際は必ず子テーマをインストールしてください。子テーマでカスタマイズします。
子テーマのインストールはこちらから。
(2)CSSコードをコピペする場所
ここで紹介するCSSコードをコピー&ペーストしてくださいね♪
2. 文字(フォント)変更(游ゴシック体)
「游ゴシック体」へ変更方法です。下記のコードを「CSS編集」の部分にコピペしてください。
1 2 3 |
body { font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif !important; } |
フォントを変えるだけで、ブログの雰囲気が柔らかくなります。
ぜひお試しください!
3. 見出しタグを変更(h2のみ。吹き出しタイプ)
出来上がりはこんな感じになります。吹き出し&ピンクが可愛いです。
こちらのCSSコードをコピペするだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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コードはこちらになります。
1 2 3 4 5 6 7 8 9 10 |
#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行目に注目!
1 |
border-bottom:15px solid #ffcccc; |
(1)サイドバーの見出しの「線(ライン)の太さ」を変更する場合
「border-bottom: ◯px」の数値を変更します。数値が小さいほど細くなります。
(2)サイドバーの見出しの「色」を変更する場合
「solid #ffcccc;」の#以降の6桁の文字を変更します。例えば、ラインを黒にしたい場合は「#000000」と入力します。
色のコードはこちらをご参照ください。
5.「記事を読む」ボタンの位置を右寄せ
出来上がりはこんな感じです。「記事を読む」が右寄せになり、見やすくなりました。
CSSコードはこちらです。
1 2 3 4 |
.entry-read { text-align: right; margin-right: 10px; } |
簡単ですね!
6. まとめ
ブログのデザインがより自分らしくなると、記事を書くことも楽しくなり、ファンもつきやすくなります♪
カスタマイズ第二弾の記事もアップしました。ぜひあわせてご参考ください♪