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

現時点のコードは以下の通り:

section.content {
	> div {
		&:nth-of-type(2) {
			padding: 15px;
			font-size: 0.9rem;
			line-height: 170%;
			color: #7b6246;
			font-weight: 400;
		}
	}
	&: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);
		}
	}
}
section.content {
	> div {
		&:nth-of-type(2) {
			> #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%;
						}
					}
				}
			}
		}
	}
}
/*-----*/
@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月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。

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

Instagram Widget

Instagram Widget

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

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

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

インターネット

IPv4,IPv6

データベース

開発

パズル、ゲーム

他

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

Instagram Widget

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

インターネット

IPv4,IPv6

データベース

開発

パズル、ゲーム

他

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