「Luxeritasにテーマを変更したので自分好みのデザインに変えたいけど、どうやって良いか分からない」というWordPress初心者の方へ。見出しを中心にしたカスタマイズの一例をお見せします。記事中のCSSを子テーマにコピペすればすぐに利用できます。
注：現在、このサイトは「Luxeritas」でなく「Cocoon」を使用しています。「Cocoonカスタマイズ」を御覧ください。
2018/7/28
「Luxeritas」は表示スピードが大変速く、機能的にも優れていると評判の神テーマでいらっしゃいます。
ただ…見出しのスタイルが管理人の好みに合わない
なんというか、間延びしているので…
(^_^;)
本文と見出しのカスタマイズを致しました。
まずサンプルの記事を作る。
最初に、カスタマイズの効果を確かめるためのサンプル記事を作ります。
確かにWordpress自体にもサンプル記事がついています。
しかし、もっと実際の「自分の」文書に近いサンプルを作らないとカスタマイズ不足に気づけません。
私の場合は、見出しが複数の入れ子構造になったものを作って各種類の見出しが他の見出しと接するようにしました。当サイトでのサンプルは、コチラ
サンプルが出来たら、いよいよカスタマイズを開始します！
( ･`ω･´)
「デベロッパーツール」で試行錯誤してイメージを固める
この後のCSSの書き換え作業は余り直感的でないので、CSSを弄る前に出来上がりのイメージをしっかりと固めておくのが大切です。
イメージを固めるためには、chromeブラウザ上で使える「デベロッパーツール」を使います。
使い方はコチラ
実際のカスタマイズは子テーマのCSSの末尾に
カスタマイズのデザインイメージが固まったところで、実際にCSSを書き換えていきます。
最近では、テーマそのものの書き換えるよりも「子テーマ」を書き換えることが勧められています
幸いというか当然というか「Luxeritas」には子テーマが用意されているので、そちらもDLして有効化しておきます。
さて、ようやく、CSSの編集です。
ダッシュボードの「luxeritas」「子テーマの編集」で子テーマのCSSが表示されるので、
画像は「Luxeritas」を使用
その末尾にカスタマイズを記述していきます。
(CSSは後から書かれた記述が優先されるので)
カスタマイズ結果
右がカスタマイズ結果
CSSの追加変更は下記の通りです。
パディング(padding)やマージン(margin)の数値は4つある場合は「上 右 下 左」1つしかない場合は上下左右全部を表しています
CSSを表示
/* 投稿タイトル下のメタ情報をタイトに */
.post p.meta {
padding: 0px;
margin: 0px 0px 5px 0px;
}
/* 投稿本文の下マージンを小さく */
.post p {
margin: 0px 0px 10px 0px;
}
/* 投稿見出しh2を太字にして上マージンを増加 */
.post h2 {
color: #808080;
font-weight: bold;
margin: 30px 0px 0px 0px;
}
/* 投稿見出しh3を小さく太字にして左ボーダーを薄く */
.post h3 {
color: #808080;
font-size: 20px; font-size: 2.0rem;
font-weight: bold;
padding: 2px 10px 2px 10px;
border-left: 6px solid #aaa;
margin: 15px 0px 0px 0px;
}
/* 投稿見出しh4を小さく(太字は保留)左ボーダーとパディングをクリア */
.post h4 {
color: #666;
font-size: 18px; font-size: 1.8rem;
/*font-weight: bold;*/
padding: 0px;
border-left: none;
border-bottom: 2px solid #ccc;
margin: 10px 0px 0px 0px;
}
/* 見出しh2の一文字目だけを大きく */
.post h2:first-letter {
font-size: 35px; font-size: 3.5rem;
}
/* 見出しh3の一文字目だけを大きく */
.post h3:first-letter {
font-size: 28px; font-size: 2.8rem;
}
/* 見出しh4の一文字目だけを大きく */
.post h4:first-letter {
font-size: 23px; font-size: 2.3rem;
}
編集が終わったら「保存」をクリックするのを忘れずに！！
画像は「Luxeritas」を使用
2018/8/5
実際の紙のページのような
区切り感を出してみました。(具体的な実物を抽象化・メタファーするのがデザインの基本です…よね？)
デフォルトの見出しから、7/28版、8/5版への変化
見出し2と見出し3が
同じデザインだとメリハリが無いので、見出し2を中央寄せにしてみる。
CSSは後から書いたものが有効になるので、まずは前回追加した記述を消さないでその下に新しい記述を追加していき(前回記述のコメントに日付を書いておけば混乱しないでしょう)
前回の記述(20180728)の下に今回の記述(20180805)があります
泥沼にハマったら新しい記述だけ丸っと削除して保存すればリセットできます。
今回のカスタマイズ内容は
下記の通りです。
CSSを表示
/* 投稿タイトル下のメタ情報をタイトに */
.post p.meta {
padding: 0px;
margin: 0px 0px 5px 0px;
}
/* 投稿本文の下マージンを小さく */
.post p {
margin: 0px 0px 10px 0px;
}
/*h2を白背景の中央配置して左ボーダークリア上下にボーダー */
.post h2 {
color:#8c8c8c;
background:#FFF;
text-align: center;
font-size: 25px; font-size: 2.5rem;
font-weight: bold;
padding: 15px 0px 15px 0px;
margin: 50px 0px 20px 0px;
border-top: 3px solid #777;
border-bottom: 1px solid #d8d8d8;
border-left: none;
}
/* h3を小さくして左ボーダーを薄く */
.post h3 {
color: #545454;
font-size: 20px; font-size: 2.0rem;
padding: 2px 10px 2px 10px;
border-left: 6px solid #aaa;
margin: 15px 0px 0px 0px;
}
/* h4を小さく左ボーダーとパディングをクリア */
.post h4 {
color: #666;
font-size: 17px; font-size: 1.7rem;
padding: 0px;
border-left: none;
border-bottom: 2px solid #ccc;
margin: 10px 0px 0px 0px;
}
ここから下のカスタマイズ(一文字目を大きく)は編集画面での不都合が生じたので、やめました。
CSSを表示
/* h2の一文字目だけを濃く大きく */
.post h2:first-letter {
color: #7b7b7b;
font-size: 33px; font-size: 3.3rem;
}
/* h3の一文字目だけを薄く大きく */
.post h3:first-letter {
color: #545454;
font-size: 25px; font-size: 2.5rem;
}
/* h4の一文字目だけを大きく */
.post h4:first-letter {
font-size: 21px; font-size: 2.1rem;
}
カスタマイズにハマると
時間を取られるのはご存知の通り。
今回も太字にして色を薄くしたり、細字に戻して色を濃くしたりとハマりかけた…。
フォントの大きさ濃さ調整(と記事作成)でコレだから、色の調整なんて始めたらもう数日がかりになりそうだ。
記事の更新の方が大切だから、今月はもう禁止！(2018/8/5)
2018/8/18
どうしても…
左ボーダーがあるスタイルになじめず…
太い左ボーダーは付箋を連想させられるので、見出しという感じがしない…左ボーダーを消してみた。
見出し2の上下に何かアクセント(または背景色)が欲しい気がしますが、キリがないのでコレでいきます
⇖このグラデーションのライン⇗
は、高名なサイト「サルワカ」様の記事を参考にさせていただきました。
ページと言うか紙の切り替わりを影っぽいグラデーションで表現したつもり。
背景色を縦のグラデーションにした空っぽのbefore要素を高さ2pxのブロックとして表示しています。
注：2019/6現在はもっと洗練された技法を使用しているので「Cocoonの見出しカスタマイズ」をご覧下さい
あと、コレ↴
うーんキレイだｗ
背景色をグラデーションにした空っぽのafter要素を高さ2pxのブロックとして表示しています。
子テーマのCSSは
こんな感じになっています。コピペしてご利用いただけます
CSSを表示
/* タイトル下のメタ情報をタイトに */
.post p.meta {
padding: 0px;
margin: 0px 0px 5px 0px;
}
/* 本文の左右パディングを設定して下マージンを小さく */
.post p {
padding: 0px 10px 0px 10px;
margin: 0px 0px 10px 0px;
}
/*投稿タイトルを大きく太字に*/
.post h1.entry-title{
font-size: 32px; font-size: 3.2rem;
font-weight: bold;
}
/* h2に上にずらしたグラデーションのボーダー(投影のメタファー) */
.post h2:before {
position: relative;
top:-36px;
content: “”;
display: block;
height: 10px;
background: -moz-linear-gradient(bottom, #efefef, transparent);
background: -webkit-linear-gradient(bottom, #efefef, transparent);
background: linear-gradient(to top, #efefef, transparent);
}
/*h2を中央配置の太字にして左ボーダークリア上にボーダー */
.post h2 {
color:#585858;
background-color:#FFF;
text-align: center;
font-size: 27px; font-size: 2.7rem;
font-weight: bold;
padding: 24px 0px 7px 0px;
margin: 50px 0px 20px 0px;
border-top: 2px solid #a0a0a0;
border-left: none;
}
/* 投稿見出しh3を小さく太字にして左ボーダーを消す */
.post h3 {
color: #696969;
font-size: 20px; font-size: 2.0rem;
font-weight: bold;
padding: 2px 10px 2px 5px;
border-left: none;
margin: 10px 0px 0px 0px;
}
/* h3に左上にずらしたグラデーションの下ボーダー */
.post h3:after {
position: relative;
top:-2px;
left:-5px;
content: “”;
display: block;
height: 2px;
background: -moz-linear-gradient(left, #969696, transparent);
background: -webkit-linear-gradient(left, #969696, transparent);
background: linear-gradient(to right, #969696, transparent);
}
/* h4を小さく太字にして、右パディングを本文とそろえて、左ボーダーをクリア */
.post h4 {
color: #7d7d7d;
font-size: 17px; font-size: 1.7rem;
font-weight: bold;
padding: 0px 0px 0px 10px;
border-left: none;
margin: 10px 0px 0px 0px;
}
2018/8/27
ルーズリーフのような
紙を再現したページデザインで夏の爽やかな配色のつもり
この一ヶ月の変遷はこんな感じです。左から右に新しくなっています。それぞれの日付の項目に子テーマのCSSがあります。
備忘録を兼ねて、カスタマイズ内容を記します
本文を字下げ
本文領域に左右のパディングを設定して、見出しよりも字が下がっているようにしました。
かなりメリハリがついて見た目に安心感がでたように思えます。
背景画像を設定
今回のカスタマイズの目玉その1！
ルーズリーフの横罫をイメージした細い青線の画像↓
小さな背景画像
こいつを投稿領域(「.post」)の背景画像に設定しました。
背景画像を敷き詰めたことで、デザインの余地が広がりました。
見出しの背景を白に
背景画像を設定したので、そのままだと見出しが背景に埋もれてしまいます。
見出し1,2,3の背景を白を設定することで見出しの「視覚的な支配領域」を確保して見出しを目立たせます
見出し2周辺部
今回のカスタマイズの目玉その2！
ルーズリーフの上に、新しいルーズリーフを重ねていくようなイメージです。
見出し直下
グラデーションが綺麗なボーダーは、背景にグラデーションを設定した高さ6pxの空っぽのafter要素で表現。
after要素で表現するボーダーは、見出し本来のボーダーに比べて、位置の微調整がラクチンで良いです。
見出し上部
背景画像を隠して細い青線を配置することでルーズリーフの上端を表現。
背景画像の繰り返しのリズムをここで強制的に新しいリズムに切り替えます。
見出しの背景から、この細い青線を経て切り替わりの線(見出し2そのものの上ボーダー)までをグラデーションで表現しています。
見やすいように上ボーダーを赤い線にしました。
見出しそのものから赤い線までがグラデーション。
子テーマCSSの、この部分ですね
「background: linear-gradient(to top,white 77%,#bafbfb 78% ,#bafbfb 79%,white 79%);」
背景エリアの下から77%までは白一色、そこから78%までは青、そこから79%までは青(これが細い青線になる)、そこから79%までは白で、以降は白一色 という指定になります。
デベロッパーツールで確認しながら、%を調整します。
切り替わりの投影
ページの切り替わりをイメージしたぼやける投影は、前回と同じです。
背景色を縦のグラデーションにした空っぽのbefore要素を高さ2pxのブロックとして表示。
ちょっと見づらいですが、赤いボーダーの上の部分です。
その他の見出し
見出し3と4は前回と同じです。
見出し3の下線は、after要素で表現しています。
次の課題
・shortcode ultimatesのボックスやスポイラーの幅を本文に合わせて細くしたい
・見出しに背景画像(アイコン)を設定したい
子テーマのCSS
を記します。コピペでご利用いただけます。
解答を表示
/* 投稿タイトル下のメタ情報をタイトに */
.post p.meta {
padding: 0px;
margin: 0px 0px 5px 0px;
}
/* 投稿本文の左右パディングを設定して字下げ。下マージンを小さく */
.post p {
padding: 0px 15px 0px 15px;
margin: 0px 0px 10px 0px;
}
/*投稿タイトルを大きく太字にして背景を白に*/
.post h1.entry-title{
background-color:#FFF;
font-size: 32px; font-size: 3.2rem;
font-weight: bold;
}
/* 投稿見出しh2の上ボーダー直上に縦のグラデーション(投影のメタファー) */
.post h2:before {
position: relative;
top:-36px;
content: “”;
display: block;
height: 10px;
background: -moz-linear-gradient(bottom, #efefef, transparent);
background: -webkit-linear-gradient(bottom, #efefef, transparent);
background: linear-gradient(to top, #efefef, transparent);
}
/*投稿見出しh2を中央配置の太字にして左ボーダークリアして上にボーダー背景グラデーションで細線) */
.post h2 {
color:#585858;
background: linear-gradient(to top,white 77%,#bafbfb 78% ,#bafbfb 79%,white 79%);
text-align: center;
font-size: 27px; font-size: 2.7rem;
font-weight: bold;
padding: 24px 0px 0px 0px;
margin: 50px 0px 27px 0px;
border-top: 2px solid #a0a0a0;
border-left: none;
}
/* 投稿見出しh2直下に左右グラデーションの太線 */
.post h2:after {
position: relative;
top: -6px;
left: 0px;
content: “”;
display: block;
height: 6px;
background: -moz-linear-gradient(left,transparent,#3fd0d0,transparent);
background: -webkit-linear-gradient(left,transparent,#3fd0d0,transparent);
background: linear-gradient(to right,transparent,#3fd0d0,transparent);
}
/* 投稿見出しh3を小さく太字にして左ボーダーを消す */
.post h3 {
color: #696969;
background: linear-gradient(to right, white 50%, transparent);
font-size: 20px; font-size: 2.0rem;
font-weight: bold;
padding: 2px 10px 2px 5px;
border-left: none;
margin: 10px 0px 0px 0px;
}
/* 投稿見出しh3直下に横グラデーションの線 */
.post h3:after {
position: relative;
top:-2px;
left:-5px;
content: “”;
display: block;
height: 2px;
background: -moz-linear-gradient(left, #89b9b9, transparent 80%, transparent);
background: -webkit-linear-gradient(left, #89b9b9, transparent 80%, transparent);
background: linear-gradient(to right, #89b9b9, transparent 80%, transparent);
}
/* 投稿見出しh4を小さく太字にして、右パディングを本文とそろえて、左ボーダーをクリア */
.post h4 {
color: #7d7d7d;
font-size: 17px; font-size: 1.7rem;
font-weight: bold;
padding: 0px 0px 0px 10px;
border-left: none;
margin: 10px 0px 0px 0px;
}
/*コンテンツ本文領域に背景画像を設定*/
.post {
background-image:
url(“http://www.swsn-ht.com/draft-blog01/wp-content/uploads/2018/08/895ceb01139d4f774c4e337a7571855d.jpg”)
}
/*shortcode ultimatesのspoilerに背景画像を設定*/
.su-spoiler p {
background-image:
url(“https://so-cha-siki.com/wp-content/uploads/2018/08/Tst40blue.jpg”)
}
無料テーマの作者様達に
ホントのホントに感謝!感謝!感謝！です。
いつか恩返しができますように…
