Simplicity 図解 サイドバー デザイン カスタマイズ

sidebar-design

 WordPressのテーマ「Simplicity」のサイドバーのタイトルや背景を自分好みにカスタマイズしてみましょう♪

CSSで簡単にできますが、テーマのアップデートにそなえ本家サイト より
「子テーマ(無印)」をダウンロードして WordPressへインストールしてからご利用下さい。

スポンサーリンク

サイドバーの背景色を変更

外観カスタマイズを開きます。

レイアウト(全体・リスト)の設定で↓のように チェックして保存

Simplicityサイドバーカスタマイズ

ブログを開きサイドバー上で右クリック要素をクリック

Simplicityサイドバーカスタマイズ

デベロッパーツールが開きます。

Simplicityサイドバーカスタマイズ

左側のElementsタブで<div id="sidebar">を選択すると
右側のStylesタブに現在サイドバーに適用されてるスタイルが表示されます。

これのbackground-color: #fffが先ほど指定した背景:白です。
この設定を元に新しい色へ変更してみます。

background-color□#fff部分のをクリック(画像:左)
するとカラーチャート画面が現れるので好きな色上をクリック(画像:右)

Simplicityサイドバーカスタマイズ

または、カラーネームでも設定することができます。
#fff部分をクリックしてアルファベット文字を1文字入力すれば候補が現れます。

Simplicityサイドバーカスタマイズ

色が決まればドラッグして選択⇒コピーします。

Simplicityサイドバーカスタマイズ

コピーした中の変更したbackground-color以外を消して!importantを付け
外観テーマの編集から
Simplicity child: スタイルシート (style.css)へペースト。

広告最短4分で広告を掲載できる『忍者AdMax』

サイドバーのウィジェットタイトルを装飾

簡単に作れるジェネレーターで生成したコードで解説します。

CSS見出し-ジェネレーター | WEB道

まずは↑のサイトから好みの見出しをジェネレートします。

好みの色へも簡単に変更できますが、
開いたページの見出しをそのままジェネレートしてみます。

WEB道

生成されたCSSとHTMLのCSSコードだけを使用します。

WEB道

↑の.sample2と書かれたclass名#sidebar h4
Simplicityのサイドバー用に書き換えます。

この要領で紹介したWEB道でジェネレートしたコードを
Simplicity child: スタイルシート (style.css)へペースト。

↑のリボンで見出しを作った場合は、リボン部分が内側に入ってしまいます。
(↓の画像下)
気になる場合は、外観カスタマイズより最初に設定した
サイドバーの背景を白の を外せばピッタリになります。(↓の画像上)
(スマホでは変わりません。)

Simplicityサイドバーカスタマイズ

サイドバーにシャドウを付ける。

サイドバーへシャドウを付けるなら、メインの記事側へも一緒に付ければ雰囲気が出るのでお薦めです。

Simplicityサイドバーカスタマイズ

サイドバー用は上記で背景を書いた中へ追記します。

1~3行目までが記事側のシャドウ
6行目はサイドバー背景へ追記として書きます。

以上!お疲れ様でした。

その他のSimplicity関連のカスタマイズは↓のSimplicityタグをクリックしてみて下さい。

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る