賢威の見出しデザインをカスタマイズする

きちんと見出しで区切られている記事は読みやすいですよね。

なので、記事を書くときは内容のまとまりごとに

見出しをきちんと付けましょう。

 

でも賢威の見出しは、けっこうシンプルですので、

もう少し目立つようにアレンジしてみましょう。

 

ここでは見出しのデザインをカスタマイズする方法についてご紹介します。

 

見出しのデザインは『design.css』で変えます。

 

見出しを変えると言っても、方法は色々あります。

 

 

僕なりに3段階に分けてみました。

 

第1段階 見出しの線、背景色の色だけを変える

第2段階 見出しの線の太さ、種類などを変える

第3段階 背景に画像を使ってデザイン性の高い見出しにする

 

今回は第1段階、第2段階について説明します。

 

画像を使うには、タイトル文字の位置の調整やページごとの編集が必要など

少しレベルの高い作業が必要ですので

第3段階は、またの機会に紹介できればと思います。

 

 

第1段階 見出しの線、背景の色を変える

 

賢威6.2のテンプレートは5種類ありますが

見出し4・5・6はリンク時の色が違うだけで形は同じです。

 

コーポレート版で説明します。

 

賢威見出しデザイン

 

 

見出し2の線の色と背景色を変更してみましょう。

 

WordPress管理画面>外観>テーマ編集をクリックします。

 

賢威テーマ編集

 

 

右のメニューから「design.css」をクリックします。

 

賢威design.css

 

 

『メインコンテンツ(本文)』の「●H2タグ」を変更します。

 

該当する箇所のカラーコードを変更して

『ファイルを更新』をクリックするだけです。

以下も同様に、記述を変更した場合はファイルを更新します。

 

賢威見出しデザイン変更

 

 

カラーコードは、下記のサイトを参考にして下さい。

ColorCodeHex.com

カラーコード表

 

 

コーポレート版以外のテンプレートも同じ要領です。

線の位置、背景は次のとおりです。

変更したい箇所のカラーコードを変えてください。

 

賢威見出しデザイン変更

 

border-top 上の線
border-bottom 下の線
border-left 左側の線
border-right 右側の線
background 背景

 

線の色を黒(#000)から水色(#52b8cf)へ

背景色をグレー(#eaeaea)から薄い水色(#c2e6ee)へ変えました。

 

 

賢威見出し背景色変更

 

<after>

賢威見出し背景色変更

 

イトを確認しても変更されてないことがあります。

そんな時は「更新(プレビュー)しても変更できていない」を参考にしてください。

 

 

 

 第2段階 見出しの線の太さ、種類を変える

 

線の太さや種類を変更するところも同じ『design.css』の「●H2タグ」です。

「●H3タグ」なども同じように変更できます。

 

賢威見出し線変更

 

線の種類は下記の通りです。上記の「solid」の部分を変えてみてください。

solid 一重線
賢威見出し線の種類
 double  二重線
賢威見出し線の種類
 dashed  破線
賢威見出し線の種類
 dotted  点線
賢威見出し線の種類
 groove  立体的にくぼんだ線
賢威見出し線の種類
 ridge  立体的に盛り上がった線
賢威見出し線の種類
 inset  線で囲まれた部分がくぼんで見える
賢威見出し線の種類
 outset  線で囲まれた部分が盛り上がって見える
賢威見出し線の種類
 hidden  線を見えなくする
賢威見出し線の種類

 

・insetとoutsetは四角の線でなければ意味がない

・grooveやridgeは線が太いと立体的に見えない

・黒では立体的にならない。

など、線の太さや色で説明の通りにならない場合があります。

色々ためしてみてください。

 

 

線の色、太さ、種類、背景色を組み合わせれば

いろんなアレンジができると思います。

オリジナルの見出しをつくってみましょう!

 

 

更新(プレビュー)しても変更できていない場合

 

僕はGoogle chromeを使っていますが、うまく更新されないことが多いです。

そんな場合は「更新ボタン」または「F5キー」を押してください。※他のブラウザでも同様

「F5キー」もブラウザのページを更新するボタンです。

 

これは、ブラウザのキャッシュの機能

=開いたウェブページの情報を保存して同じページを素早く開く機能

が働いて生じている問題です。

 

もし「更新ボタン」や「F5キー」を押しても問題が解決されない場合は

スーパーリロードといってキャッシュを無視して強制的に更新する方法があるので

そちらを試してみてください。

 

ブラウザごとにやり方が違うので下記のサイトを参考にしてください。

ホームページ作成、運営管理ガイド「ブラウザの更新 スーパーリロード」

 

『 第2段階 見出しの線の太さ、種類を変える』の記事に戻る

 

 

 

こちらの記事も参考になります

コメントを残す

サブコンテンツ

このページの先頭へ