お陰さまで読者数1000名突破!

お陰さまで読者数1000名突破!
メルマガでは主にネットビジネスを中心に稼ぐ方法をお伝えしていますが、ビジネス以外にも健康やスピリチュアルの話もしてます。もし興味がありましたら「ご登録はこちら」ボタンを押して頂けますと幸いです。
岩田龍希

賢威の投稿(コンテンツ枠)部分やサイドバーに枠線や影をつける方法

岩田です、

賢威テンプレートの投稿欄(コンテンツ部分)や
サイドバーに境界線となる「線」がなくて
なんだかさびしいですよね。

私はこの部分が気に入らなかったので
枠線をつけて影もつけてみました。

その方法をここでお話します。

賢威の投稿部分に枠線や影をつける方法

トップページ上にある投稿記事一覧、
メインコンテンツ部分に枠線をつける方法です。

さらに各投稿一覧にも枠線が追加されます。

まず、外観⇒テーマ編集⇒design.css
と、いつものように進んでください。

賢威 画像 はみ出る

その下の部分に下記を記述します。

賢威 投稿 枠線

1つずつ解説します。

border

solid:実線
1px:枠線の太さ
#000:枠線の色

線は実線のほかにも2重線や
点線といったようなものもあります。

padding

パディングというのは一番内側の
見えない枠からの距離のようなものです。

つまり、間隔です。

この数字を変えることで余白を
調整することができます。

box-shadow

これが影をつけている記述です。

左の数字からX軸(右側)へのずれ、
Y軸(下側)へのずれ、影のぼかし度合い、
色の指定をしています。

他のサイトを見てみると

このような記述が出てきますが、
どちらでも可能です。

私は入力が少ない方が楽なので
RGBは使いませんでした。

もっと自分なりのカスタマイズがしたい!

という場合はこちらの記事にCSSコード一覧を
作っておいたので参考にしてください。

見出しにも使えるCSSコード一覧

このCSSコードを記述することで
こんな感じになります。

変更前

賢威 枠線

変更後

トップページ:

賢威 コンテンツ 枠

投稿記事ページ:

賢威 コンテンツ 枠 影

サイドバーに枠線や影をつける方法

こちらもコンテンツ枠と同様に
外観⇒テーマ編集⇒design.cssへ。

一番下に下記のコードを追加してください。

賢威 投稿 枠線

先程のコンテンツ枠の説明の時には
box-shadowの簡単な方を利用しました。

サイドバーではRGBタイプを使ってみました。
どちらでも反映されることを知ってもらいたいからです。

ここで先程なかった新しい記述があります。

margin

これは枠線の外側の間隔です。

border-radius

これは枠線の角を丸くする記述です。

数字=半径(R)

詳しくは先程紹介した
CSSコード一覧の記事に書いています。

テクニックやコツもあるので
是非、参考にしてほしいと思います。

CSSコード一覧でデザインを変更

それで、記述が終わりファイルを更新すると
このようになります。

変更前

賢威 コンテンツ 枠

変更後

賢威 サイドバー 枠

ちなみにどちらも記述した際の
design.cssはこんな感じです。

賢威 サイドバー 枠 影

あとはあなたの好みで調整していってください。
それでは、この辺で。

最後までお読み頂きありがとうございました。

メルマガ読者募集中!

メルマガ読者募集中!
改めまして、岩田です。

ここまで記事を読んで頂いて、
ありがとうございます!

ブログの記事が読まれることは
僕にとって嬉しいことです。

お陰様でブログからメルマガ登録を
してくれる方も多く、読者さんの数も
1000人を超えました。

僕のメルマガではネットビジネスで
副収入を得る方法を配信しています。

他にも健康に関することや
さらに収入を増やすための仕組み作り
なんかも話しています。

もし、興味がありましたら、
下の「詳細はこちら」というボタンを
クリックして頂けると嬉しいです。

詳しいことはそちらに書いています。
(最終更新:2016年4月26日)

Facebookへのコメント

mail2