【Diverカスタマイズ】サイドバーのタイトルデザイン変更方法

今回は、Diverのサイドバーにあるタイトルデザインの変更方法についての紹介記事になります!

 

  • Diverを使っているけどカスタマイズ方法がわからない
  • サイドバーにあるタイトルデザインを変更したい

という人は、参考にしてみてください。

 

彩華
最初はカスタマイズする箇所が多過ぎて気にならなかったけど、Diverを使っているブロガーさんってサイドバーのタイトルデザインもオシャレだよね♪どうやってるんだろう?

ろん
サイドバーのタイトルデザインなら、ウィジェットタイトルのカスタマイズをすると設定変更できるよ

 

スポンサーリンク

【Diver】サイドバーのタイトルデザインを変更する方法

今回紹介したいサイドバーのタイトルデザインを変更すると、上の画像のようにタイトルのデザインがオシャレに変更できます。

 

変更できる箇所は

 

  • 運営者プロフィール
  • 記事カテゴリ
  • 新着記事
  • アーカイブ

 

などなど、サイドバーに表示するあらゆるコンテンツのタイトルデザインを好みのデザインに変えることができます!

 

 

Diver サイドバーエリアのタイトルデザイン変更方法

サイドバーエリアのタイトルデザイン変更方法は、ワードプレスのホームメニューから「外観」→カスタマイズ」と進みます。

 

ブログのカスタマイズページへ移動するので

デザイン設定②」を選んでクリックしましょう。

 

デザイン設定2を選ぶと、上のようにH2の見出しの設定画面が表示されるので、少し下にスクロールしてください。

 

ろん
この画面は、ブログページをカスタマイズするときに使うから、今後もカスタマイズすることを考えているなら覚えておくといいよ

 

ウィジェットタイトルのスタイル

カスタマイズメニューから少し下にスクロールすると、「ウィジェットタイトルのスタイル」という設定項目があります。

 

赤枠部分が「ボックス」となっているのですが、これを変更することでサイドバーのデザインをカスタマイズすることができます!

ろん
上にある色を選択すると、タイトルのデザインカラーも変更できるよ

 

スポンサーリンク

タイトルデザインのスタイルは全部で9種類!

ここからは、タイトルデザインのスタイルを変更するとどんな風にデザインが変わるのか?

紹介していきたいと思います!

 

これからご自分のブログのデザインを変更を考えている人は参考にしてみてくださいね。

ボックス

こちらがDiverの初期設定にもなっている、「ボックス」のスタイルを選んでいる時です。

カラーの設定箇所

・文字色
・背景色

 

僕は、青い色を選んでいますが、この色はお好みで変更できるのでサイトの雰囲気にあった色を選ぶといいですよ。

 

標準的なデザインで、ワードプレスの無料テーマなんかでもこのスタイルが初期設定になっていることが多いですね。

 

下線

続いては「下線」です。

運営者プロフィールの下に、ラインが入ったように赤く線が入ったと思います。

カラーの設定箇所

・基本色(下線部分)
・文字色
・背景色

この赤い線についても、お好みで色が選べます。

サイトの雰囲気にあった色を選んでみてくださいね。

 

リッチ

続いては「リッチ」です。

リッチにすると、タイトルデザインのカラーがグラデーションになります。

カラーの設定箇所

・基本色(下線部分)
・文字色
・背景色

 

しかも先ほどの下線もあるので、先ほどの下線だけに比べてちょっぴりオシャレにできます。

 

タグ

続いては「タグ」です。

カラーの設定箇所

・基本色(緑色の点部分)
・文字色
・背景色

 

タグは、一見ボックスの丸みを帯びたヴァージョンのようなデザイン。

 

緑の点部分のカラーはお好みで変更することができます。

 

ついでに僕も背景色を変更してみました。

さっきよりオシャレになりましたかー?

リボン1

続いては「リボン1」です。

当ブログでも、リボン1を使っているのですが立体的な表示切り替わります。

カラーの変更箇所

・文字色
・背景色

 

僕的オススメのスタイルです。

 

リボン2

続いては「リボン2」です。

こちらも人気のデザインで、Diverを使っているブロガーさんの中では結構見かけます。

カラーの変更箇所

・文字色
・背景色

 

Diverを購入前は「オシャレなサイトだなぁ」くらいか思っていなかったのですが、 Diverになってからこのデザインを使っているブロガーさんは本当に多くて驚きです。

 

付箋

続いては「付箋」です。

ボックスの左側に線が入ったようなデザインです。

カラーの変更箇所

・基本色(左側縦線部分)
・文字色
・背景色

 

シンプルなボックスがお気に入りなんだけど、ちょっとオシャレにしたい時なんかに使うといいかも?

 

ストライプ

最後は「ストライプ」です。

カラーの変更箇所

・基本色(緑部分)
・文字色
・背景色(青部分)

 

検索で出てきたブロガーさんでは見かけたことがないのですが「Diverならこんなこともできるよ!」ってアピールにつかえるかも?

 

あなたの使いたいデザインはありましたか?

っということで、ここまでDiverで使えるサイドバーのタイトル部分のデザイン変更について紹介してきました!

サイドバータイトルデザインの変更方法

・ワードプレスホーム画面から外観を開く
・カスタマイズを開く
・デザイン設定②を開く
・下にスクロールしウィジェットタイトルのスタイルを開く
・スタイルを変更する

 

Diverなら今回紹介した方法で、あなた好みのデザインへと変更することができます。

僕自身もずっとどうやったらタイトルデザインを変更できるのか?探していました。

 

今回は、同じDiverを使っている方や、これから Diverを使ってみたいという方に向けて記事としてまとめておきます!

彩華
デザインの変更だけじゃなく、色の変更でもできるんだね♪

ろん
これでブログのデザインがまた自分色に染められると思う。

是非参考にしてみてくださいね。

スポンサーリンク
関連キーワード
おすすめの記事