KASABUTA-ENDLESS

*

[Hueman使い方]サイドバーの背景色を変更する方法。その2

   

スポンサーリンク

[Hueman使い方]サイドバーの色を変更する方法。その2

前回の記事で、ワードプレステーマ「Hueman」のサイドバーの幅と色を変更しました。

[WordPress]Huemanのサイドバーの幅と色を変更する方法 | KASABUTA-ENDLESS


ですが、色を変更するとおかしな事になることに気が付きました。

図説します。

saido

デフォルトの状態でのサイドバーはこのように薄い灰色をしていますね。

前回説明した方法でサイドバーの色を変更すると…

saido2

こうなります。

サイドバーのウィジェット分の領域だけ色が変更されますが、

ウィジェットがない下の部分はデフォルトのままの薄い灰色になるんです。

サイト作りでは色彩デザインは気にするべきだと思うので、これは結構な問題ですよ。

今回はその解決法を説明します。

解決法は2つあります。

・簡単お手軽コース

・ちょっと大変コース

では、それぞれやってみましょう。

まず簡単な方から。

Huemanサイドバーの色を変更:簡単お手軽コース

先ほど、

「サイドバーのウィジェット分の領域だけ色が変更されますが、

ウィジェットがない下の部分はデフォルトのままの薄い灰色になるんです。」

と記載しました。

つまり逆を言えば、サイドバーをウィジェットで埋め尽くせば灰色領域を消し去ることが出来るわけです。

saido3

ウィジェットの設定だけで解決できるのでお手軽ではありますよね。

ただ、サイトの縦の長さとか、その他の要素でウィジェット領域が不足したりした場合は灰色領域が顔を出すと思います。

根本的な解決ではなく、応急処置的な解決法かもしれません。

ウィジェットを沢山いれると重くなったりもしますし。

試してませんが、「テキスト」のウィジェットを追加して、スペースや改行を入れまくれば軽めにウィジェット領域が広がるかな?

Huemanサイドバーの色を変更:ちょっと大変コース

サーバーのFTP機能か、FilezillaなどのFTPソフトが必要です。

まず、「wp-content」のthemeより「hueman」にアクセス。

/img/sidebar/の「s-left.png」と「s-right-s2.png」をダウンロードします。

これは薄い灰色の横に細長いpngファイルです。

kouiuno

↑これですけど、見えるかな?色も薄いし、細いしで、見えにくいかも。

この色がサイドバーに反映されているわけです。

これをお好きな色に変更してください。

ペイントの塗りつぶしで大丈夫です。

好きな色に変更したら、名前はそのままでアップロードしなおします。

これで灰色領域を任意の色に変更することができます。

この方法だと、また色を変更したいと思った時に同じ手順を踏まなきゃいけないから、ちょっと面倒かもしれませんね。

でも、どうせならこっちの方法をオススメします。

[Hueman使い方]サイドバーの色を変更する方法。その2

いや~楽しいね~。

素人なりに試行錯誤しながらカスタマイズしていくのは楽しいです。

この記事が誰かの参考になったら嬉しい限りです。

 - WordPress, 使い方

336adosensu

336adosensu

Message

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

  関連記事

pagetop
[STINGER5]トップへ戻るのボタンを好きな画像に変更する方法「PageTop」

スポンサーリンク [STINGER5]トップへ戻るのボタンを好きな画像に変更する …

By: bluesbby
ワードプレスの記事中にソースコードを表示させる簡単な方法

スポンサーリンク ワードプレスの記事中にソースコードを表示させる簡単な方法 前回 …

By: Kohei Uesaka
[STINGER5]サイドバーのウィジェットとかの順番を入れ替える方法

スポンサーリンク [STINGER5]サイドバーのウィジェットとかの順番を入れ替 …

2015-02-05_224359
アキネイター:アナタの考えは見透かされてますよ。

アキネイターってサイト、もしくはアプリ知ってます? なんとなくは知ってたんですけ …

By: Linus Bohman
[WordPress]プロフィールをサイドバーに載せるプラグイン4つを試してみた

スポンサーリンク [WordPress]プロフィールをサイドバーに載せるプラグイ …

By: khrawlings
[WordPress]phpをいじってヘッダー右側に相互RSSを設置する方法

スポンサーリンク [WordPress]phpをいじってヘッダー右側に相互RSS …

By: Amanda  Cabral
[ワードプレス]flickrの写真を簡単に挿入できてクレジット表記も自動の超便利なプラグイン

スポンサーリンク flickr上の著作権フリーの写真や画像を簡単に検索・挿入でき …

By: Maria Keays
[WordPress]投稿日付と時間の表示を変更する。あと投稿者名を削除する方法(Hueman)

スポンサーリンク [WordPress]投稿日付と時間の表示を変更する。 あと投 …

By: Elliott Brown
[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)

スポンサーリンク [WordPress]フッターのトップへ戻るボタンの位置を変更 …

By: JD Hancock
人気ブログになるためのプロフィールの書き方

スポンサーリンク 人気ブログになるためにアルファブロガーのブログのプロフィール欄 …