「STINGER3」サイドバーの見出しデザインを変えてみた。

公開日: : STINGER3

STINGER3のサイドバー見出し。これはこれでシンプルで好きだったんだけどやっぱり少しはオリジナリティーが出したくなってきたのでデザインを少し変えてみることにしました。

たくさんのカスタマイズ方法をみさせてもらいましたがこちらの方法で落ち着きました。

参考にさせて頂いたサイト様:T’LNIS

では解説に入ってきます。

スタイルシート(style.css)を編集

サイドバーの見出しデザインを変えるにはstyle.cssを弄ります。その中でも.menu_underh2というクラスの中を弄ります。

デフォルトの状態だとこのような記述になっているはずです⬇️

stinger3サイドバー見出しデザイン変更

 

このクラスにコード(要素)を追加して見出しのアイコン画像も変えてみました。

以下のようにしてみました。 *クリックで拡大

stinger3サイドバー見出しデザイン変更点

background:で背景色を追加します。今回は濃いめの青っぽい色にしました。

border-radius:は背景の角を丸く表現するためのプロパティです。角を丸くしたくない方はコレは要らないですね。

color:は見出しテキストの色になります。背景が濃い色なので今回は「#fff」白でいきます。

これだけでもガラッと雰囲気は変わると思いますが今回は見出しのアイコン画像も変えてしまいます。そこで使用したツールがこれです。

無料アイコンメーカー「iconion」

iconion

iconionダウンロードページ 

今回初めて使ってみましたがとてもいいです。素人でも簡単にそれっぽいアイコンが作れる優れもの。

始めからかなりの数のアイコンがプリセットされていているので後は自分好みにカスタムするだけで完成です!

で、完成したアイコンを見出しで使うために

wordpress▶︎メディア▶︎ライブラリ▶︎新規追加▶︎ファイルを選択▶︎編集▶︎ファイルのURLをコピーします。

そしてコピーしたURLをbackground-image: url();の()内にペーストし、更新。これで完成です!

で、どうなったかというと…..

サイドバー見出しデザイン変更完了!

どうですか?

シンプルですが悪くないですよね?

WEBのスキルがなくてもこれぐらいはサクッとできる方法なので一度お試しあれ。

 

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

関連記事

「STINGER3」続きを読むを右側へ移動してみた。

  今回はトップページにある最新記事の続きを見るを右側へ移動してみたのでつら

記事を読む

「STINGER3」サイドバーのNEW ENTRYを消してみた。

STINGER3はトップ画面に最新記事が並び、サイドバー上部にも同じ最新記事が並んでしまいま

記事を読む

「STINGER3」見出しh3アイコンカラーを変更してみた。

STINGER3のh3にはチェックボックスのようなアイコンが表示されますが 今回はこのアイコ

記事を読む

「STINGER3」SNSボックスの表示を横から縦に変えてみた。

みんな大好きSTINGER3。 でもこのSNSボックスの横表示だけは何だか記事が読みに

記事を読む

「STINGER3」トップページの記事と記事の間に区切り線を入れてみた。

今回やってみたカスタムはSTINGER3のトップページに表示される記事と記事の間に区切り線を

記事を読む

「STINGER3」記事下SNSボックスにPocketを追加してみた。

後で読むサービスのpocketは気になるサイトや記事を簡単にそのページ丸ごと保存できることで

記事を読む

「STINGER3」スマートフォンでのヘッダー画像を表示してみた。

stinger3はスマートフォンでブログを表示させた時なぜかヘッダー画像は表示されません。そ

記事を読む

「STINGER3」背景画像を変えてみた。

STINGER3もかなり有名なテーマになってきたのもあってか、「あぁ〜ここもstinger3

記事を読む

「STINGER3」続きを見るのボタンの色を変更してみた。

前回は続きを見るを右側に移動してみましたが今回はボタンの色を変えてみたいと思います。ボタンの

記事を読む

WordPressテンプレート「STINGER3」にしてみた。

当ブログはwordpressという無料のウェブサービスを利用して運営しています。アメブロやFC2

記事を読む

Comment

  1. […] ENTRY」とかのことです。赤いリボンを入れました。 きちデンさん、c-3works.comさんの説明がわかりやすいです。 […]

Message

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

  • プロフィール

    運営者:C3 (しーさん)

    愛知県知多半島在住の会社員。兼業アフィリエイター。2児の父。本業とアフィリエイトの収入で心を豊にするのが2015年の目標。月の副業収入は今のところ非公開にしています。というか全然稼いでいません...。

    follow us in feedly

PAGE TOP ↑