誰でもできる! WordPressでオシャレなブログを作ってみよう【Luxeritas編その6】

2020年2月27日ブログ管理Luxeritas,WordPress,WordPress基本設定,ルクセリタス,初心者

おしゃれ風ブログ6ヘッダー

ぐず夫
ぐず夫
「小学4年生でも作れるオシャレ風ブログの作り方」の第6回目。
進行は今回も、ぐずぐず夫がお送りいたします(カンペ棒読み)。

トリ師匠
トリ師匠
今回はちこーっとだけCSSの編集してみるで。
まぁほんの少しやから見ていったってな。
ぐず夫
ぐず夫
そんなら張り切って行ってみよ~♪

ということで始まりました、「WordPressでオシャレ風ブログを作ってみよう!」の第6回目、「CSSで細かい見た目の設定するで!」をお送りします。誰でも1から簡単に作れるWordPressブログを是非体験してみてね!

おされ風ブログなんて実在すんの?

トリ師匠
トリ師匠
大まかな見た目の設定が終わったで、
今回はその他の細かいとこをCSSイジって変更してみよか。
ぐず夫
ぐず夫
CSS…
ワシが全然意味不明なとこやで。
トリ師匠
トリ師匠
まぁどうにかなる思うで。コンセプトは引き続き「誰でも簡単に、誰でもマネできる」で懇切丁寧にやってくつもりじゃ。
てことで、9章「CSSで細かい見た目の設定」を進めてくで。

ちなみに作るサイトはこんな感じ

ブログイメージ

9.CSSで細かい見た目の設定するで!

ポイント9と、始める前に
ここでちょっと前置き!

トリ師匠
トリ師匠
ちなみにCSSの設定は、間違えると画面真っ白になってWordPressの管理画面にアクセスでけへんようになる時もあるから注意やで。自信のない人は、この章飛ばして11章のバックアップまで終わった後で進めた方がええ思うわ。
ぐず夫
ぐず夫
正真正銘の初心者さんは先にバックアップとった方が無難てことか。
メモメモ…
トリ師匠
トリ師匠
この項の最後に念のため対処法(Mixhostのみ)はのっけとくけど、真っ白になっても大丈夫な人だけ先に進んでな。あとついでにもう1個断っとくな。
人によって好みもあるで、変更したくないとこは作業飛ばしてええからな。最低限の追記しかせぇへんよう心がけてるけど、『分からへん』とか『必要ない』ってことなら、9章は飛ばしても構わへんから覚えといて。
ぐず夫
ぐず夫
へいへい。
分かったからさっさと進めんかい。
トリ師匠
トリ師匠
そんなら1つずつ見てくで!
まずは「管理画面」「Luxeritas」「子テーマの編集」を選択して、「スタイルシート(style.css)」タブを選んでスタートじゃ!

子テーマ選択

CSS編集設定
①style.cssタブを選択し、②最終行を選択して作業開始!

投稿記事の見出しの文字色変更

見出し色変更

トリ師匠
トリ師匠
見出しの文字色をくっきり黒に変えたいで、色を指定してやるで。
下のコードを全部コピーして、そのまんま貼り付けて「保存ボタン」を押したら完了じゃ。ブラウザによっては「ページを離れるか?」みたいな表示が出るかもしらんけど、普通に「離れる」押したらええで。

/* 記事見出し文字色 */
.post h1 {color : #000;}
トリ師匠
トリ師匠
ちなみに「#000」のとこが文字色の指定やから、変えてやれば好きな色にできるで。「#ffff00(黄色)」とか「#0000ff(青色)」とか、自分で選んで決めたってな。(※カラーコードは3桁、6桁のどっちもOKやで)
ぐず夫
ぐず夫
色の種類とかワシ知らんのやけど?
トリ師匠
トリ師匠
ここ(外部サイト)とかで調べてもええし、外観カスタマイズの文字色の項目とかでも自由に見れるやろ。好みの色探して、表示されてる文字を入力したってな。ちなみに数字の入力は全部半角やで注意してな。

一覧表示のタイトル文字色変更

一覧文字色変更

トリ師匠
トリ師匠
黒バックでも消えへんように文字色を調整してやるで。
下のコードをコピーして貼っ付けて「保存」を押したら完了じゃ。

/* 一覧表示タイトル色 */
.entry-title a {
    color: #fff;
}
トリ師匠
トリ師匠
一覧表示の見出しの文字色が白になったら成功じゃ。
こちらも「#fff」のとこが文字色の指定やから、
上と同じように自分で考えて指定したってな。

一覧表示のタイトル文字色(ホバー時)変更

文字選択時文字色

トリ師匠
トリ師匠
こちらはマウスなんかで文字に触れた時に色が変わるようにする調整やな。
下のコードをコピーして貼っ付けて「保存」を押したら完了じゃ。

/* 一覧表示タイトル(ホバー時)色 */
.entry-title a:hover {
    color: #001689;
}
トリ師匠
トリ師匠
一覧表示の見出しの文字色がホバー時に青っぽくなったら成功じゃ。
こちらも「#001689」のとこが文字色の指定やから、
上と同じように自分で考えて指定したってな。

一覧表示タブの背景色変更

タイル背景色変更

トリ師匠
トリ師匠
今度は四角ん中の背景色の変更じゃな。
そのままやと真っ白やから、半透明の黒色に変更するで。
下のコードをコピーして貼っ付けて「保存」を押すで。

/* 一覧表示タブ背景色 */
div[id^="tile-"] .toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget) {
    background-color: rgba( 255, 255, 255, 0.2 );
}
トリ師匠
トリ師匠
こちらもベースの色は自由に変更できるで。今回は透明度を指定するためにRGB表記になってるけど、「255(R),255(G),255(B)」の部分が色の指定で、「0.2」の部分が透明度てだけやからビビらんといてな。
ぐず夫
ぐず夫
その数字の意味はどないやねん?
トリ師匠
トリ師匠
色の表記は色々可能あってな。
さっきの「#000000(16進)」とか「255,255,255」とか色指定の仕方にも種類があんねん。他にもCMYKとか様々なルールで色を指定すんねんけど、今回は透明度を使いたかったからRGB指定やねん。
ぐず夫
ぐず夫
(…なんのこっちゃ)
トリ師匠
トリ師匠
まぁ分からんくても別にええわ。イジってるとだんだん分かるようになるで、最初は『へ~』くらいでええんちゃう。
ぐず夫
ぐず夫
で、そこに入れる数字はどうやって調べるんや?
トリ師匠
トリ師匠
RGBの数値は上で紹介したサイト(外部)なんかで調べれるで。例えば黒のページなんか見てやると、16進表記以外にもRGB表記も書いてるで、参考にしてみたらええで。
RGB値確認
便利に使わせてもらおな!
ぐず夫
ぐず夫
もう1個の透明度っちゅうのは?
トリ師匠
トリ師匠
これは「0~1」の数値を入れることで透明度が指定できんねん。0やったら完全に透明、0.5やったら半分透明、1やったら透明じゃない、みたいな感じやな。今回の例やと「0.2」やから、黒をかなーり透明にした色になるな。
ぐず夫
ぐず夫
ふーん、なるへそ

トリ師匠
トリ師匠
ちなみにサイトの色味を考える上で、透過もなんもない純粋な黒(#000)はなるべく使わん方が無難やで。今回記事タイトルに#000を使ってるけど、純粋な黒ってのは目に優しくないねん。ドッと目立たせたいとか、特別な理由がない限り、純粋な黒は避けるのが無難やねんて。これ豆知識な!

一覧表示タブの背景色(ホバー時)変更

ホバー時背景色変更

トリ師匠
トリ師匠
四角ん中を触った時の背景色の変更じゃな。
そのままやと味気ないで、赤っぽい透明色に変更するで。
下のコードをコピーして貼っ付けて「保存」を押したらOKじゃ。

/* 一覧表示タブ背景色(ホバー時) */
div[id^="tile-"] .toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget):hover {
    background-color: rgba( 255, 113, 106, 0.55 );
}
トリ師匠
トリ師匠
こちらも上と同じでベースの色は自由に変更できるで。
「255(R),113(G),106(B)」の部分が色の指定で、「0.55」の部分が透明度じゃ。

カルーセルスライダー表記変更

スライダー表記変更

トリ師匠
トリ師匠
スライダーに表示される文字のサイズと位置(中央寄せ)を変更するで。
下のコードをコピーして貼って「保存」を押したら完了じゃ。

/* カルーセルスライダー表記 */
p.swiper-title {
    text-align: center !important;
    font-size: 1.5rem !important;
}
トリ師匠
トリ師匠
文字のサイズ「1.5」の部分で調節可能やで(※1remが大体10px)。
自分とこの画像サイズなんかに合わせて決めたってな!

OPEN表記背景色変更【スマホ表示用】

スマホ表記変更

トリ師匠
トリ師匠
忘れがちやけど、PC用のページの他にスマホ用の表示も変更してやるで。
ホバー時もまとめて設定するで、全部コピーして貼り付けて「保存」じゃな。

/* OPEN部分変更(スマホ用) */
@media (max-width: 575px){
    /* 通常時 */
    .read-more-link {
        color: #ffffff;
        background: none;
    }
    /* ホバー時 */
    .read-more-link:hover {
        color: #001689;
        background: #FFC053;
    }
}
トリ師匠
トリ師匠
colorてのが文字の色
「#ffffff」の部分が普通の時の文字色
「#001689」の部分がホバー時の文字色じゃから好きなように設定したってな。

backgroundてのはちっさい四角の背景色
「none」の部分が普通の時の色
「#FFC053」の部分がホバー時の色じゃ。

ちなみにnoneは「色無し」の指定やけど、「#ffffff」とか色を指定してやってもOKやで。

ぐず夫
ぐず夫
ふーん。なんだかよく知らんけど、色々でけるんやな。
理解は全然でけへんけど。
トリ師匠
トリ師匠
正味の話すれば、サイト全部の形をそっくり作り変えることやって可能じゃ。ま、でもそんな面倒なことせぇへんためにテーマってものを用意してくれてるわけで。大まかに決まった既存の形を、ちょっとずつ自分好みに変えられるのが、この機能の便利なとこかの。
ぐず夫
ぐず夫
ほへ~。色々勉強したらもっと形も変えられるんやろな。
それはそれで楽しいかもな。せぇへんけど!
トリ師匠
トリ師匠
宣言すな!


と、まぁ
こんな風に作業は色々可能ですが…

ダンパ
ダンパ
ご覧のように、カスタマイズはこだわり始めるとキリがありませんので、
今回の例ではここまでの変更に収めています。

・なぜこう書いたら文字色が変わるの?
・ここの形も変えたいんだけど?

などなど知りたいことは沢山あると思いますが、
それはブログを続ける中で覚えていけばいいと思いまーす。

ぐず夫
ぐず夫
それホンマなん? ワシ未だになんも覚えてへんけど。
そもそもワシはそのまんまで良いタイプやけどな。
ダンパ
ダンパ
1つ例を挙げれば、Chromeのデベロッパーツールの使い方など覚えるだけで、どこを変更すべきか見るだけで一通り分かるようになります。実際はなかなか難しいかもしれませんが、1つ覚えるとポンポンとできるようになるのがこの分野の面白いところですので、色々試してみてね!

ぐず夫
ぐず夫
PONPON!
ま、ワシはなんもせんけどな!

ちなみに真っ白になってしまった時は?

トリ師匠
トリ師匠
サーバーがMixhostの人限定やけど、対処法も一応のっけとくな。
下のページを参考に、修正失敗したファイル(今回はstyle.css)を直接直してやるか、バックアップからサイトを直してやるのが1番簡単かの。

☆ バックアップも取らず真っ白白になってしまった!の場合…

☆ バックアップがあるならコチラから!

CSSカスタマイズ終了!

トリ師匠
トリ師匠
ホンマに最低限に留めたけど、どやった?

ぐず夫
ぐず夫
さぁ?
こんくらいなら変更いらんのと違う?

トリ師匠
トリ師匠
まぁ初心者さんに一通り触ってもらうのが目的みたいなもんじゃからな。
今回はこんな感じでええんちゃうか。

そんなら次回は、解析ツールの導入に入るで。
ではまた~♪


☆ いよいよ次は10章やで!


この記事はワシが書いたで !!
ぐず夫ちゃん

誰もがWordPressでサイトを作れたらええな~!と思ってブログを始めたで。記事のやり取りはふざけてるけど、中身はいたって真面目やで堪忍な! 要望はTwitterで受け付け中♪ noteもやってるで!

オリジナルグッズも売ってるでコチラからどぞ!

Posted by ぐず夫