SNS · SNS · Blanc Nail
検索…
カタログ 統計
CATALOG › UI Components › SNS
SNS
ソーシャルリンク、シェアボタン、フィード埋め込み。
3
Patterns
UI Components
Group
isValid=0
Verified
CSS
Animation
01
SNS — Follow Cards 3-Up
sns-follow-cards
SNS で最新情報をチェック
𝕏
@studio_jp
速報 ・ 開発裏話 ・ イベント告知。
12.4K フォロワー →
📷
@studio.daily
日々の風景と、スタッフのスナップ。
8.2K フォロワー →
▶
Studio Channel
講座 ・ チュートリアル ・ メイキング。
5.7K 登録者 →
- パターン名: SNS — Follow Cards 3-Up
- 概要: Three brand-coloured SNS cards (X / Instagram / YouTube) with follower counts.
- 使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, group, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: SNSをミニマルに見せる余白重視版 / SNSをリッチに見せるカバー/カード強調版 / SNSをコーポレート向けに整える情報密度高め版 / SNSをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sns-follow-cards"} /-->
CSS:
.section-sns-follow-cards { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sns-follow-cards').forEach((el) => el.dataset.ready = 'true');
02
SNS — Circular Icon Row
sns-icon-row
FOLLOW US
𝕏
📷
f
▶
L
- パターン名: SNS — Circular Icon Row
- 概要: Five circular brand-color SNS icons in a centred row.
- 使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, heading, group, group, paragraph, group, paragraph, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: SNSをリッチに見せるカバー/カード強調版 / SNSをコーポレート向けに整える情報密度高め版 / SNSをカジュアルに見せるアイコン/ラベル強調版 / SNSをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sns-icon-row"} /-->
CSS:
.section-sns-icon-row { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sns-icon-row').forEach((el) => el.dataset.ready = 'true');
03
SNS — Inline Share Bar
sns-share-inline
この記事をシェア
𝕏 Post
f Share
L Send
⎘ コピー
- パターン名: SNS — Inline Share Bar
- 概要: Inline article-share bar with X / Facebook / LINE / copy chips.
- 使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 760px、主要ブロック group, group, paragraph, group, group, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: SNSをミニマルに見せる余白重視版 / SNSをリッチに見せるカバー/カード強調版 / SNSをコーポレート向けに整える情報密度高め版 / SNSをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sns-share-inline"} /-->
CSS:
.section-sns-share-inline { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sns-share-inline').forEach((el) => el.dataset.ready = 'true');
← Previous
Banner / Alert
バナー / アラート
Next →
Profile / User
プロフィール
◈ Blanc Nail
Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。
Foundations
- ヒーロー
- ヘッダー
- フッター
- ナビゲーション
- タイポグラフィ
Content
- フィーチャー
- スタッツ
- コール トゥ アクション
- レビュー / 推薦
- チーム
Business
- 料金プラン
- 商品 / EC
- アクセス / 営業時間
- メニュー (飲食)
- コンタクト
UI Components
- カードレイアウト
- モーダル / アコーディオン
- タブ / セグメント
- バナー / アラート
- SNS
© 2026 Blanc Nail · Built with WordPress + Block Editor v1.0 · isValid=0