ただいまの人気記事はこれ!おすすめ記事いろいろ

どれもかんたん!Simplicity2カスタマイズまとめ

Simplicity
当サイトでは記事内に広告を掲載しています。

このブログではWordPressテーマ「Simplicity2」のカスタマイズをいろいろと紹介しています。

Simplicity2はデフォルトのままでも美しいデザインですが、少しカスタマイズをするだけでもずいぶんと見栄えが変わります。

今回は、このブログで行っているSimplicity2のカスタマイズをまとめてみました。

どれもコピペでできますよ。よかったら参考にしてみてくださいね。

カスタマイズのやり方

カスタマイズはCSSを使って行います。コピペするだけでできますよ!

コードを貼る場所

コードは、Simplicity2の子テーマの「style.css」に貼りつけます。

「style.css」は、WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」にすすむとあります。

Simplicity2の子テーマにCSSを追加

コードは特に指定がなければ、後ろに追加していけばOKです。

Simplicityをつかいはじめた方におすすめ

かんたんにできて、自分なりのカラーを出せます。

フォントカラー(文字の色)を変える

現在のWEBデザインでは、フォントカラーに黒を使う場合、真っ黒ではなく少しグレー寄りにすることが主流になっています。

特に背景を白にする場合は、この点に注意してみましょう。そのほか、好きなフォントカラーに変える方法も紹介しています。

【Simplicity2】記事や見出しのフォントカラーを変える方法
このブログでは、フォントカラーを黒に近いグレーにしています。 背景が白なので、フォントが真っ黒だとコントラストがきつくなってしまうんですね。 文字と背景のコントラストが強すぎると、 目...

見出しのカスタマイズ

Simplicity2は記事の見出しを変えるだけでも、全体の雰囲気がガラっと変わります。

また、見出しのカスタマイズはブログのカラーを出しやすい部分でもあります。アレンジ方法も紹介していますので、ぜひ自分のカラーの見出しをつくってみてください。

【Simplicity2】コピペでOK!見出しをかんたんカスタマイズ
Simplicity2はデフォルトのままでも美しいデザインですが、カスタマイズをするとグッと見栄えが変わります。 このブログでは、見出しを次のようにカスタマイズしています。 h2 h3 ...

記事やサイドバーの枠線を消す

Simplicity2はデフォルトだと、記事やサイドバーのまわりに枠線が表示されます。

枠線をなくすと、全体に開放感が出て広がりのある印象になります。また、枠線は消さずに、好きな色にすることもできます。

【Simplicity2】記事やサイドバーの枠線を消す、色を変えるカスタマイズ
今回は、WordPressテーマ「Simplicity2」の枠線部分のカスタマイズ方法です。 Simplicity2は、デフォルトだと記事のまわりに枠線が入ります。 この枠線を消し...


すこし凝ったカスタマイズ

グローバルナビのカスタマイズ

パソコンで見た時に、タイトル下に出るメニューバーのことを「グローバルナビ」といいます。

Simplicity2のグローバルナビはデフォルトのままでもキレイですが、少し手を加えるとおもしろい効果が出ます。

【Simplicity2】ほぼコピペでOK!グローバルナビをカスタマイズ
今回は、WordPressテーマ「Simplicity2」のカスタマイズ方法です。 グローバルナビ(メニューバー)を次のようなデザインにしていきます。 上下をラインではさむデザインで、各項目の...

アイコンフォントを使う

現在のWEBデザインでは、アイコンは画像よりも「アイコンフォント(WEBアイコン)」を使うことが増えてきました。

画像を用意しなくても手軽に使えて、色やサイズの変更も簡単にできます。ここでは、アイコンフォント「Font Awesome」の使い方を紹介しています。

SimplicityでFont Awesomeを使ってみよう
Simplicityには、「Font Awesome」がデフォルトで使えるようになっています。 「Font Awesome」とは、手軽に使えるアイコンフォントのことで、たとえば手紙なら「」、電車なら...
新しくなったFont Awesomeで、旧バージョンの4.7.0を使う方法
手軽にWebアイコンフォントを使える「Font Awesome」が新しくなり、バージョン5となりました。 レイアウトだけでなく文字コードも、これまでのバージョン4.7.0と大きく変わり、混乱している...

特定のページから日付表示をなくす

WordPressの記事ページや固定ページでは、タイトル下に日付(投稿日・更新日)が表示されます。

「お問い合わせ」や「プロフィール」など、日付を表示したくないページもあるかと思います。この記事では、特定のページから日付表示を消す方法を紹介しています。

Simplicity2の固定ページで日付(投稿日・更新日)を非表示にする方法
Simplicity2の固定ページの日付表示(投稿日・更新日)を消してみました。 消したのはこの部分です。 というわけで、その方法を書いてみます。 Simplicity2の後継テーマ「C...

デザインを調整するカスタマイズ

スマホでみた時の「ヘッダー下の空白」を消す

Simplicity2はスマホで表示すると、ヘッダー下に広めの空白が入ることがあります。

感覚的なものもありますが、この空白が気になる方もいるかと思います。この記事では、ヘッダー下の空白の消し方や調整方法を紹介しています。

【Simplicity2】スマホでみた時の「ヘッダー下の空白」を消す方法
Simplicity2で作ったサイトをスマホやタブレットでみると、ヘッダー画像の下に広めの空白ができていることがあります。 上の画像では、ヘッダー画像とパンくずリストの間に、広い空白ができていま...

スポンサーリンク(ラベル)と広告の間に空白ができる場合

WordPressは随時バージョンアップが行われています。バージョンによっては、意図しないところに空白が入ることがあります。

ここではスポンサーリンクの文字と広告の間に広い空白ができてしまった場合の対処法を紹介しています。

【Simplicity2】スポンサーリンクと広告の間に空白ができた時の対処法
Simplicity2を使っていた時、アドセンスの広告表示がおかしいことに気づきました。 スポンサーリンク(ラベル)と広告の間に謎の空白が入っているのです。 前は入っていなかったの...

【Simplicity2】記事下の「日付とカテゴリ」を小さくする方法

Simplicity2は記事のタイトル下に、日付やカテゴリが表示されます。この部分の大きさを変えると、全体の見栄えがすっきりとします。

この記事では表示サイズの変更方法を紹介しています。

【Simplicity2】記事下の「日付とカテゴリ」を小さくする方法
Simplicityでは、記事タイトルの下に「日付」と「カテゴリ」が表示されます。 今回は、デフォルトよりも表示を小さくして、すっきり見やすくしてみましょう。 具体的には、次のようなカスタマイズを...

WordPress全般で使えるカスタマイズ

Simplicity2だけでなく、WordPress全般で使えるカスタマイズです。

目次をおしゃれなデザインにする

WordPressには「Table of conents Plus」という目次を表示するプラグインがあります。

デフォルトのデザインもキレイですが、CSSでデザインを変えることもできます。この記事ではおしゃれなデザインにするカスタマイズを紹介しています。

「Table of Contents Plus」をカスタマイズ!目次をおしゃれにしてみよう
WordPressには「Table of Contents Plus」という目次を表示するプラグインがあります。 かんたんに目次を入れることができる反面、ややシンプルすぎるデザインに物足りなさを感じ...

ほしいものリストをのせる

プロフィールページに、Amazonのほしいものリストをのせたい方もいるかと思います。

自分の好みが発信でき、時には思いがけない贈り物も・・・なんてこともあるかもしれませんね。

Amazonのほしい物リストを匿名で作って公開する方法
Amazonのほしい物リストを匿名で作って公開する方法を紹介します。 手順をざっくりいうと、 アカウント名をニックネーム(匿名)にする ほしい物リストを作成する ほしい物リストに、ほ...

まとめ

今回は、Simplicity2のカスタマイズを紹介しました。色やサイズを変えるだけでも、ずいぶんと雰囲気が変わります。

いろいろためして、ぜひ自分らしいブログをつくってくださいね。

 

Simplicity、こんなカスタマイズもありますよ!
【Simplicity2】コピペでOK!見出しをかんたんカスタマイズ
Simplicity2はデフォルトのままでも美しいデザインですが、カスタマイズをするとグッと見栄えが変わります。 このブログでは、見出しを次のようにカスタマイズしています。 h2 h3 ...
【Simplicity2】ほぼコピペでOK!グローバルナビをカスタマイズ
今回は、WordPressテーマ「Simplicity2」のカスタマイズ方法です。 グローバルナビ(メニューバー)を次のようなデザインにしていきます。 上下をラインではさむデザインで、各項目の...
タイトルとURLをコピーしました