[`yahoo` not found]
Pocket


今回は賢威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

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

dyopan6uwbkqv8y1474779575_1474779652

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

.widget-conts,.post {
border: solid 1.5px #A9A9A9;
box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
padding: 0.5em;
margin-bottom: 1.0em;
border-radius: 5px;
}


赤枠で囲った部分にソースコードが追加されました。
「ファイルを更新」をクリックすると、設定変更が反映されます。

bandicam-2016-09-25-13-09-12-862
下の画像は記事ページの枠(フレーム)の設定変更前の状態です。



こちらは、設定変更後です。明らかに見た目が違いますね。



こちらは、ウィジェットです。
左側は枠線(フレーム)設定変更前、右は変更後です。
その違いがはっきりしていますね。

cdksp0m4wpxqhpw1474778616_1474778741

このCSSコードの変更で影が付くのは、各記事ページの記事の枠と、
ウィジェットのみです。

トップページ、アーカイブ、カテゴリーページの記事の枠に影を付けるには、
別のCSS設定が必要になりますので、後程解説します。

CSSコードについての解説


border:
サイトのページのメイン部分、ウィジェットの枠、線の種類、
太さ、色を設定できます。

solid:実線

PX:枠線の太さ ここでは、1.5px設定になっています。

#〜:枠線の色 この部分はカラーコード表をもとに色を決めていきます。
#A9A9A9に設定されていますが、任意の色に変更することも出来ます。

カラーコード表

box-shadow:
サイトのページのメイン部分、ウィジェットに付ける影の設定が出来ます。
3px 3px 6px rgba(0,0,0,0.4);と数字が記載されています。

左の3pxは、右へのずれ、
中央の3pxは、下へのずれ
右の6pxは、影のぼかしの程度です。

これは基本的に数字を変える必要はありませんが、
書き換えることにより独自のカスタマイズを行えます。
但し、初心者にはこの設定変更は難しいのでお勧めしません。

padding:
余白に関する設定です。
余白の間隔は数字を書き換えることで設定変更が可能です。
内側の余白の調整はこの部分で行います。

margin-bottom:
外側の余白設定調整が出来ます。

border-radius:
記事画面の枠線の角を丸くするコードです。
不要な場合は、この部分はカットして下さい。

記事の枠線に影を付けたら、記事のタイトル、見出し、
本文の文字が左側に偏って表示された時の対処法


枠(フレーム)に影を付けて立体化させるソースコードを紹介しましたが、
よく見ると、記事タイトルの文字が枠の左側ぎりぎりに寄ってしまっています。



記事の見出しと本文も枠の左側に寄ってしまっています。



タイトルや見出し、文章を正常な位置に戻すために、
先ほど「base.css」に入力したソースコードを一部書き換えます。

padding: 0.5em;を削除するか、padding: 40px;と書き換えます。

.widget-conts, .post {
border: solid 1.5px #A9A9A9;
box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
padding: 40px;
margin-bottom: 1.0em;
border-radius: 5px;
}

赤文字はソースコードを書き直した部分です。
「ファイル更新」をクリックし反映させます。

これで、記事のタイトル、見出し、本文が正常な位置に戻りました。





トップページ、アーカイブ、カテゴリーページの記事の枠に影を付ける方法


でもこの状態だと、各記事ページの枠に影が付いただけで、
トップページ、アーカイブ、カテゴリーページの記事の枠に影は付きません。



トップページ、アーカイブ、カテゴリーは別管理ですので、
「base.css」の下の部分に以下のソースコードを付け加えます。

.section-wrap {
border: solid 1.5px #A9A9A9;
box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
border-radius: 5px;
}

「base.css」の画面は以下のようになります。



「ファイル更新」をクリックし反映させます。
これで、トップページ、アーカイブ、カテゴリーの
ページの枠にも影が付けることが出来ました。
これで設定変更は完了です。



※もし、「base.css」のソースコードを変更したのに、
画面が何も変わらないという方がいましたら、
ブラウザのキャッシュクリアをした上で、再読み込みすると反映されるはずです。


この設定変更で、画面の印象はずいぶんと変わります。

サイトのコンテンツの質を上げることはもちろん重要です。
しかし、人はまず、見た目で判断します。
サイトの見た目でそのサイトに対する見る人の印象は大きく変わります。
サイトの見た目が良くないと、誰にも見向きもされなくなってしまいます。

このように少しでもサイトの見た目に気を使って、
他者とは差別化を図っていきましょう。


賢威7カスタマイズ関連記事
賢威7マウスオーバーでリンク画像を白く光らせる方法
賢威7パンくずリストカスタマイズ方法

[`yahoo` not found]
Pocket