mail2

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

岩田です、

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

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

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

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

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

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

まず、外観⇒テーマ編集⇒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はこんな感じです。

賢威 サイドバー 枠 影

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

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

突然ですが、金儲けに興味ありますか?

『お金を稼ぐ方法』を知りたいですか?

● 4日間で165,500円稼いだ秘密...
● 大学生が初月で50万円以上稼げたワケ
● 主婦でも毎月5万円が入金される在宅ワーク
● 芸能人のようにブログで稼ぐ仕組みの作り方
● 60歳のジジイが1日で12,000円稼いだ方法
● 家族に見捨てたれたサラリーマンの起死回生法
● あなたの私生活からお金を生み出す思考法
● 夫婦仲、恋愛にも役立つ人心掌握術
● 会社にバレずにこっそり稼げる副業ビジネス
● 脱サラして家族とずっといれる時間を作る方法
● あなたの夢を現実とする究極の目標設定

など、

インターネットで稼ぐために
必要な情報をふんだんに詰め込んだ
最強のバイブルを僕のメルマガに
登録してくれた方にプレゼントします。

現在、まとめの段階に入っているため、
近いうちに配布することができます。

が、

配布したあとの反響によっては
有料で販売するかもしれません。

そのつもりで作っているので、
無料で手に入れられるのは

"イマ"登録した人だけになるかもです。

ですから、僕の作った最強のバイブルに
興味があり、ネットで稼ぐ情報が

『欲しい!!』

という方は今のうちに登録だけでも
済ませておいてください。

ブログで書いてしまうと、
僕が積み上げてきたノウハウが
パクられてしまいます。

そうなると僕の儲けが減ってしまって、
おいしい思いができなくなる可能性が
出てくるので、メルマガ読者だけに
公開していこうと思います。

メルマガに登録してくれる人数なんて、
日本の人口からすれば、微々たるものですし、
僕の稼ぎに影響を与えることはありません。

下に表示されるメルマガ登録フォームに

※名前(性)
※メールアドレス(普段使っているもの)

を入力して「今すぐ"登録"する!」ボタンを
クリックしてください。



*お名前(姓)
*メールアドレス

注) 登録いただく名前・メールアドレスは
最先端のセキュリティシステムを使って、
プライバシー保護しますので、ご安心ください。



すぐに折り返し、自動返信メールが
送られてきますので、登録したメールアドレスの
受信ボックスを確認してください。

僕のメルマガではかなり
"強烈なコトバ"を使ったりしているので、
迷惑メールに振り分けられるかもしれません。

万が一、受信ボックスにメールがない場合は
迷惑メールフォルダも確認してみてください。

今後、僕からのプレゼント情報などを
確実に受け取るために、メールの受信設定も
しておいてくださいね!

設定方法はこちらのサイトに
詳しく書かれているので、参考にしてください。

⇒ http://46mail.net/

Facebookへのコメント

mail2