アメブロカスタマイズ

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

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

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

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

 

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

カスタマイズできるCSSのコード部分に下記のような記述があります。

/* (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…二重線

お試しください。

  • この記事を書いた人
  • 最新記事
irodori

ヨリメグ

メール対応・資料作成・Webサイト管理・SNS運用・ライティングまでワンストップ対応できるクリエイティブ秘書&ブロガー。 ブログは、フリーランスお仕事系お役立ち記事を載せています。

おすすめ記事

1

確定申告の季節が近づいてきました。 ちなみに確定申告期間は2020年2月17日(月)から3月16日(月)になります。 確定申告をe-Taxで(電子申告)で行うと、青色申告は10万円の控除増加が期待でき ...

ヨリメグのペライチ 2

ペライチという1枚ページサイトに特化したサービスがあるのですが、そちらで秘書サービスに特化したサイトを作ってみました。 それがこちら↓ これこれ 結構上手に作れたのではないかと自画自賛。 内容がきちん ...

3

著作権が厳しい世の中になってきました。 フリー画像でもお仕事に関するものに使用する写真は「商用フリー」写真であることが利用の条件です。 ネットサーフィンをしていて見つけた商用利用可能なフリー写真サイト ...

4

インターネットで写真やイラストを販売することで、収入を得るストックフォト。 最近では、トッププレイヤーは月30万以上の収入を得ている方もゴロゴロいるそうです。 今回は、ストックフォトについてご紹介しま ...

5

お仕事ブログとしてアメブロを使う方にとって、既存デザインではなく、アメブロのヘッダーは自分のサービスのイメージに合ったものにしたいと思いますよね。 お仕事ブログへのカスタマイズの第一歩は、ヘッダーの設 ...

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

Copyright© イロドリワークス|オンライン秘書サービス , 2020 All Rights Reserved.