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

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

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

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

スポンサーリンク

1.ロゴの作成

旅女子.comのロゴ 

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

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.モバイルメニューの色を変更

「simplicity」のモーダルメニューをカスタマイズした「旅女子.com」のモバイルメニュー

  モバイルメニューをモーダルメニューにして↑のように色を変更しました‘#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.記事を読むボタンの装飾

カスタマイズした「旅女子.com」のmoreボタン

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

.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}

7.記事とサイドバーの間の線を削除

 記事とサイドバーの間の線を消しました

#main,#sidebar{
 border:none!important}

8.日付部分の背景色の変更

 日付部分の背景色も薄ピンクにしました

.post-meta{
 background-color:#fef4f4}

スポンサーリンク

お世話になったブログ記事

 こちらのブログ記事にお世話になりました!ありがとうございました。+.。゚:;。+゚( ・▽・)+。::゚。:.゚。+。

まとめ

 ふっー、大変でしたヾ(´ε`;)ゝでも、楽しかったーほとんど自己満足ですが、ブログに対する愛が深まるので是非チャレンジしてみて下さい

 

 ご精読ありがとうございました( *´꒳`*)੭⁾⁾

スポンサーリンク

Comments

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

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る