アメブロ記事の仕切り線をCSS編集箇所にコピペして「角丸」にして「影付きにする」方法

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

https://ameblo.jp/amecafe2011/entry-11756667839.html?frm=theme

初心者
記事の線を加工したいんですけどCSSで加工できます?

よしたか
CSSを触ったらできますよ。

今日はアメブロのカスタマイズをご紹介します。

「記事の囲み枠を角丸にして、かつ立体的に見えるように影付きにする」

 

この記事を読むことで
  • アメブロの記事の囲み枠を角丸にするCSSがわかります。
  • アメブロの記事の囲み枠が立体的に見えるように影付きにするCSSがわかります。

囲み枠を変更するCSS

編集前後のお話

  • 記事エリアの仕切り線
  • サイドバーの仕切り線

は通常角張っています。

 

この角張っているのを変えるにはCSSを

丸く変更するにはどうしたら良いのか・・・・

 

CSSをコピペで・・・・

 

  • カスタマイズ後は角が丸くなる
  • 右の枠線に影がつく

この2つを同時に解決していくCSSを紹介します。

 

CSSの編集方法

アメブロのCSSの編集の最後に以下の記述を追記します。

.skinArticle, .skin-blogMainInner{
border:1px solid #999999; !important;
box-shadow: 3px 3px 3px #cccccc;
border-radius:10px;
}


※CSS編集用デザインスキンのカスタマイズになります。

CSSコードの解説

解説

  • border:1px solid #999999; !important;
    ⇒線の指定

  • box-shadow: 3px 3px 3px #cccccc;
    ⇒影の設定

  • border-radius:10px; }
    ボーダーの角丸をまとめて指定

border-radius:10px;

⇒10px の値を大きくすると丸みが増します。

 

赤字の#999999を好みのカラーコードに変更すると枠線の色が変わります。

⇒カラーコードのサイトはコチラ

まとめ

今回はCSS編集のコードと

変更しても良い数字を記載しました。

 

アメブロの記事ができあがってきたらいろいろと

デザインも触りたくなってくるものです。

 

いろいろ工夫して使ってみてください。

メルマガも発行していますので

執筆者情報からメルマガも登録して下さい(^^)

 

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事