アメブロ 記事ごとに囲み枠を設定したい | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンインストラクターの川上雄大です。

 

 

アメブロのお話です。

 

記事の中にではなく、サイドバーにでもなく、

 

記事全体に、しかも記事ごとに囲み枠を設定したい場合のお話です。(赤い点線のところ)

 

 

 

プロフィール画像が四角い従来の新デザインの場合は、

(この私のブログがそうです。)

 

CSS編集を

 

.skinArticle {
position:relative;
margin:0px 0px 0px 0px; /* 上 右 下 左 */
padding:0px 12px 0px 12px; /* 上 右 下 左 */
border:1px solid #4dac26;
border-radius:10px;
}

 

といいですね。

 

 

プロフィール画像が丸い、最新デザインの場合は、

 

 

 

こちらのコードで囲めます。

 

 

/* ■記事に枠■ */
.skin-entryInner {
margin:0px; 
padding:20px; 
border:2px solid #aaa;
border-radius: 10px;
}

 

 

ただし、このままだと、広告がこのようにはみ出てしまいます。(赤枠)

 

 

気になる方は、次のCSSコードを追加するといいです。

 

ただし、デザインごとによってコードが異なります。

 

 

 

 

この「2カラム・メニュー左」の場合は、

 

 

 

[data-uranus-layout="columnA"] [data-uranus-layout="mainInner"], [data-uranus-layout="columnA"] [data-uranus-layout="archive"], [data-uranus-layout="columnA"] [data-uranus-layout="users"] {
    padding-left: 30px;
    padding-right: 30px;
}

 

 

を追加するとよいです。

 

 

 

他のレイアウトでは、左から、

 

 

columnA、columnB、columnC、columnD、columnE

 

に変更されるとよいです。

 

 

 


以上、アメブロカスタマイズでした。

 

Instagram

 


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大