Simplicity2 コピペで簡単カスタマイズ一覧【まとめ】

Simplicity カスタマイズ
スポンサーリンク
現在このブログは、「Simplicity2」の後継テーマ『Cocoon』(β版)に変更しています。

このブログではWordPress無料テーマ【Simplicity2】を使用していて、あっちこっちカスタマイズしています。

初心者の私でもできる簡単なカスタマイズばかりで、基本的には子テーマのスタイルシート(style.css)にコードをコピペするだけです (^^)

Simplicityの使い方や、カスタマイズ記事も増えてきたので、一覧にまとめてみました~

まだ【Simplicity2】を使っていない方や、これから使ってみようと思われている方はこちらをどうぞ↓

Simplicityのアップデートでウィジェットが消えた?救世主テーマ現る
Simplicityアップデート専用テーマ「Smooth Update 」でウィジェットが移動してしまうのを回避。FTPを使わず管理画面からアップデートしたい派には嬉しい救世主の専用テーマ♪使い方をご紹介します。
スポンサーリンク

テーマに影(box-shadow)で立体感を出すCSS

影をつけたイメージ

Simplicity2のフラットなデザインに、「box-shadow」CSSを使って、いろんな場所に立体感を出すカスタマイズです。

  • グローバルナビメニューの上下のラインに影
  • メイン記事の枠(トップページ・記事本文のまわり)に影や線
  • エントリー記事(トップページに表示される記事一覧リスト)に影や線
  • サイドバー全体に影や線
  • フッターの上部に影

こちらからどうぞ 

【Simplicity2】テーマに影(box-shadow)で立体感をカスタマイズ
シンプリシティのテーマをCSSでカスタマイズ「グローバルナビ、メイン記事、エントリー記事(一覧リスト)、サイドバー全体、フッター」などに、枠線ライン・背景色・影(box-shadow)を付けて装飾。CSSコピペでカンタンにできますよ♪

サムネイル(アイキャッチ)にカテゴリー名を表示する

アイキャッチにカテゴリー表示

トップページの一覧や、カテゴリーの一覧に表示されるサムネイル(アイキャッチ)の上に、カテゴリーを重ねて表示します。

むずかしい設定は一切なし、CSSにコードをコピペするだけでOKです。

こちらからどうぞ 

【Simplicity2】サムネイルにカテゴリー名をCSSにコピペだけで表示する方法
トップページ一覧やカテゴリー一覧のサムネイル画像(アイキャッチ)にカテゴリー名を重ねて表示させる超簡単な方法。CSSにコードをコピペするだけでOK「function.phpやentry-card.phpの設定は不要」です。

グローバルナビ(メニュー)の設置方法

グローバルナビ メニュー

ナビゲーションメニューやメニューバーなどとも呼ばれていますが、ココに何をどうやって表示するのか・・・階層の作り方などを解説しています。

こちらからどうぞ 

ワードプレスにグローバルナビ(メニュー)を設置する
グローバルナビ(メニュー)の追加、2階層、3階層する方法などを図解説明しています。親メニューをクリックしてもアクションを起こさない方法やアイコン挿入まで。

新着記事・人気記事にサムネイルを表示する

人気・新着 サムネイル

記事タイトル横に、サムネイル画像を表示させる設定と、人気記事にランキング表示するためのプラグイン設定方法を解説しています。

こちらからどうぞ 

【Simplicity2】新着記事・人気記事にサムネイルを表示する
Simplicity新着記事・人気記事を設定してサムネイル画像を表示させランキング表示させる方法を詳しく解説しています。

サムネイル画像の角を丸めたり、円形にする方法

サムネイル 角

デフォルト(丸めない)から、「角を丸める」や「円形にする」への変更がアッという間に!

こちらからどうぞ 

【Simplicity2】サムネイル画像の角を丸くしたり、しなかったり
Simplicity2だとサムネイル画像の角を丸くしたり、円形にしたり「5秒」で簡単に変更できちゃう!ブログのイメージチェンジが楽々。

記事下の関連記事をサムネイル(画像)3列や4列にする

関連記事 サムネイル

記事下にある「関連記事」表示スタイルを変更する方法。

こちらからどうぞ 

【Simplicity2】記事下の関連記事をサムネイル(画像)3列や4列にする
Simplicity2だと3分あれば、関連記事の表示スタイルをサムネイル画像、3列や4列へ簡単に変更できちゃいます。

「投稿記事」や「関連記事」の境目に区切り線を入れる

関連記事 区切り線

記事の境目に区切り線を入れ、線種・太さ・色を変更してメリハリを付けます。

こちらからどうぞ 

【Simplicity2】「投稿記事」や「関連記事」の記事と記事の境目に線を引く
投稿記事一覧や関連記事の間に区切り線を入れて境目をハッキリすると見やすくなります。Simplicity子テーマのスタイルシートにコピペで簡単設定。

「新着・人気記事」の境目に区切り線とホバーアクション

新着・人気記事 区切り線

  • サイドバーに表示される『新着記事』や『人気記事』のリストに境界線(区切り線)を入れて、メリハリをつけます。

ホバーアクション css

  • 『新着記事』『人気記事』『カテゴリー』のリストにマウスホバー時(カーソルを乗せた時)、ふんわりと浮き上がって見えるアクションを加えます。

こちらからどうぞ 

【Simplicity2】「新着・人気記事」リストに区切り線とホバー《ふわっと》アクション
サイドバーの『新着・人気記事』リストの間に境界線のようなシンプル区切り線や、マウスホバー時に《ふんわり》と浮き上がるアクションを入れてみました。CSSコピペだけで簡単に表示でき見た目もスッキリ。リスト最後の下線を非表示にすることも可能です。

投稿記事の日付・カテゴリ部分の背景色を変える

日付 背景色

背景色を変更するCSSです。

こちらからどうぞ 

【Simplicity2】投稿記事の日付・カテゴリ部分の背景色を変える
Simplicity2でタイトル下の日付やカテゴリがある部分の背景色を変更してみました。スタイルシートにコピペするだけで簡単ですのでやってみて下さいね

テキストリンクを簡単にブログカードにする方法

テキストリンクを、ちょっとした設定だけでブログカードにする方法。

こちらからどうぞ 

【Simplicity2】リンクを簡単にブログカードでイイ感じにする
Simplicity2だと簡単な設定をして、URLを書くだけで簡単にブログカードが作れます。タイトル・記事・アイキャッチを枠にまとめてスッキリみやすく!

ブログカード 枠をCSSで装飾(線種や背景色を変更する)

シンプルなブログカードを、ちょっとだけ線種や背景色を変更して、目を引くようにするカスタマイズです。

こちらからどうぞ 

【Simplicity2】ブログカード 枠をCSSで装飾 簡単カスタマイズ
ブログカードの線種や背景色をCSSで装飾。コピペだけで簡単カスタマイズする方法。クリック率UPするかも!

カテゴリーの先頭にアイコンを表示する2つの方法

カテゴリーにアイコン

  • 「Font Awesome」のアイコンをCSSで表示する方法
  • メニューを作成して、ウィジェットにカスタムメニューを表示する方法

こちらからどうぞ 

【Simplicity2】カテゴリーの先頭にアイコンを表示する2つの方法
Simplicityでカテゴリーの先頭に「Font Awesome」アイコンを表示させます。CSSコピペとカスタムメニューを使った2つの方法を紹介します。

スマホ表示でイロイロはみ出したり揺れる時の対策

スマホで枠やテーブルがハミ出したり、横揺れを起こすときの対処法です。

こちらからどうぞ 

【Simplicity2】スマホ表示でイロイロはみ出したり揺れる時の対策
表(table)や囲み枠をスマホで確認してみると、テーブルが異常にはみ出していたり、囲み枠がはみ出していたりと、PC上では完璧!と思って公開したのにガッカリする事がありますよね。 おまけにスマホでスクロールすると、画面が右へ左へゆらゆ...

AdSenseや広告を本文内へ簡単に表示させる方法

アドセンス広告などを、記事本文の好きな場所に[ad]と書くだけで、簡単に表示させる便利な方法です。

一度簡単な設定(コピペ)してしまえば、手作業でAdSenseコードをコピペする必要がなくなり、とっても効率的です。

※functions.phpにコードをコピペする必要があります。

こちらからどうぞ 

【プラグイン不要】AdSense広告をWordPress記事内にカンタン配置・挿入
プラグインを使わずアドセンス広告をワードプレス記事本文、任意の場所へ簡単に表示させる方法。コピペするだけで設定完了。挿入したい箇所へ[ad]と入力するだけ!ラベルを中央配置・文字サイズや色の変更も可能。

画像をポップアップ(拡大表示)させるカンタンな方法

画像をクリックすると ↓


このように、別窓や別タブを開かず、ページ内で画像をポップアップ表示させることができます。

こちらからどうぞ 

画像ポップアップがSimplicityで標準機能に!カンタン拡大表示
レスポンシブ対応の画像をポップアップ(拡大表示)するbaguetteBox.jsがデフォルト機能として追加され簡単に使えるように!ページ内で開くので使いやすい。
トップへ戻る