Instagram Widget

インスタグラム ウィジェット

インスタグラムから9枚の画像を取得してCSSで動作させる

基本形

基本形

マウスオーバーで拡大

スクロール

クロール

現時点のコードは以下の通り:
section.content {
	> div:nth-of-type(2) {
		padding: 15px;
		> p {
			font-size: 0.9rem;
			line-height: 1.3;
			color: #7b6246;
			padding-bottom: 3px;
		}
		> #widgetArea1 {
			max-width: 500px;
			display: grid;
			grid-template-rows: repeat(3,1fr);
			grid-template-columns: repeat(3,1fr);
			gap: 3px;
			> a {
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> #widgetArea2 {
			display: flex;
			flex-wrap: wrap;
			gap: 3px;
			> a {
				max-width: 150px;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> #widgetArea3 {
			max-width: 500px;
			display: grid;
			grid-template-rows: repeat(3,1fr);
			grid-template-columns: repeat(3,1fr);
			gap: 3px;
			> a {
				transition: transform 0.5s;
				> img {
					max-width: 100%;
				}
				&:hover {
					opacity: 1;
					z-index: 1;
					transform: scale(2);
				}
			}
		}
		> #widgetArea4wrap {
			width: 400px;
			height: 400px;
			overflow: hidden;
			@media (width < 460px) {
				width: 300px;
				height: 300px;
			}
			@media (width < 350px) {
				width: 250px;
				height: 250px;
			}
			> #widgetArea4 {
				display: flex;
				flex-direction: column;
				animation-name: widgetRise400;
				animation-duration: 20s;
				animation-iteration-count: infinite;
				@media (width < 460px) {
					animation-name: widgetRise300;
				}
				@media (width < 350px) {
					animation-name: widgetRise250;
				}
				> a {
					width: 100%;
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 100%;
					}
				}
			}
		}
		> #widgetArea5wrap {
			width: 400px;
			height: 400px;
			overflow: hidden;
			@media (width < 460px) {
				width: 300px;
				height: 300px;
			}
			@media (width < 350px) {
				width: 250px;
				height: 250px;
			}
			> #widgetArea5 {
				display: flex;
				width: calc(400px * 9);
				animation-name: widgetCrawl400;
				animation-duration: 20s;
				animation-iteration-count: infinite;
				@media (width < 460px) {
					width: calc(300px * 9);
					animation-name: widgetCrawl300;
				}
				@media (width < 350px) {
					width: calc(250px * 9);
					animation-name: widgetCrawl250;
				}
				> a {
					width: 100%;
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 100%;
					}
				}
			}
		}
	}
	&:nth-of-type(4n - 4) {
		> div:nth-of-type(1) {
			background-color: rgba(100,100,255,0.1);
		}
	}
	&:nth-of-type(4n - 3) {
		> div:nth-of-type(3) {
			background-color: rgba(255,200,150,0.1);
		}
	}
	&:nth-of-type(4n - 2) {
		> div:nth-of-type(1) {
			background-color: rgba(200,200,255,0.1);
		}
	}
	&:nth-of-type(4n -1) {
		> div:nth-of-type(3) {
			background-color: rgba(200,255,100,0.1);
		}
	}
}
/*-----*/
@keyframes widgetRise400 {
	0% {
		margin-top: 0px;
	}
	9.5% {
		margin-top: 0px;
	}
	11.5% {
		margin-top: -400px;
	}
	21% {
		margin-top: -400px;
	}
	23% {
		margin-top: -800px;
	}
	32.5% {
		margin-top: -800px;
	}
	34.5% {
		margin-top: -1200px;
	}
	44% {
		margin-top: -1200px;
	}
	46% {
		margin-top: -1600px;
	}
	55.5% {
		margin-top: -1600px;
	}
	57.5% {
		margin-top: -2000px;
	}
	67% {
		margin-top: -2000px;
	}
	69% {
		margin-top: -2400px;
	}
	78.5% {
		margin-top: -2400px;
	}
	80.5% {
		margin-top: -2800px;
	}
	90% {
		margin-top: -2800px;
	}
	92% {
		margin-top: -3200px;
	}
	99% {
		margin-top: -3200px;
	}
	100% {
		margin-top: 0px;
	}
}
@keyframes widgetRise300 {
	0% {
		margin-top: 0px;
	}
	9.5% {
		margin-top: 0px;
	}
	11.5% {
		margin-top: -300px;
	}
	21% {
		margin-top: -300px;
	}
	23% {
		margin-top: -600px;
	}
	32.5% {
		margin-top: -600px;
	}
	34.5% {
		margin-top: -900px;
	}
	44% {
		margin-top: -900px;
	}
	46% {
		margin-top: -1200px;
	}
	55.5% {
		margin-top: -1200px;
	}
	57.5% {
		margin-top: -1500px;
	}
	67% {
		margin-top: -1500px;
	}
	69% {
		margin-top: -1800px;
	}
	78.5% {
		margin-top: -1800px;
	}
	80.5% {
		margin-top: -2100px;
	}
	90% {
		margin-top: -2100px;
	}
	92% {
		margin-top: -2400px;
	}
	99% {
		margin-top: -2400px;
	}
	100% {
		margin-top: 0px;
	}
}
@keyframes widgetRise250 {
	0% {
		margin-top: 0px;
	}
	9.5% {
		margin-top: 0px;
	}
	11.5% {
		margin-top: -250px;
	}
	21% {
		margin-top: -250px;
	}
	23% {
		margin-top: -500px;
	}
	32.5% {
		margin-top: -500px;
	}
	34.5% {
		margin-top: -750px;
	}
	44% {
		margin-top: -750px;
	}
	46% {
		margin-top: -1000px;
	}
	55.5% {
		margin-top: -1000px;
	}
	57.5% {
		margin-top: -1250px;
	}
	67% {
		margin-top: -1250px;
	}
	69% {
		margin-top: -1500px;
	}
	78.5% {
		margin-top: -1500px;
	}
	80.5% {
		margin-top: -1750px;
	}
	90% {
		margin-top: -1750px;
	}
	92% {
		margin-top: -2000px;
	}
	99% {
		margin-top: -2000px;
	}
	100% {
		margin-top: 0px;
	}
}
/*-----*/
@keyframes widgetCrawl400 {
	0% {
		margin-left: 0px;
	}
	9.5% {
		margin-left: 0px;
	}
	11.5% {
		margin-left: -400px;
	}
	21% {
		margin-left: -400px;
	}
	23% {
		margin-left: -800px;
	}
	32.5% {
		margin-left: -800px;
	}
	34.5% {
		margin-left: -1200px;
	}
	44% {
		margin-left: -1200px;
	}
	46% {
		margin-left: -1600px;
	}
	55.5% {
		margin-left: -1600px;
	}
	57.5% {
		margin-left: -2000px;
	}
	67% {
		margin-left: -2000px;
	}
	69% {
		margin-left: -2400px;
	}
	78.5% {
		margin-left: -2400px;
	}
	80.5% {
		margin-left: -2800px;
	}
	90% {
		margin-left: -2800px;
	}
	92% {
		margin-left: -3200px;
	}
	99% {
		margin-left: -3200px;
	}
	100% {
		margin-left: 0px;
	}
}
@keyframes widgetCrawl300 {
	0% {
		margin-left: 0px;
	}
	9.5% {
		margin-left: 0px;
	}
	11.5% {
		margin-left: -300px;
	}
	21% {
		margin-left: -300px;
	}
	23% {
		margin-left: -600px;
	}
	32.5% {
		margin-left: -600px;
	}
	34.5% {
		margin-left: -900px;
	}
	44% {
		margin-left: -900px;
	}
	46% {
		margin-left: -1200px;
	}
	55.5% {
		margin-left: -1200px;
	}
	57.5% {
		margin-left: -1500px;
	}
	67% {
		margin-left: -1500px;
	}
	69% {
		margin-left: -1800px;
	}
	78.5% {
		margin-left: -1800px;
	}
	80.5% {
		margin-left: -2100px;
	}
	90% {
		margin-left: -2100px;
	}
	92% {
		margin-left: -2400px;
	}
	99% {
		margin-left: -2400px;
	}
	100% {
		margin-left: 0px;
	}
}
@keyframes widgetCrawl250 {
	0% {
		margin-left: 0px;
	}
	9.5% {
		margin-left: 0px;
	}
	11.5% {
		margin-left: -250px;
	}
	21% {
		margin-left: -250px;
	}
	23% {
		margin-left: -500px;
	}
	32.5% {
		margin-left: -500px;
	}
	34.5% {
		margin-left: -750px;
	}
	44% {
		margin-left: -750px;
	}
	46% {
		margin-left: -1000px;
	}
	55.5% {
		margin-left: -1000px;
	}
	57.5% {
		margin-left: -1250px;
	}
	67% {
		margin-left: -1250px;
	}
	69% {
		margin-left: -1500px;
	}
	78.5% {
		margin-left: -1500px;
	}
	80.5% {
		margin-left: -1750px;
	}
	90% {
		margin-left: -1750px;
	}
	92% {
		margin-left: -2000px;
	}
	99% {
		margin-left: -2000px;
	}
	100% {
		margin-left: 0px;
	}
}
/*-----*/
主な初期手順:
Instagram Business ID を取得
グラフAPIエクスプローラでアクセストークン取得
https://developers.facebook.com/tools/explorer/
アクセス許可
instagram_basic
エンドポイントにアクセス
GET https://graph.facebook.com/v20.0/(ビジネスID)?fields=name,media.limit(9){caption,media_url,thumbnail_url,permalink}&access_token=(アクセストークン)
アクセストークンデバッガーで有効期限なし(無期限)のアクセストークン取得
https://developers.facebook.com/tools/debug/accesstoken
2019年12月初版
2024年5月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。