こんにちは( ´͈ ᗨ `͈ )ノ♥ブログのカスタマイズにはまっているくるみ@tabijyoshi_comです!
このブログはwordpressで作成していて、テーマは「Simplicity」を使わせていいただいています。初心者でもとーっても使いやすいテーマなのですが、多くの方が使っているため、どこかで見たことがあるような無いような…そこで、初心者なりにカスタマイズを頑張ってみました✧*。٩(ˊωˋ*)و✧*。
なお、子テーマをインストールして、子テーマのスタイルシート(style.css)or mobile.cssに書き込んでいます!
Contents
1.ロゴの作成
こちらのサイトのアイコンを使って、サイトのロゴを作りました!可愛いでしょ♥*:.。.٩(๑′∀ ‵๑)۶.。.:*♥作ったロゴは、カスタマイズ→ヘッダー画像からアップロード。
2.可愛いフォントに変更
本文記事中のフォントをあずきフォント、サイドバー・関連記事・コメントの見出しをGoogleフォントのSailに替えました!
2. 変換したファイルをサーバーの「Simplicity」の子テーマの中にアップロード。
3. 外観・テーマの編集からスタイルシート(style.css)の@import url(“../simplicity/style.css”);の下に以下のコードを挿入。
font-family: ‘フォントタイトル‘;
src: url(‘保存したファイルのURL‘) format(‘woff’);
4. 以下のコードをスタイルシートの一番下に挿入すると、記事本文のフォントがお好みのフォントに♥
だいぶサイトの印象が変わってきました♥*:.。.٩(๑′∀ ‵๑)۶.。.:*♥
↓の記事でルカさんがとっても分かり易くまとめてくださっています!
スポンサーリンク
3.可愛い背景画面に変更
背景画面をこちらのサイトでダウンロードして、カスタマイズ→背景画像からアップロード!
見出しをおしゃれに
H2の見出しを↑に、H3の見出しの下線を消しました!おしゃれでしょ♥*:.。.٩(๑′∀ ‵๑)۶.。.:*♥
H2の見出しの変更は、以下のコードをスタイルシートの一番下に挿入。colorの部分の’#——-‘を変えると、□の色が変わります☆
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の見出しの下の線を消すには、以下のコードも挿入。フォントの大きさも変えました!
border-bottom:none!important;
font-size:20px}
4.サイドバー見出しの装飾
サイドバーの見出しを→のように変えました!colorで文字の色、backroundで背景の色、 font-familyでフォントが変わります☆
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{‘の部分で×マークの色の変更をしています。
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.記事を読むボタンの装飾
記事を読むボタンを↑に装飾しました!以下のコードをスタイルシートに挿入。
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}
7.記事とサイドバーの間の線を削除
記事とサイドバーの間の線を消しました!
border:none!important}
8.日付部分の背景色の変更
日付部分の背景色も薄ピンクにしました!
background-color:#fef4f4}
スポンサーリンク
お世話になったブログ記事
こちらのブログ記事にお世話になりました!ありがとうございました。+.。゚:;。+゚( 。・▽・。)+。::゚。:.゚。+。
まとめ
ふっー、大変でしたヾ(´ε`;)ゝ…でも、楽しかったー♥ほとんど自己満足ですが、ブログに対する愛が深まるので是非チャレンジしてみて下さい☆
ご精読ありがとうございました( *´꒳`*)੭⁾⁾
Comments
[…] 超初心者でもコピペでできちゃった8つの「Simplicity」のカスタマイズ […]