【Xeory Baseカスタマイズ】サイドバーウィジェットの見出しデザインを変更

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

当ブログで採用しているWordpressの無料テーマ、XeoryBaseですけどシンプルが故に一か所いじり始めるとどこもかしこもいじらないとバランスが取れなくなってきます汗

ということで汗をカキカキしながらようやく形にしましたが、専門分野じゃなくって大変だったので、できるだけ分かりやすく共有できたらと思います^^

サイドバーの「カテゴリー」や「最近の投稿」「サイト内検索」の見出しをカスタマイズ

XeoryBaseだとデフォルトのデザインはこんな感じです。

シンプルイズザベストの域を超えて、ちょっと寂しい。これをこんな風にカスタマイズしていきたいと思います↓

ビフォーの画像よりも目を引くし、ブログイメージにピッタリなデザインにできたと思いますたぶんきっとええ。

このブログでもそうなんですが、サイドバーからのカテゴリーや最新記事からの回遊率って結構高いです。

普通ブログを開いて自分の知りたいことが知れたらパッと閉じて次の作業に移っちゃいますよね??それを防いでくれるのがこのサイドウィジェット群です。

なので、ここいらが目立たないのはもったいない。ほらあるでしょ??ちょっと調べものしてただけなのに、つい他の記事が気になっていつの間にかネットサーフィン気づけば30分経過とか。それ狙いです(笑)

カスタマイズの前に・・・

WordPressテーマのカスタマイズをする前には必ずバックアップをお願いしています。方法は以下の記事にまとめてありますので、ご一読ください。

WordPressのバージョンアップはバックアップしてからだよープラグインBackWPup使用ー

ではいってみましょう。

図解で簡単!!Xeory Baseカスタマイズ-サイドバーウィジェットタイトル編-

まず外観→カスタマイズと進んでいってください。

するとこんな画面になりますので、「追加CSS」をクリック

そこにCSSコードを貼り付けるだけです。貼り付けするコードはこちら。

こんな感じです↓

これを貼り付けたら上のほうの「公開」をクリック。以上で完了です。

今のコードを自分好みにカスタマイズしよう

もし色を変更したかったらカラーコード(赤線の部分)を変更してください。

カラーコードはこのサイトでも調べられますし、

HTMLカラーコード

デベロッパーツールを使えばより自分のイメージした色を試験的にリアルタイムで試すことができます。(試してる間、読者側の見え方には影響なし)

このツールを使うと、自分で一生懸命考えたカラーを実際に適応したら衝撃的にダサくてイチから考え直しとか、もうちょっと冒険した色にしたいけど試すのが面倒とかいう問題を解決してくれます。

しかもGooglechrome側のツールなので無料だし安全。

デベロッパーツールで色を自由自在に変更。いろいろ試してみよう

まずキーボードの一番上の列「F12」を押しましょう。または、右クリックから「検証」をクリック。

するとこんな文字記号がズラーーーーっと横に出てくると思うので、左上の矢印をクリック。そしたらサイドウィジェットのタイトル部分を選択してクリックしましょう。

すると右の表示が変わって色のアイコンが出てくると思うので、それをクリック。好きな色を選択するとサイト上で色を試すことができます。

好きな色が決まったら#○○○のコードをコピーして先ほどのコードを変更しましょう。

他のデザインも考えてみました

コピペコード

コピペコード

もしわからないことがあったら聞いてください。わかる範囲ですがお答えしますよー^^

他にもいじり中です

【Xeory Baseカスタマイズ】子カテゴリーの階層を見やすく表示する方法

SNSでもご購読できます。

コメント

  1. ハッピー より:

    ブログランキングから来ました。私もサイドバーウィジットをカスタマイズして、アドセンスタグを貼ったのですが、うまく表示されませんでした~

    1. たっそ より:

      こんばんはー。
      アドセンスタグはサイドバーウィジェットの「テキスト」に貼り付けましたか??「ビジュアル」に張り付けたりするとうまく表示されませんよ!

  2. いくっち より:

    ランキングから訪問させていただきました。
    ワードプレスのカスタマイズは、これからなので勉強になります。
    再度訪問して、学ばせてくださいね( ´艸`)

    1. たっそ より:

      こんばんは!
      カスタマイズに関しては素人なので、バックアップとか子テーマとかすごく時間がかかりました(笑)
      専門的な記事を解読するのに時間がかかったので、少しでも分かりやすく書いていきたいと思います^^;
      お待ちしていますー。

コメントを残す

*