[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を利用している日本人はあまり居ないようなので需要はないかもしれませんが、備忘録的な感じで。
ホントはそのサイトを見せながら解説したかったけど、恥ずかしいので(笑)
まだまだ作成途中なので、他にもカスタマイズ記事が書けそうだ。
336adosensu
336adosensu
関連記事
-
アクセス数の激減。cocoonに変更直後から。もとに戻して確認してみる
どうも。 先日、衝撃のメールが届きました。 グーグルアナリティクスからアクセス解 …
-
便利っぽいプラグイン「Pixabay_images」でエラー「Parse error:」
どうも。 さきほど久しぶりにブログのプラグインの更新をしてみました。 すべて一括 …
-
動画から簡単にアイキャッチを取得するワードプレスプラグイン「Video Thumbnails」
どうも。 Flickerからアイキャッチの画像を持ってくることがほとんどですが、 …
-
ブログの写真・画像に枠をつけてチョット綺麗に見せる方法
スポンサーリンク ブログに掲載する写真や画像に枠をつけてチョット綺麗に見せる簡単 …
-
WordPressのテーマをCocoonに変更。Stinger5から約3年ぶり
どうも。 やる気になったらそのときにやるべし。 今からワードプレスのテーマを変更 …
-
[WordPress]投稿日付と時間の表示を変更する。あと投稿者名を削除する方法(Hueman)
スポンサーリンク [WordPress]投稿日付と時間の表示を変更する。 あと投 …
-
STINGER5の文字サイズを変更する方法
つい先日、今頃になって気がついたのですけどね、 「なんか、うちのブログ、文字小さ …
-
便利スギィ!!投稿編集画面でペイント・お絵かき出来るワードプレスプラグイン「deviantART muro」
ワードプレスの記事投稿で画像を使用したい時に、 「ペイント等で画像を作成・保存→ …
-
[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)
スポンサーリンク [WordPress]フッターのトップへ戻るボタンの位置を変更 …
-
助けて!ワードプレスのビジュアル編集のレイアウトぐっちゃぐちゃ\(^o^)/
スポンサーリンク 助けて!ワードプレスのビジュアルモードでの編集で画像をいれると …
Comment
はじめまして。
Huemanに変更して初心者なりに色々いじっているんですが…
CSSを勉強もしてないので結構大変だ!と検索を色々していた所こちらに辿り着きました。
使ってる方があまり居ないとの事ですが、
見かけるサイトさん、初期設定(カラーなど)が多かったので
それだと同化してしまってなんだかつまらない…と思ったので、
こうやって変更の仕方を残していただいてるだけでありがたいです!
難しいですよね~。
私も初心者で探り探りイジってたので最適解では無いと思うんですけど…
参考にしていただいて有難いです。
Huemanを使っています。同じく左サイドバーのサイズを小さくしたいと思っています。KASABUTAさんのを参考にしようと思ったのですが、スタイルシート内に「base : layout columns」を見つけられません。どこを開いたらよいのやら。。。アドバイス頂けると助かります、
当サイトのテーマはスティンガーなので参考になりません。すみません。
この記事を書いた時点とバージョンが異なっていて手順通りにいかないかもしれませんね。
また、実はhuemanで作っていたこの記事の中のサイトも結局途中で難航して公開に至りませんでした。
まだ作りはじめの段階であればhuemanでの作成はやめたほうが良いように思います。
日本ではメジャーじゃないテーマなのでカスタマイズ記事も見当たらないでしょうし、最近の日本のメジャーなテーマであれば扱いやすくカスタマイズ記事も多いでしょう。