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

DEMO｜サイト型（１カラム・広い）

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

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

スポンサーリンク
Turicco