サイドバーのウィジェットの枠線を太くするカスタマイズ

Before

After

MENくん

間違い探しレベルのカスタマイズですね

くま3号

まぁ枠線があるとちょっと雰囲気が変わるよね

今回のカスタマイズは、ぼくのサブサイト「グーテンベルクを使ってみよう」で使用しています。


カスタマイズについては

  1. カスタマイズするための準備
  2. カスタマイズに必要なCSSコード
  3. まとめ

の順に説明していきます。

カスタマイズは自己責任でやろう

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらの記事に目を通してもらえると嬉しいです( ˶ˆ꒳ˆ˵ )

カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズの準備

サイドバーにはワードプレスのウィジェットで好きなものを追加できます

「外観」の設定にある「ウィジェット」をクリックします

ウィジェットの画面を開くと

こんな画面になると思います。

今回はサイドバーの部分にウィジェットを追加していきましょう。

ちなみに、今回の線を追加するカスタマイズは主に

  1. カテゴリー
  2. アーカイブ
  3. タグラウンド

この3つのウィジェットに適用されます。

MENくん

他のウィジェットにも線を追加する場合はコメントしてください

カスタマイザーの設定

サイドバーのタイトル部分の背景は「外観」>「カスタマイズ」から変更できます。

カスタマイザーに移動

ここのカスタマイズってところをクリックすると画面がカスタマイザーに切り替わるよ

「色」の変更をクリック

ウィジェットのタイトル部分の色を変更するために「色」をクリックします

ウィジェットの色を変更

①タイトルの文字色を変更できます。②タイトルエリアの背景色を変更できます。

今回はカスタマイズで枠線を追加するので、②の背景色コードをコピーしておきましょう。

MENくん

背景色のカラーコード(#ffffffみたいな6桁のコード)は後でカスタマイズコードにコピペしますよ

3つのCSSコード追加方法

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

テーマをカスタマイズする際には3つの方法があります。

はじめてカスタマイズする方におすすめなのが追加CSSです。

初心者におすすめのカスタマイズ方法

追加CSSを使ったカスタマイズ方法については、こちらの記事で詳しく解説しています。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

この画像には alt 属性が指定されておらず、ファイル名は kopinosikata.png です

コメントあり

コメントなし

MENくん

#f2f2f2となっている部分にあなたの背景色コードをぶちこんでね!

ちゃんと反映されているか確認

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

確認する際は必ずキャッシュを削除してから見てください。

キャッシュを削除

コントロールキー(Ctrl)」と「F5」をキャッシュを削除したいページで同時に押します。スマホの場合はAndroidとiPhoneでやり方が違います。詳しくはこちらのページで見てください。

カスタマイズはキャッシュ削除をマスターしてからです

カスタマイズをもっとやりたい方

こんなカスタマイズじゃ満足できない!!そんな方に是非見て欲しい記事がこちらです。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~
MENくん

現在は50を超えるカスタマイズが紹介されており、病的なページになります。

カスタマイズのこだわり

では最後にカスタマイズに対する想い気持ち悪いmenくんと、冷めたくまさんが今回のカスタマイズについて語ります。

サイドバーのウィジェット部分をカスタマイズする記事は少ないので、書いてみました。

枠線を追加するだけですが、ちょっとオリジナル感がでますね。うん。

線の上線を削除してる理由

本当に細かいこだわりですね。別にあってもほとんどの人は違和感が無いのではw

上の線ありor上の線なし

違いがわかりやすいようにわざわざ動画にしました。

上線があるとタイトル部分のバランスが若干悪くなるのがわかりますかね?

くま3号

どっちでもええわ

余白の微調整

余白の微調整にも少しこだわりをもっています。

SANGOもともとの余白は上下が8pxで左右が10pxです。それをわざわざ上下左右10pxに変更しています。

これはマウスホバーしたときに余白が美しいと感じたためです。

マウスホバーしたとき
MENくん

ひゃはー!上下左右の余白が均一!これぞ美しい余白やで!

くま3号

はいはい

今回はちょこっとしたカスタマイズですが、これはこれでオリジナリティが出るので、ブログをもっと好きになりますね。(自論)

くまさんからのお願い

ぼくのカスタマイズコードをそのまま(またはほとんど)コピーしてそれをブログで記事にされるのは、あまり嬉しくないです‪( ˙꒳​˙ᐢ )No!

MENくん

あれ!?この記事、、、ぼくが書いたコードかなりコピペして紹介してる!

くま3号

ちょっとこれは、、、複雑な気持ちやな

ぼくはカスタマイズコードを1から書いています。

一部、参考にしたカスタマイズ記事があれば必ずリンクを貼るようにしています。

そこんところをちょっと考慮してもらえると嬉しいです( ˶ˆ꒳ˆ˵ )

コメント( ˶ˆ꒳ˆ˵ )

avatar