【 CSSでカスタマイズ 】Instagramの最新投稿画像を表示するプラグイン

ども、アメブロカスタマイズのみけねこ（ニャ～♪）です。

前回はプラグインのソースURLにパラメーターをつけることで外観をカスタマイズする方法をご紹介しました。

『【 公開 】Instagramの最新投稿画像を表示するプラグイン』

『【 カスタマイズ方法 】Instagramの最新投稿画像を表示するプラグイン』

今回はCSSでもっと自由にカスタマイズする方法をご紹介します。
CSSを編集できる方はこちらをお試し下さい。

/* 外枠 */
#mkinsta{
position: relative;
width: 280px !important;
height: 220px !important;
border:6px groove #6495ED !important; /* 枠の太さ、種類、色 */
margin: 20px auto !important; /* 枠を中央寄せ、上下の余白を20pxに指定 */
background-color: #FFFFFF !important; /* 背景色　白以外の時に指定 */
}

/*タイトル */
#instattl{
position: absolute;
　/* 以下topとleftは枠の中の位置 */
top: 5px;
left: 10px;
height: 60px !important;
width: 280px !important;
　/* タイトルを指定せずに背景画像を指定 */
background-image: url(http://183.181.8.122/amebloplugin/img/Instagram2.png);
background-repeat: no-repeat;
background-position:center top;
}

/* プロフ画像の枠 */
#instaprofimg {
position: absolute;
top: 75px;
left: 30px;
border: 1px solid #ccc !important; /* 枠の太さ、種類、色 */
width: 90px !important;
height: 90px !important;
}

/* プロフ画像 */
#instaprofimg > img{
width: 90px !important;
height: 90px !important;
border-radius: 45px !important; /* 丸くするため幅の半分の値にします */
-webkit-border-radius: 45px !important;
-moz-border-radius: 45px !important;
}

/* 投稿画像の枠 */
#instaimg{
position: absolute;
top: 65px;
left: 150px;
width: 100px !important;
height: 100px !important;
}

/* 投稿画像 */
#instaimg > img{
padding:3px !important; /* 枠と画像の距離 */
border: 1px solid #ccc !important; /* 枠の太さ、種類、色 */
width: 100px !important; /* 画像の幅 */
height: 100px !important; /* 画像の高さ */
}

/* 名前 */
#instaname{
position: absolute;
top: 192px;
left: 0px;
color: #4682B4 !important; /* 色 */
font-size: 18px !important; /* フォントサイズ */
font-weight: bolder !important; /* フォントの太さを */
width: 280px !important;
height: 40px !important;
text-align: center !important; /* 中央寄せ center以外の時に指定*/
}

/* ID */
#instaid{
position: absolute;
top: 210px;
left: 0px;
font-size: 10px; /* フォントサイズ */
width: 280px!important;
height: 15px!important;
text-align: center; /* 中央寄せ center以外の時に指定*/
}

コメント部分は削除してお使いください。






ナウいカスタマイズを見つけたらご紹介させていただきたいと思います。
みけねこ（ニャ～♪）でした。