minikokoの素敵に暮らしたいブログ

【WordPress】HuemanのＣＳＳデザインカスタマイズまとめ

minikoko
本ページにはプロモーションが含まれている可能性があります。

こんにちは。ミニマリストkokoです。

 

当ブログのワードプレステーマは「Hueman」を使用しています。

 

 

色々な機能がついていてとっても素晴らしいテーマなのですが・・

デザインを変えたり、調整をするにあたって、ブログのド初心者！！のわたしは

「もっとここをこうしたい！ああしたい！」という希望があったとしても

 

 

全然答えが出てこない！！

 

 

 

なんてことがめちゃくちゃありました。デザインの変更方法が他のテーマと違ったりしてるみたいです・・

 

 

まじで苦労しました！！！

 

 

そのため忘れてしまわないように。そしてどなたかの参考になれますように、

色々変えるたびにここに追記していきます。

 




CSSの追加方法

 

ワードプレスログイン後の画面で「外観」→「CSS編集」で出てくる画面に直接入力していきます。

 

「テーマの編集」を直接いじるのはまじでＮＧ！

 

子テーマ作って、スタイルシートの～とかファンクションのどこどこに入力なんて方も多いようなのですが、

Huemanは、CSSに直接入力でも大丈夫です。

 

追記していくだけなのでめちゃ簡単！

 

 

何を入力するのか？

 

最初は「ただの暗号」にしか見えませんでしたが、ひとつひとつ進めるごとに意味があるのだなと、理解できるようになっていきますので大丈夫です。

 

この、暗号に見える文字が「タグ」と呼ばれるもので、今皆さんが読んでる文章もこの「タグ」なしでは表示されない仕組みになっています。

 

どの「タグ」を入れれば、文字色が変わるのか？文字の大きさが変わるのか？太さが変わるのか？

背景が何色になるのか？などを箇条書きで書いていきます。

 

●●のところに好きな数字やカラーコードを入力しますと、CSS編集画面で右側に出てくるプレビューが即時反映するので

バランスを見ながら変更できます。

 




・タイトルや見出し以外の文字の大きさを変える

 

まさに今読んでいるこの記事文の大きさを何サイズにするか？というタグです。

私は１５ｐxにしています。

 

p{
font-size:●●px
}

 

 

・文字の太さを変える

 

文字の太さは、１００単位で入力します。４００が一般的な太さで、１００ずつ変更できます

※１００、２００、３００….９００まで

 

a{
font-weight:●●!important;
}

 

・記事の日付サイズを変える

記事タイトルの近くに表示されている「２０１８／５／２４」のサイズです。

個人的に、小さめが好きです。

time{
font-size: ●px!important;
}

・記事タイトルのサイズ変更

 

このページの一番上に表示されている、「【WordPress】HuemanのＣＳＳデザインカスタマイズまとめ」部分のサイズ変更です。

 

.single .post-title {　font-size: ●●px!important;　}
.post-title {font-size: ●●px!important; }

 

 




 

 

 

・サイドバーの背景色を変える

 

ＰＣの方は、右側に表示されているバーです、スマホやタブレットの方はサイトの一番下にあり

カテゴリーや最近読まれている記事などを置いているところの背景色を指定します。

 

.sidebar .widget  {background-color: #●●●; }

・ウィジェット表示の文字の太さや色を変更する

「カテゴリー」などのウィジェットコーナー内にあるリンク文字の調整です。

 

/*ウィジェット文字*/
.widget, .widget a {
font-weight: ●●;
color: #●●}

.widget_archive ul li, .widget_categories ul li, .widget_links ul li {    font-weight: ●●●;
color: #●●	}

・見出しデザイン

「ｈタグ」ってやつです。↑ここのグレーの囲みデザインのことです。

Huemanでは、ただの「h１」「ｈ２」では上手く反映されない場合があります。
特に、トップページと記事内の見出しデザインを別にするのであれば、下記のタグが有効です。

/*見出し*/
.entry h1{
	font-weight:bold;
	margin-top:●●px;
	margin-bottom:●●px;
}

.entry h1 span{
	color: #●●;
	font-size:●●px;
	font-weight:bold;
	border-bottom:solid ●px;
	border-color:#●●;
	padding: ●px;
}

上記の「entry」後の数字をｈ２．ｈ３．ｈ４と変更していくと適用が可能です。

 

 

 

 

 

↓応援のポチをしていただけると、私が泣いて喜びます(´；ω；`)！


にほんブログ村

※栄養学について書いている記事は、医療を否定するものではありません。
学んだことを、私自身に試した結果、個人的な体感を記すものです。
真似をされる場合は医師の判断を得たうえで、自己責任でお願いいたします。



モバイルバージョンを終了