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

Before

After

MENくん

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

くま3号

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

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

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

自己責任の意味がわからない方初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

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

カスタマイズするための
準備

目次へ戻る

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

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

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

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

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

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

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

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

MENくん

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

カスタマイザーの設定

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

カスタマイザーに移動

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

「色」の変更をクリック

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

ウィジェットの色を変更

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

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

MENくん

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

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

目次へ戻る

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

コメントあり

コメントなし

MENくん

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

うまくできたか
確認

目次へ戻る

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

確認方法
「Ctrl」+「F5」(キャッシュ削除)

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

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

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

くまからのお礼

目次へ戻る

本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)

もっとカスタマイズしたい人はこちらの記事を見てください。

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

カスタマイズのこだわり

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

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

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

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

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

上の線ありor上の線なし

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

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

くま3号

どっちでもええわ

余白の微調整

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

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

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

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

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

くま3号

はいはい

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

コメントを残す

メールアドレスが公開されることはありません。