borderだってことはわかっておる
枠線＝ボーダー
それくらい理解しているからこそ、この検索キーワードで調べるんです。ただ、bloggerユーザーはどこぞでダウンロードしてきたテンプレートを使用している人ばかりでしょうから、コードを挿入する場所が分からない。私もです。
ですが、bloggerだからといって特殊な場所にコードを入れなくても枠線はつけれます。
.post {
border: solid 1px #000000; /* 線の種類。 */
padding:5px /* 枠線と投稿の間。 */
}
ウィジェットテンプレートを展開して「.post」で検索（Ctrl+F）上記赤字の記述を追加してあげると見事に枠線が追加されます。簡単でしょ？
枠線を角丸にするか
ついでにCSSで角丸にする方法をささっと書きます。
.post {
border: solid 1px #000000; /* 線の種類。 */
padding:5px /* 枠線と投稿の間。 */
border-radius:10px;
}
これで追加されるはずです。
※
border: solid 1px #000000; /* 線の種類。 */
padding:5px /* 枠線と投稿の間。 */
border-radius:10px;
}
これで追加されるはずです。
※
-webkit-border-radius: 50px; //Safari,Chrome// -moz-border-radius: 50px;//Firefox//上記を追加しろと書いてあったり、もういらないよ！と書いてあったり把握しきれていないので、上手く表示されていなかったら追記してあげてください。
※２ paddingが足りないと上手く表示できないようです。
.post {
margin: 0 0 $(post.margin.bottom) 0;
letter-spacing:1px;
line-height:22px;
border: solid 2px #000000;
padding:20px 30px 10px 30px;
border-radius:20px;
}
調節してあげたら無事表示されました。
ついでのついで影をつけてあげる
[CSS]各記事を囲むborderに影を付けてあげた
http://masterpeace21.com/4684
上記サイトを参考にさせてもらいました。
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
を.postに追加してあげれば完璧です。お疲れ様でした。
http://masterpeace21.com/4684
上記サイトを参考にさせてもらいました。
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
を.postに追加してあげれば完璧です。お疲れ様でした。
0 件のコメント:
コメントを投稿