[`yahoo` not found]
Pocket

bandicam-2016-09-25-10-47-22-610 今回も賢威7のテンプレートを使って、
ワードプレスで作成したサイトの見た目を良くする方法です。

微細なことかもしれませんが、このような小さい事でも
きちんとやることでサイトの第一印象が大きく変わってきます。

リンクの画像を白く光らせる方法


サイトには様々なリンクや画像が貼られています。
マウスカーソルをリンク画像の上に移動させた時に、
画像が白く光れば、サイトの閲覧者に、「この画像は押せそうだ!」
「リンクがある!」と理解してもらえます。

その方が使い勝手が良くなり、
クリックされる確率は圧倒的に高くなってきます。
もし、リンクが光らないと、大事な部分を見てもらえない可能性があります。

リンクが光ることで閲覧者の反応が良くなり、
サイトの滞在時間を延ばす効果もあります。

以前にも別な記事でリンクを白く光らせる方法はお伝えしましたが、
今回は賢威7に対応した設定方法を解説します。

まずは、ダッシュボードメニューから、「外観」⇒「テーマの編集」
を開きます。

bandicam 2016-08-23 20-56-52-253
画面右側の、ソースコードメニューから「base.css」をクリックします。
これでソースコードの編集画面が開きます。

bandicam-2016-09-24-13-46-07-430

以下のようなソースコードが表示されたら、画面を一番下まで下げます。

bandicam-2016-09-25-08-21-33-578

下記の画像は、ソースコードの画面を一番下まで下げた画像です。
画像には分かりやすいように赤枠を入れています。
この赤枠の位置にCSSソースコードを追加します。

dyopan6uwbkqv8y1474779575_1474779652

以下のソースコードを書き加えます。

bandicam-2016-09-25-09-31-40-502

下記の画像はソースコードを追加したものです。
赤枠が追加した部分です。

bandicam-2016-09-25-09-48-51-366

「ファイル更新」ボタンをクリックすると、設定変更が反映されます。
これでリンク画像やバナーが白く光るようになります。

マウスカーソルをリンク画像やバナーに乗せた時の光具合を調整したい場合は、
下記のソースコードの赤枠で囲った「0.7」の数字を変更すれば、調整できます。

数字が「0」に近くなるほどマウスカーソルを乗せた時に、
より白く光るようになります。

bandicam-2016-09-25-09-31-40-503

このようにリンクの画像やバナーが白く光ると、閲覧者にとっても、
見やすく使い勝手の良いサイトになります。

サイトを作成する場合は、閲覧者の立場にたった使い勝手の良いサイトを
構築していくことで、見る側の機能的価値や感情的価値が高まっていきます。

ぜひ、サイト利用者の立場にたったサイト作りを目指して下さい。

賢威7カスタマイズ関連記事 以下の記事もご覧下さい。
賢威7パンくずリストカスタマイズ方法

賢威7ウィジェットの枠線に影を付ける方法

他にも、簡単なカスタマイズでサイトの見た目を良くする方法はまだありますので、
機会を改めて解説していきます。


[`yahoo` not found]
Pocket