簡単にコピペ!!わたしがSimplicityで行ったCSSカスタマイズ10選をご紹介

リンク広告ユニット(レスポンシブル)




ブログのデザインについても早く記事を書きたいと思っていたのですが、なかなか時間がなく放置してしまっていました。すみません。

稼ぐブログシリーズでWordPressをはじめるまでの記事を何本か書きましたが、今回は私が使っているWordPressのテーマ(デザイン)「Simplicity」で行ったCSSカスタマイズをご紹介します。

簡単にコピペできるようにしていますので、気になる方は使ってみてください。

※2017年8月時点でのカスタマイズなので変更していく可能性がありますのでご了承下さい。
スポンサーリンク

まず初めに

WordPress初期設定の記事でも紹介しましたが、Simplicityのテーマをダウンロードするときにテーマのダウンロードを推奨しました。

今回はこの子テーマに全てCSSを記述しますので、お間違いのないように。
子テーマの必要性は下記のページで確認ください。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

見出し

見出しとはこのことです。


記事を書く上で見出しはとても重要です。
ググれば沢山でてきますのでカッコイイものを選んでくださいね。
私のサイトはテーマカラーを決めているので合わせた見出し色にしています。
この辺りは調整ください。

サイドバーのフォントサイズ

PCページの右横にあるサイドバーのフォントサイズを小さくしました。
フォントサイズは14pxです。

グローバルナビを中央揃え

グローバルナビとはヘッダーの部分にあるナビゲーションです。
これを中央に揃えました。

トップページの記事の間に線を入れる

何気ないですが、サイトのバランスがかなり良くなるのでオススメです。

メインとサイドバーの枠線を消す

デフォルトだとメインとサイドバーに枠線が入っていましたが、これを消しました。

メタ情報の変更

メタ情報とは下の赤枠です。
この大きさを調整して、場所を移動させました。

「記事を読む」の編集

私で言うとトップページの「Read more」の部分です。
これを右に揃えてデザインをカスタマイズしています。
こちらも色などは調整してみて下さい。

文言を変更するのはメニューから
外観→カスタマイズ→テーマ内テキスト→「記事を読む」の変更で変えることができます。

サムネイル画像にエフェクトをかける

サムネイル画像にマウスオーバーすると拡大するエフェクトをかけています。

タグクラウドのデザイン変更

タグクラウドのデザインをシンプルなものに変更しました。

フォントの変更

フォントなのですが、私はWebフォントを使用しているので導入までにちょっとした手順があります。
これもまた時間があるときに書きたいと思いますね!!
なので、割と使っている方が多い、游ゴシックを入れる場合を記載しておきます。

カスタマイズのやりすぎも注意

カスタマイズってハマると楽しいのですが、やりすぎると逆にデザインがごちゃごちゃしてしまうので、個人的にはちょっと注意した方がいいと思います。

全体のバランスを見て少しずつ調整していく方がサイトが綺麗に作れるのではないかと思います。

稼ぐためのブログシリーズ目次

第1弾   稼ぐためのブログ〜ブログ初心者にWordPressをおすすめする理由〜

第2弾 稼ぐためのブログ〜初心者が独自ドメインを所得しWordPressを開始するまで〜 

第3弾 稼ぐためのブログ〜初心者に必要なWordPressの初期設定〜

広告設定編 ブログをはじめて1ヶ月で収入を出した方法〜おすすめ広告・アフィリエイト〜

アドセンス編 【2017年】googleアドセンスの審査にわずか15日で受かった秘訣

デザイン編 簡単にコピペ!!わたしがSimplicityで行ったCSSカスタマイズ10選をご紹介

カエレバ編 ブログ初心者こそカエレバを導入して簡単に収益アップを目指すべき

スポンサーリンク
ブログランキング

++++++++++++++++++++++++++++++++++++

記事がお役に立てたら2つのボタンをポチして頂けると励みになります☆

ブログランキング・にほんブログ村へ 

関連コンテンンツ(レスポンシブル)



Copy Protected by Chetan's WP-Copyprotect.