厳選!コピペでできるwordpressのテーマ「simplicity」のカスタマイズしたい10のポイント。

simplicity-1

こんにちは、gamuです。

今回は、wordpressのテーマ「simplicity」で実際に取り入れたいカスタマイズする方法を書いていきます。

昨日今日とブログのデザインを色々変えてみました。

その中で使えそうなものを書いていきます。

リン

あたし、プログラミングできないですよ~(´;ω;`)ウッ…

gamu

大丈夫!コピペでもできるから!

リン

ちょろいな(笑)

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

ws000001

写真のようにグローバルナビをカスタマイズできます。

マウスがリンクの上に乗った時に、背景色を変えます。

①カスタマイズから色を指定します。

【場所】

ダッシュボード→外観→カスタマイズ→色

ws000003

カスタマイズから以下の様に色を変えます。

【グローバルナビ色】#ffffff

【グローバルナビリンク色】#a4a7ab

【グローバルナビリンクホバー色】#f9caef

グローバルナビを横幅いっぱいにするにチェックを付ける

記事の間に線を引くようにする

ws000004

記事と記事の間に線を引きます。

style.cssを以下のように追加します。

もし、テキストの下にしか線が追加されない場合は

以下のコードをstyle.cssに追加します。

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

ws000005

メインカラムとサイドバーの枠線を消します。

style.cssを以下のように追加します。

記事の続きを変更

ws000006

記事の続きを読むという内容を変更できます。

①カスタマイズから自分の指定したい文字に変更します。

【場所】

ダッシュボード→外観→カスタマイズ→テーマ内テキスト

ws000007

ちなみにこんな文字も設定できるみたいです。(笑)

ws000009

記事の続きをカスタマイズ

ws000006

①”記事の続き”のデザインを変更します。

style.cssを以下のように追加します。

ホバー時にアイキャッチ画像を拡大

%e5%90%8d%e7%a7%b0%e6%9c%aa%e8%a8%ad%e5%ae%9a

ホバーしたときにアイキャッチ画像を拡大させます。

ホバーとは

マウスホバーの略である。

マウスが指定の箇所にカーソルが合うこと。

style.cssを以下のように追加します。

ソースコードの「0.6s」を自分の変えたい数値に変更してください。

グローバルナビにアニメションを追加

ws000003

グローバルナビにホバーさせたら色の付いた下線と文字の色を変化させる。

色は自分好みに設定できます。

このアニメーションはブログのグローバルナビに使用してます。

①スキンを「オレンジメニュー(サブメニューなし)」に変更します。

【場所】

ダッシュボード→外観→カスタマイズ→スキン

ws000002

これでホバーされた時にアニメーションを表示することができます。

②次に色の指定をします。

style.cssを以下のように追加します。

【color: #fc1386】で色の指定をしてますが、

ここは自分の好きな色にしてください。

ヘッダーを画像だけにする

ws000004

ヘッダーの文字を非表示にして、自分が指定した画像に置き換えます。

①ロゴ画像でヘッダーにしたい画像を選択する

②「ロゴを画像にする」のチェックを付ける

【場所】

ダッシュボード→外観→カスタマイズ→ヘッダー

ws000005

これでヘッダーに指定の画像が表示されます。

③画像をセンタリングさせる。

style.cssを以下のように追加します。

【height: 210px;】はヘッダーの高さ領域です。

サイドバーの見出しをカスタマイズ

ws000006

サイドバーの見出しをカスタマイズします。

①デザインを指定します。

style.cssを以下のように追加します。

【background: #F3F3F3;】で好きな色を指定できます。

※左に表示されているアイコンは表示されません。

カエレバのデザインをカスタマイズ(上級者向け)

ws000012

カエレバのデザインも変更できます。

カエレバとは

amazonや楽天の商品リンクをひとまとめにするブログパーツです。

カエレバの設定方法

style.cssを以下のように追加します。

gamu

できそう?

リン

余裕!( *´艸`)!

simplicityはカスタマイズがほんとしやすいです。

多くの方が使用しているテーマなのでcssのソースコードやカスタマイズ方法の情報が多いのが一番魅力的です。

まだまだカスタマイズできるのでいいものがあったら紹介させていただきます!

では!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする