KASABUTA-ENDLESS

*

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

   

スポンサーリンク

[Wordpress]Huemanのサイドバーの幅を変更する方法

現在、まとめブログ系のサイトをワードプレスで作ってます。

テーマはStingerが良かったのですが、残念ながらStingerは3カラムには対応してなかったです。

無理やりカスタマイズして3カラムにするのもありですが、もし崩れたりトラブルが起きても自分の力量じゃリカバーできないでしょうから断念。

SEOとかは気にしないつもりだし、視覚的に気に入ったものにしようと物色していると、「Hueman」というテーマがスゴく良さ気。

Hueman – Inspire and empower.

Huemanのデモサイトです。

オシャレでカッコいい!

カラム数も1、2、3と変更できるし、カラムの位置も好きに変えることが出来ます。

おおかたのパーツの色の変更も簡単です。

テーマ製作者のクレジット表記も公式に非表示にすることができます。

ソーシャルリンクボタンの設置も簡単。

いろいろ簡単カスタマイズ。

デフォルトのままでも充分に使えますけどね。

で、今回やってみるのが、サイドバーの幅と色の変更です。

上のデモサイトを見るとわかると思いますが、右と左のサイドバーで幅の大きさが違うんですよね。

340pxと260pxなんです。

ちょっと私には気持ち悪いような、ムズムズするような感じがします(笑)

そこは均等な幅でいいじゃん!って。

サイドバーの幅を同じにする方法

子テーマを導入しているなら下のコードを入れれば均等になります。

[css]
.col-3cm .main-inner { background-position: -80px 0; padding-left: 260px; }
.col-3cm .s1 { width: 260px; margin-left: -260px; }
[/css]

直接スタイルシートをいじるのであれば、

「base : layout columns」のなかにある、「3 column, content middle」の部分を

[css]/* 3 column, content middle */
.col-3cm .main { background: url(img/sidebar/s-right-s2.png) repeat-y right 0; }
.col-3cm .main-inner { background: url(img/sidebar/s-left.png) repeat-y left 0; padding-left: 300px; padding-right: 300px; }
.col-3cm .s1 { float: left; margin-left: -300px; }
.col-3cm .s2 { float: right; margin-right: -300px; /* ingenuity! */ position: relative; right: -100%; }
.col-3cm .content { float: right; }
[/css]

こう変更しても同一の幅になりました。

数値はおのおので好きなように変更してみてください。

注意点として、後者の方法の場合、サイドバーのバックグラウンドの色が消し飛び、サイトの背景色と同化してしまいました。

これは私としては好都合なのですが、気になる人は注意してください。

サイドバーの色を変更する方法

あと、そのサイドバーの背景色を変更する方法。

子テーマのスタイルシートに、

[css].sidebar { background-color: #ffffff!important; }[/css]

と記述してください。

ffffffの部分は好きな色に変えてくださいね。

とりあえずはこんな感じでしょうか。

Huemanを利用している日本人はあまり居ないようなので需要はないかもしれませんが、備忘録的な感じで。

ホントはそのサイトを見せながら解説したかったけど、恥ずかしいので(笑)

まだまだ作成途中なので、他にもカスタマイズ記事が書けそうだ。

 - WordPress, 使い方

336adosensu

336adosensu

Comment

  1. HAL より:

    はじめまして。
    Huemanに変更して初心者なりに色々いじっているんですが…
    CSSを勉強もしてないので結構大変だ!と検索を色々していた所こちらに辿り着きました。

    使ってる方があまり居ないとの事ですが、
    見かけるサイトさん、初期設定(カラーなど)が多かったので
    それだと同化してしまってなんだかつまらない…と思ったので、
    こうやって変更の仕方を残していただいてるだけでありがたいです!

    • KASABUTA KASABUTA より:

      難しいですよね~。

      私も初心者で探り探りイジってたので最適解では無いと思うんですけど…
      参考にしていただいて有難いです。

  2. Huemanを使っています。同じく左サイドバーのサイズを小さくしたいと思っています。KASABUTAさんのを参考にしようと思ったのですが、スタイルシート内に「base : layout columns」を見つけられません。どこを開いたらよいのやら。。。アドバイス頂けると助かります、

    • KASABUTA KASABUTA より:

      当サイトのテーマはスティンガーなので参考になりません。すみません。
      この記事を書いた時点とバージョンが異なっていて手順通りにいかないかもしれませんね。

      また、実はhuemanで作っていたこの記事の中のサイトも結局途中で難航して公開に至りませんでした。

      まだ作りはじめの段階であればhuemanでの作成はやめたほうが良いように思います。
      日本ではメジャーじゃないテーマなのでカスタマイズ記事も見当たらないでしょうし、最近の日本のメジャーなテーマであれば扱いやすくカスタマイズ記事も多いでしょう。

Message

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

  関連記事

助けて!ワードプレスのビジュアル編集のレイアウトぐっちゃぐちゃ\(^o^)/

スポンサーリンク 助けて!ワードプレスのビジュアルモードでの編集で画像をいれると …

お気に入りやタブ横のアイコンを作成して変更・表示させる方法

お気に入りやタブ横に表示されるアイコンをオリジナルで作成して変更・表示させる方法 …

センス良いね!画像をポップアップで拡大表示するワードプレスプラグイン

Photo:Le Danseur by Roy Barnett Jr. &nbs …

tableの枠線が消えない。border:noneが効かない。楽天アフィリエイトの枠線…

どうも。 久々にワードプレスカスタマイズ記事です。 このブログを作った初期にやっ …

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

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

画面のキャプチャ後に編集まで出来ちゃう拡張機能(アドオン)が便利らしいゾ♪

スポンサーリンク クロームやインターネットエクスプローラー、ファイアフォックス等 …

熊本でUQモバイル安くMNPできるとこは?

どうも。 いまのスマホはNEXUS5です。 特に不便はしてないのですが、なんか新 …

[WordPress]フッターのクレジット表記の位置を変更する方法

スポンサーリンク [WordPress]フッターのクレジット表記の位置を変更する …

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

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

ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法

スポンサーリンク ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法 …