こんにちは。YOSHITAKA（@YOSHITA19704216）です。
https://ameblo.jp/amecafe2011/entry-11756667839.html?frm=theme
初心者
記事の線を加工したいんですけどCSSで加工できます？
よしたか
CSSを触ったらできますよ。
今日はアメブロのカスタマイズをご紹介します。
「記事の囲み枠を角丸にして、かつ立体的に見えるように影付きにする」
この記事を読むことで
- アメブロの記事の囲み枠を角丸にするCSSがわかります。
- アメブロの記事の囲み枠が立体的に見えるように影付きにするCSSがわかります。
Contents
囲み枠を変更するCSS
編集前後のお話
- 記事エリアの仕切り線
- サイドバーの仕切り線
は通常角張っています。
この角張っているのを変えるにはCSSを
丸く変更するにはどうしたら良いのか・・・・
CSSをコピペで・・・・
- カスタマイズ後は角が丸くなる
- 右の枠線に影がつく
この2つを同時に解決していくCSSを紹介します。
CSSの編集方法
アメブロのＣＳＳの編集の最後に以下の記述を追記します。
.skinArticle, .skin-blogMainInner{
border:1px solid #999999; !important;
box-shadow: 3px 3px 3px #cccccc;
border-radius:10px;
}
※ＣＳＳ編集用デザインスキンのカスタマイズになります。
CSSコードの解説
fa-arrow-circle-right
解説
- border:1px solid #999999; !important;
⇒線の指定 - box-shadow: 3px 3px 3px #cccccc;
⇒影の設定 - border-radius:10px; }
⇒ボーダーの角丸をまとめて指定
border-radius:10px;
⇒10px の値を大きくすると丸みが増します。
赤字の#999999を好みのカラーコードに変更すると枠線の色が変わります。
⇒カラーコードのサイトはコチラ
まとめ
今回はCSS編集のコードと
変更しても良い数字を記載しました。
アメブロの記事ができあがってきたらいろいろと
デザインも触りたくなってくるものです。
いろいろ工夫して使ってみてください。
メルマガも発行していますので
執筆者情報からメルマガも登録して下さい(^^)
