サイト型トップページの作り方を公開しています!
Cocoonカスタマイズ

【Cocoon】サイト型トップページの作り方|ブロックだけで簡単作成(初心者OK・CSSほぼ不要)

Cocoonでブログを始めたものの、「トップページがなんだか普通…」「おしゃれなサイトみたいにしたい」「でもHTMLやCSSは難しそう」そんなふうに感じたことが...
収益化

ASPどれ登録すればいい?初心者は最初この2社でOKでした【迷わない選び方】

アフィリエイトASPの仕組みと選び方をわかりやすく解説。A8.netやafbなど主要5社を比較し、初心者に最適なASPを紹介します。
Webカスタマイズ

CSSだけで作れるおしゃれなボタン・リンクデザイン集【コピペOK】

他のサイトで見かける「このリンクデザインおしゃれ!」や「ボタンの動きがいいな」といった演出。どうやって作られているの?実は、CSSだけで簡単に再現できるデザイン...
Cocoonカスタマイズ

Cocoon新着・人気記事ブロックを横並びにする方法|2〜4列簡単切り替えカスタマイズ

Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
収益化

ポチップでAmazon商品リンクを作る方法|PA-API・Assist・もしも対応の違いと設定手順

ポチップを使ってAmazonの商品を検索したいけれど、最初に戸惑いやすいのが「PA-APIって何?」「Assistって必要なの?」という点ではないでしょうか。こ...
Cocoonカスタマイズ

Cocoon通知エリア(お知らせバー)のカスタマイズ方法|流れるアニメーション・ボタン化・ヘッダー上表示

「Cocoonの通知エリア、なんとなく地味かも…」「自然に目を引く感じにしたい」「お知らせやCTAをもっと見てもらいたい」そんな時におすすめなのが、通知エリアを...
Cocoonカスタマイズ

【Cocoon】白抜きボックスのカスタマイズ|おしゃれデザインを追加+ワンクリックで切り替え

Cocoonで記事を装飾する方法として「段落ブロック」がありますが、「リストやボタンも入れたい…」と思ったとき、中にブロックを組み込む用途には向いていません。装...
収益化

【Cocoon対応】Googleアドセンス審査コードの貼り方|保存できない・確認できない原因と対処法

Googleアドセンスの審査コードは、サイトの <head> 内に設置します。Cocoonなら「アクセス解析・認証」→「ヘッド用コード」に貼り付けるだけです。し...
Cocoonカスタマイズ

Cocoon検索フォーム(検索窓)のカスタマイズ|設置・デザイン・CSS調整まとめ

「検索フォームが少し味気ない…」「ブログ全体の雰囲気に合わせたい」そんなときはデザインを少し変えるだけでも印象が変わります。この記事では、CSSコピペで使える検...
Cocoonカスタマイズ

Cocoon「タブ見出しボックス」をおしゃれにカスタマイズ|ワンクリックで選べるデザイン7種

Cocoonのタブ見出しボックスは、情報整理に便利です。ただ複数記事を書いていると、「便利だけど少し単調に見える」と感じることがあります。そこで、タブ見出しボッ...
収益化

Pochipp Pro(ポチッププロ)は必要?無料版と有料版の違い・料金・導入手順を解説

ポチップは無料版でも商品リンクは作れるけど、こんな悩みが少しずつ増えてきます。セール修正が面倒どのボタンが押されているか分からないクリックされているのに売れない...
収益化

Googleアドセンス審査は何記事で合格?9記事で通過したブログの合格条件と申請手順

Googleアドセンスの仕組みと審査合格のポイントを解説。必要な準備や注意点、不合格時の対処法もまとめています。
Webカスタマイズ

アンカーリンクの作り方|HTMLで同じページ内リンクを設定する方法(WordPress対応)

長い記事を読んでいると、「ここだけ見たいのに、スクロールが長い…」と感じる瞬間があります。そんなときに便利なのが、アンカーリンク(ページ内リンク)。ページの途中...
カスタマイズの基本

【CSS】hoverでゆっくりなめらかに変化するアニメーションtransitionの使い方|主要プロパティ一覧・動かない原因まで解説

Webサイトに動きを付けようとして、「急に切り替わって不自然」「もっと滑らかな動きにしたい」と感じたことはありませんか?そんなときに使うのが CSSのtrans...
Cocoonカスタマイズ

Cocoonタイムライン(ステップブロック)をおしゃれにカスタマイズ|選べる5種類のデザイン

「タイムライン便利だけど、ちょっと地味かも…」今回紹介するのは、Cocoonタイムラインを実用レベルでおしゃれにするカスタマイズ集です。実は少し見せ方を整えるだ...
Cocoonカスタマイズ

Cocoonタブブロックを使いやすくカスタマイズ|均等配置・折り返し・横スクロールをワンクリック化

Cocoonのタブブロックはとても便利なのですが、タブを均等幅にしたいスクロールではなく自動で折り返したいデザインを選びたいと感じたときに標準機能では設定できま...
カスタマイズの基本

CSSアニメーションの基本と使い方【初心者向け】@keyframes・実例・軽くするコツ

Webサイトに動きを加えたいなら、まず覚えておきたいのが CSSアニメーション(@keyframes と animation) です。この2つを理解すれば、Ja...
カスタマイズの基本

CSSの色を一括管理!CSS変数(カスタムプロパティ)の使い方|var・:rootの基本と実践

「色を変えたいだけなのに、同じコードを何ヶ所も修正…」こんな非効率なCSS管理をしていませんか。CSS変数(カスタムプロパティ)を使えば、一箇所の変更だけでサイ...
Cocoonカスタマイズ

Cocoonでフルワイド(全幅レイアウト)|背景だけ横幅いっぱいに広げるCSSとカラムブロック設定

Cocoonのフルワイド(全幅レイアウト)をコピペで実装する方法を解説。背景だけを画面幅いっぱいに広げ、コンテンツは中央配置のまま表示。HTML版・カラムブロック版の手順や横スクロール対策も紹介します。
Webカスタマイズ

スクロールアニメーションでふわっと表示(動きをつける)|CSS+IntersectionObserverで簡単実装【コピペOK】

Webサイトでよく見かける、スクロールに合わせて「ふわっ」と表示されるアニメーション。あの動きが入るだけで、サイトが少しおしゃれに見えたりコンテンツが読みやすく...
スポンサーリンク