サイト型トップページの作り方を公開しています！Check
ホーム

DEMO｜サイト型（デフォルトレイアウト）

2022年12月02日
記事内に広告が含まれています
  • ページタイプは「デフォルト」
    → PCではサイドバーが表示されます
  • カラム数
    • 新着記事：横2列（モバイル1カラム）
    • カテゴリー記事：横2列（モバイル2カラム）
    • 人気記事：横3列（モバイル2カラム）
  • タブ幅は均等幅（※追加カスタマイズ参照）

New post新着記事
Cocoon「見出しボックス」リストマーカー（点）の色を自動調整＆デザイン切り替えカスタマイズ
Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利に。「リストの点がテーマカラーと合わない」「記事の内容に合わせて、デザインを切り替えたい」そんな方...
スクロールアニメーションの作り方｜CSSとIntersectionObserver（交差監視）でふわっと表示
Webサイトでよく見かける、スクロールに合わせて要素がふわっと表示されるフェードインやスライドアニメーション。「自分のサイトでも導入したいけど難しそう…」と思う...
MORE
Categoryカテゴリーごとの記事
Cocoon「見出しボックス」リストマーカー（点）の色を自動調整＆デザイン切り替えカスタマイズ
Cocoonタイムライン（ステップブロック）おしゃれ化カスタマイズ｜最大6種類のデザイン切り替え
カラム固定を解消！Cocoonボックスメニューを2〜6列に切り替える方法
Cocoon通知エリア｜スライド表示（流れる文字）＆ボタン追加でアピールする方法
MORE
スクロールアニメーションの作り方｜CSSとIntersectionObserver（交差監視）でふわっと表示
動きで魅せる！ホバーアニメーションボタン・おしゃれな矢印リンク＆下線スライド（CSS付き）
WordPressパターン機能でラクラク時短！再利用ブロックの使い方と同期・非同期の違い
複数画像を切り替えるフェードスライダーの作り方｜CSSアニメーション（JavaScript不要）
MORE
Googleアドセンス審査用コードの貼り方｜WordPress・Cocoon対応ガイド
WordPressの初期設定｜SEO・セキュリティ・公開前に必ずやることリスト
ポチップ｜Amazon商品検索のやり方まとめ（PA-API・Pochipp Assist・もしもアフィリエイトの違いを比較）
アフィリエイトASP比較2025｜初心者が選ぶべき5社とジャンル別おすすめ
MORE
Popular人気記事
【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集
複数画像を切り替えるフェードスライダーの作り方｜CSSアニメーション（JavaScript不要）
タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
動きで魅せる！ホバーアニメーションボタン・おしゃれな矢印リンク＆下線スライド（CSS付き）
CSSでなめらかに点滅させる方法（コピペＯＫ）
CSSコピペOK！見出しをカスタマイズ｜おしゃれデザインサンプル集【Cocoon対応】
デモページを見る
  1. デフォルト：サイドバーあり 当ページ
  2. １カラム（広い）：サイドバーなし
  3. フルワイド + セクション背景色

トップページ作成の記事に戻る

スポンサーリンク
Turicco