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

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

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

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

 

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

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

 

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

 

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

 

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

 

 

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

 

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

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

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

 

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

 

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

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

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

 

 

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

 

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

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

 

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

 

 

 

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

 

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

 

 

 

右のメニューから「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段階　見出しの線の太さ、種類を変える』の記事に戻る