アメブロカスタマイズ

アメブロの記事部分を枠で囲む方法

更新日:

今回は、アメブロの記事部分を枠で囲んでみるカスタマイズ方法をお伝えしていきます。

アメブロの記事部分を枠で囲む方法

を設定する前に、カスタマイズができるようにこちらの設定にしておきましょう。

基本の記事部分の囲み設定

/* (3-1-b) メイン背景 内側
--------------------------------------------*/
/* メインエリア背景 内側 レイアウト */
.skin-blogMainInner {
padding: 30px 0 10px;
}

とありますが、こちらのタグの下に下記を書き加えます。

/* (3-1-c) 記事エリア
--------------------------------------------*/
/*記事エリア背景*/
.skin-entryInner{
border:1px solid #cccccc;
background-color: #FFFFFF;
padding: 20px;
margin-left: -20px;
width:100%;
}

記事エリアという部分を追加しました。

カスタマイズ後

こんな感じで直線の線で囲むことができます。

囲み線を丸くする

/* (3-1-c) 記事エリア
--------------------------------------------*/
/*記事エリア背景*/
.skin-entryInner{
border:1px solid #cccccc;

border-radius:10px;
background-color: #FFFFFF;
padding: 20px;
margin-left: -20px;
width:100%;
}

線を丸くするタグを追加すると、角が丸くなります。

border-radius:10px;の数字を変えると、丸くなる大きさが変わりますので、お試しください。

囲み線をドットにする

/* (3-1-c) 記事エリア
--------------------------------------------*/
/*記事エリア背景*/
.skin-entryInner{
border:1px dotted #cccccc;

background-color: #FFFFFF;
padding: 20px;
margin-left: -20px;
width:100%;
}

囲み線をピンクにする

/* (3-1-c) 記事エリア
--------------------------------------------*/
/*記事エリア背景*/
.skin-entryInner{
border:1px solid #ffb6c1;

background-color: #FFFFFF;
padding: 20px;
margin-left: -20px;
width:100%;
}

下線を付けている部分の色コードを変えると、お好みの色で枠線が作れますよ。

線の種類

  • dotted…ドット
  • solid…直線
  • dashed…破線
  • double…二重線








おすすめ記事

1

SNS集客からWeb集客へ時代が変化しつつある中、ホームページサービスにあたらめて注目が集まっています。 WordPress、Jimdo、Ameba Ownd、Wixなどなど色々ホームページ制作のサー ...

2

WordPressを使用する際に、迷うのはデザインテーマ。 それもそのはず。 WordPressのデザインテーマは、日本のみならず世界中で作られています。 本当にたくさんテーマがあるので、どれが良いの ...

3

世界で一つだけ、自分だけのオリジナルのものを作るハンドメイドは、最近人気の起業です。 書籍もたくさん出ていますし、作品をminneやクリーマなどに出展したり自分でショップカートを持って販売しているハン ...

4

レースや枠、ライン画像など無料で使えるWeb素材のリンク集を作ってみました。 自作でチラシやデザイン制作、アメブロカスタマイズを行う際にご利用下さい。 無料・商用利用可能、改変可能、リンク不要のモノを ...

5

ホームページやブログカスタマイズをするとき、デザインパーツ全てを自分で作るのは正直大変です。 そこで登場するのが、市販の素材集。 ヘビロテする本当に使える素材集をご紹介します。 本当に使える可愛いもの ...

-アメブロカスタマイズ
-,

Copyright© Bloomin! , 2018 All Rights Reserved.