超初心者でもコピペでできちゃった8つの「Simplicity」のカスタマイズ

　こんにちは( ´͈ ᗨ `͈ )ﾉ♥ブログのカスタマイズにはまっているくるみ@tabijyoshi_comです!

　このブログはwordpressで作成していて、テーマは「Simplicity」を使わせていいただいています。初心者でもとーっても使いやすいテーマなのですが、多くの方が使っているため、どこかで見たことがあるような無いような…そこで、初心者なりにカスタマイズを頑張ってみました✧*｡٩(ˊωˋ*)و✧*｡

　なお、子テーマをインストールして、子テーマのスタイルシート(style.css)or mobile.cssに書き込んでいます！

Contents

1 1.ロゴの作成
2 2.可愛いフォントに変更
3 3.可愛い背景画面に変更
4 見出しをおしゃれに
5 4.サイドバー見出しの装飾
6 5.モバイルメニューの色を変更
7 6.記事を読むボタンの装飾
8 7.記事とサイドバーの間の線を削除
9 8.日付部分の背景色の変更
10 お世話になったブログ記事
11 まとめ

1.ロゴの作成

　こちらのサイトのアイコンを使って、サイトのロゴを作りました！可愛いでしょ♥*:.。.٩(๑′∀ ‵๑)۶.。.:*♥作ったロゴは、カスタマイズ→ヘッダー画像からアップロード。

2.可愛いフォントに変更

　本文記事中のフォントをあずきフォント、サイドバー・関連記事・コメントの見出しをGoogleフォントのSailに替えました！

1. フォントをダウンロードして、woffコンバーターというソフトで.woffファイルに変換。

2. 変換したファイルをサーバーの「Simplicity」の子テーマの中にアップロード。

3. 外観・テーマの編集からスタイルシート(style.css)の@import url(“../simplicity/style.css”);の下に以下のコードを挿入。

@font-face {
　font-family: ‘フォントタイトル‘;　
　src: url(‘保存したファイルのURL‘) format(‘woff’);

4. 以下のコードをスタイルシートの一番下に挿入すると、記事本文のフォントがお好みのフォントに♥

body{font-family:’フォントのタイトル‘;}

　だいぶサイトの印象が変わってきました♥*:.。.٩(๑′∀ ‵๑)۶.。.:*♥

　↓の記事でルカさんがとっても分かり易くまとめてくださっています！

3.可愛い背景画面に変更

　背景画面をこちらのサイトでダウンロードして、カスタマイズ→背景画像からアップロード！

見出しをおしゃれに

　H2の見出しを↑に、H3の見出しの下線を消しました！おしゃれでしょ♥*:.。.٩(๑′∀ ‵๑)۶.。.:*♥

　H2の見出しの変更は、以下のコードをスタイルシートの一番下に挿入。colorの部分の’#——-‘を変えると、□の色が変わります☆

.article h2{
　font-size:30px;
　border-left:none!important}
.article h2:after,.article h2:before{
　content:”□”;
　font-size:90%;
　position:absolute;
　height:12px;width:12px}
.article h2:before{
　color:#f2a0a1;
　top:-.1em;
　left:-.1em}
.article h2:after{
　color:#eebbcb;t
　op:.2em;
　left:.2em}

　　H3の見出しの下の線を消すには、以下のコードも挿入。フォントの大きさも変えました！

.article h3{
　border-bottom:none!important;
　font-size:20px}

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

　サイドバーの見出しを→のように変えました！colorで文字の色、backroundで背景の色、 font-familyでフォントが変わります☆

#sidebar h4{
　height:40px;
　line-height:40px;
　padding:0 20px;
　border-radius:5px;
　background:#eebbcb;
　color:#fff;
　font-weight:700;
　font-size:22px;
　font-family:Sail,cursive}

5.モバイルメニューの色を変更

　　モバイルメニューをモーダルメニューにして↑のように色を変更しました！‘#animatedModal a{‘の部分で×マークの色の変更をしています。

1.カスタマイズ・レイアウトでモバイルメニューをモーダルに変更。

2.外観→テーマ編集のmobile.cssに以下のコードを挿入。

#animatedModal a{
　color:#eebbcb;
　position:center;
　size:18px}
#animatedModal{
　background-color:#fff !important}
#animatedModal ul li a{
　position:center;
　color:#777;
　font-size:18px}
#animatedModal ul li a:hover{
　color:#fff;
　background-color:#eebbcb}

6.記事を読むボタンの装飾

　記事を読むボタンを↑に装飾しました！以下のコードをスタイルシートに挿入。

.entry-read a{
　color:#fff;f
　ont-size:14px;
　background-color:#eebbcb;
　border:1px solid #eebbcb;
　border-radius:2px;
　padding:3px 10px 3px 5px;t
　ext-decoration:none;
　font-family:Sail,cursive}
　.entry-read a:hover{color:#fff;
　background-color:#fef4f4;
　border:1px solid #fef4f4}