サイトカラーを決めたはいいけど最初から決まっている箇所があって・・
大丈夫！ここから腕の見せ所！そんな所もこだわっていこう！
サイトカラーを決めていざサイトを作っていくと、わたしは気になる箇所が多々でてきました。
なんでここは黒いんだよーならまだマシです。濃い青色など見た日には絶対変えてやる！とメラメラしました笑
とりあえずわたしが変更している箇所のCSSなどを説明したいと思います。
見出しを変更
まず気になったのは見出しでした。見出しはこれですね↑
見出しは既存で入っているものを使っていましたがなんだかしっくりこず、素敵な見出しを使用している方のCSSを拝借しまして、色だけは自分のカラーにしました。
まずはCSSで既存の見出しを削除します。削除CSSはこちらです。
CSSはダッシュボードから「外観」→「テーマエディター」からスタイルシートの一番下にコピペしてください。外観が崩れることがありますので、必ずテキストファイルにコピーをお願いします。
/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}.article～で見出しを指定しているのですが、h2などは消したいものを選んでください。逆に言えば消したくないものを抜いて初期化すればいいかなと思います。
見出しを作成するときに「H1」を選択すると画像のようにH1～H6が出てくると思います。
既存で好きなものがあれば色だけ変更などもできるので削除せずでもいいのかなと思います。ここらへんはご自分で好きなように変更してください。全て削除する場合は上にありますCSSをコピペしてください。
例えばですが、H2、H3の見出しは好きだからそのまま残しておきたいという場合は、.article h4, .article h5, .article h6 {～からコピペしてください。この場合H4～H6の見出しは削除され真っ白になります。
削除された状態から次の工程へ移ります。
大見出しで使っているこちらのCSS
/* 見出しカスタマイズ */
.article h〇 {
position: relative;
padding: 16px 25px 16px 25px;
border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
border-bottom: 4px solid #〇〇〇〇;下の影部分（黄色）
border-right: 4px solid #〇〇〇〇;横の影部分（黄色）
background: #〇〇〇〇;全体の色（水色）
font-size: 22px;文字サイズ
color: #〇〇〇〇;文字色（白）
}
中見出しで使っているこちらのCSS
/* 見出しカスタマイズ */
.article h〇 {
content: "";
position: absolute;
width: 100%;
height: 5px;
left: 0;
background: -webkit-repeating-linear-gradient(135deg, #fff, #fff 3px, #〇〇〇〇（水色） 3px, #〇〇〇〇（水色） 6px, white 6px, white 9px, #〇〇〇〇（黄色） 9px, #〇〇〇〇（黄色） 12px);
background: repeating-linear-gradient(135deg, #fff, #fff 3px, #〇〇〇〇（水色） 3px, #〇〇〇〇（水色） 6px, white 6px, white 9px, #〇〇〇〇（黄色） 9px, #〇〇〇〇 12px);
bottom: -5px;
font-size: 24px;
}#〇〇〇〇には好きなサイトカラーを入力してください。カッコ内はわたしの色です。場所の参考にしてください。
.article h〇の〇には上で削除した見出しの数字を入れてください。
マーカーの色変更
マーカーも既存の色とは少し違います。わたしのサイトカラーではそこまで気にならなったのですが、くすみカラーのサイトなどはまるっきり浮いてしまい、使えないのではないかなと思いました。
赤、青、黄色と決めず全く違う色で使ってもかわいいのではないかなと思います。
/* 見出しカスタマイズ */
.marker { /*黄色マーカー*/
background-color: #〇〇〇〇;
}
.marker-red { /*赤色マーカー*/
background-color: #〇〇〇〇;
}
.marker-blue { /*青色マーカー*/
background-color: #〇〇〇〇;
}
.marker-under { /*黄色アンダーラインマーカー*/
background: linear-gradient(transparent 70%, #〇〇〇〇 70%);
}
.marker-under-red { /*赤色アンダーラインマーカー*/
background: linear-gradient(transparent 70%, #〇〇〇〇 70%);
}
.marker-under-blue { /*青色アンダーラインマーカー*/
background: linear-gradient(transparent 80%, #〇〇〇〇 80%);
}#〇〇〇〇には好きなサイトカラーを入力してください。
赤色マーカー・赤色アンダー、青色マーカー・青色アンダー、黄色マーカー・黄色アンダー
初期の色とは違うのがお分かりいただけるかと思います。
その他変更箇所について
その他はCSSを触らずとも変更できる箇所ではないかなと思います。
まず初めにある「この記事はこんな人におすすめ」がどのページにも存在しているですが、こちらは初めタブ見出しボックスとアイコンリストで出来ています。
また、途中にあるcheckというラベルボックスも色変更が可能でした。
こちらは編集画面右横にある、ブロック編集から文字色からボックスの色まで変更が可能ですので、サイトカラーの時に作ったパレットをぜひ利用してみてください。
コメント