ブログ開設日にやったSimplicityカスタマイズのまとめ

よければシェアお願いします(。・・。)

こんばんは。べるだ(@verdad0619)です。
昨日開設したばかりのこのブログ。

Simplicityのカスタマイズが楽しすぎて、1日でいろいろ変えてしまいました。せっかくシンプルだった部分がなくなってしまっているのが難点ですが・・・(笑)

※2016年10月30日追記
ブログ初日から1週間経ってさらにブログをカスタマイズしました。見た目がかなり変わっているので、下記の記事も合わせて読んでもらえると助かります。
カスタマイズ素人のわたしでも1週間で出来た!「Simplicity」カスタマイズ5つ【追記あり】
早いものでブログを書き始めてから1週間以上が経ちました。記事を書きながら、時間を見て「Simplicity」をカスタマイズ。すぐカスタマ...
スポンサーリンク

Simplicityカスタマイズ前と後のサイト比較

カスタマイズ前とカスタマイズ後を画像で比べてみます。

【カスタマイズ前】
first

【カスタマイズ後】
ブログTOP

上の画像はパソコンから見たサイトの状態です。スマホから見てる方は見え方が違いますよね。背景の木目などはちょこっとしか印象がないと思います(笑)

最初は背景も白のままで、Simplicity本来のシンプルな部分を活かしたカスタマイズをしようと心がけていました。でも、サイトタイトルの「Mattari(まったり)」に合うような柔らかい雰囲気にしたくて、背景を木目にしたり、Webフォントを導入したりして現在の形に落ち着きました。

ちょっとうろ覚えの部分もありますが、カスタマイズした点をまとめてみます。

1.Webフォントの導入

Webフォントを導入するだけで、サイトの印象が変わるので導入してみました。
サイトタイトルもロゴではなく、Webフォントです。

Google Fontsを使用しています。

Making the web more beautiful, fast, and open through great typography

子テーマのstyle.cssにコードを記入するだけで簡単に導入できました。
フォントサイズを大きくすることで、ロゴっぽく見せてます(笑)

2.グローバルメニューの色や高さの変更

グローバルメニューの色を白にして、若干高さを変更しました。
高さの変更は下記の質問を参考に、変更。Simplicityはやりたいことを検索するとほとんどが解決できて本当に助かっています。

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › グローバルメニューのデザイン このトピックには5件の返信が含まれ、2人の参加者がいます。

3.背景の変更・追加

[外観] – [カスタマイズ] – [背景] で設定できます。

背景画像変更

4.見出しの変更・パンくずリストの変更など

h2(見出し)やパンくずリストなどいろいろな変更を下記のサイトを見ながら、させていただきました。と言うよりそのまま使わせていただきました!ありがとうございます。

SEOに強くて、使いやすいWordpress無料テーマ「Simplicity」のカスタマイズ方法を19のポイントで紹介します。

すごく見やすい・分かりやすいサイトさんです。
いつかこんな風に記事が書けるようになったらいいなと思います♪

5.モバイル(スマホ)表示時のタイトルのフォントサイズ変更

「1.Webフォントの導入」で設定したサイトタイトルですが、スマホ表示だと文字が小さく、ヘッダー下部に余計な余白が出来てしまいました。

そこで、mobile.cssで余白とフォントサイズの設定を行いました。

フォントサイズの変更前と変更後

【変更前】
スマホ変更前

【変更後】
スマホ変更後

フォントサイズ変更前はサイトタイトルが目立たなかったんですが、変更後は目立つようになりました。

今回のカスタマイズのまとめ

他にもカスタマイズした点はあるんですが、記事にうまくまとめられず・・・

記事を書くのがニガテなのもこれからの更新で変えていければと思います。カスタマイズについては初心者なので、分かりにくい点や間違っている点もあると思いますが、ご容赦ください。

「こうしたほうがいいよ!」や「ココ間違ってるよ!」という点があれば教えていただけるとうれしいです。

この記事が気に入ったら
いいね ! してね

Twitter でべるだを