HTML・CSSで作るオシャレな境界線スタイル／トップページ作りのアクセントにおすすめ

Cocoon 2.6.9で追加されたスキン「grayish」をご存じですか？ ななふさんが作成された、これまでのCocoonのイメージとは少し違ったシンプルでスタイリッシュなデザイン。とても人気のあるスキンです！ このスキン「grayish

簡単！ブロック機能でCocoonサイト型トップページ作成

これまで、Cocoonでのサイト型トップページの作り方を紹介してきました。 Cocoonで作るサイト型トップページ／オシャレなSWELL風（固定ページ使用） Cocoonでもフルワイドに！セクション背景色をつけてトップページ作成 1回でコピ

サブドメインをSSL化（HTTPSにする）、リダイレクトする方法／エックスサーバー設定

この記事ではサブドメインでSSL設定する方法を解説します。 SSL（Secure Sockets Layer）とはインターネット上の通信を暗号化する技術。通信をSSLにより暗号化することを、「SSL化（HTTPS化）」と言います。 ブログを

ワードプレスのブロック（HTML）にクラスをつけるなら「追加CSSクラス」が超便利！

こんな方におすすめの記事です カスタマイズ初心者 ワードプレスのブロックエディタを使っている ブロックに簡単にクラス名をつける方法を知りたい ブロックエディタユーザーでカスタマイズをされる方、どのようにブロック（HTML）にクラスを追加して

Cocoonウィジェット新着・人気記事に日付を表示する方法（投稿日・更新日）

当記事では サイト型トップページ の記事で使用している、「ショートコードを利用して表示したウィジェット新着記事、人気記事に日付（投稿日・更新日）を表示させる方法」を紹介します。 お問い合わせがありましたので記事で公開します。 ショートコード

Cocoon検索ボックスをアピールエリアに表示する方法

今回は『検索ボックス』をアピールエリアに表示する方法についてご紹介します。 目立つ場所に検索ボックスを置きたい と思っている方のお役に立てる記事となっています。 ＼当サイトのトップページでも表示しています／ 当記事では、検索ボックスを作成す

Pochipp(ポチップ)の使い方／商品リンクの作成方法を画像付きで解説

ポチップは、簡単かつ迅速に商品リンクを作成するための便利なWordPressプラグインです。この記事では、ポチップの基本的な使い方について解説します。 直感的な操作が多くとても使いやすいので、ポチップをこれから使いたい方はご覧ください。 ＼

Cocoonで比較表(テーブル)を作る／背景に記号◎○△×を入れるSWELL風カスタマイズ

この記事はこのような方におすすめ テーマ「Cocoon」を使っている オシャレな比較表を作りたい テーブルを使った表に簡単に◎○△×を入れたい テーマCocoonを使っている方、テーブルを使った表のデザインにお悩みではないでしょうか。 悩め

Cocoon「新着記事（見出し）」「もっと見る」「次のページ」のキャプション（テキスト）を変更する

Cocoonであらかじめ設定されているボタンやキャプションのテキストを変更したいときがあるかと思いますので、変更方法を書いておきます。 当記事はCocoonフォーラムを参考にしています。 コードを記述する場所／Cocoon（子テーマ）のfu

Cocoonでもフルワイドに！セクション背景色をつけてトップページ作成

当記事について 当記事のカスタマイズを反映したサンプルページはこちら。 トップページカスタマイズと組み合わせできるようにしました。 解説とコピペできるコードを有料公開しています。 NEW 実例集ページを作りました。【掲載受付中です】 今回は

サブドメインで新サイトを作る方法／エックスサーバー設定

この記事で分かること 一つのドメインで複数のウェブサイトを運営する方法 エックスサーバーでサブドメインを設定する方法 サブドメンにワードプレスをインストールする方法 ここを解説 もうひとつブログを作りたいな～ ブログを運営していると、別のジ

Cocoon／テーブル(表)の中にリンクボタンを設置する方法

今回はテーブル（表）について。 表の中にリンクボタンを入れたいなぁ。 このような比較表などを作ったときに、例えば公式サイトへのリンクやアフィリエイトリンクを付けたい場合がありますよね。 そんなときにテキストリンクは作れるけどボタンにしたいな

Pochipp(ポチップ)カスタマイズ／リンクボタンを並び替えてアピール

この記事で分かること ポチップのデザイン（ボタン、背景）を整える方法 ポチップのロゴを消す方法 ポチップのリンクボタンを並び替える方法 ここを解説

パーマリンクから日付を削除＆エックスサーバーでリダイレクトする方法

この記事に書いてあること パーマリンクを変更する方法（パーマリンクから日付を削除） 301リダイレクトする方法（サブドメイン、サブディレクトリ） URLなどテキストを一括で置き換える方法 古いスラッグ（パーマリンク）をデータベースから削除す

Cocoonナビカード／横並び、リボンの色変更するカスタマイズ

今回ご紹介するのはCocoonの『ナビカード』。 Cocoonの標準機能ですが、使ったことがない方も多いかと思います。 ナビカードの特徴 表示する記事をピップアップできる便利 斜めがけリボンをつけられる（5種類） ショートコード、またはウィ

もしもアフィリエイト(かんたんリンク)と比較したポチップ基本機能

「ポチップ」と「もしもアフィリエイト」どんな違いがあるの？ このような疑問を解決します。 この記事に書いてあること 「Pochipp(ポチップ)」と「もしもアフィリエイト」の機能比較 Pochipp(ポチップ)の基本機能 Pochipp(ポ

PochippPro(ポチッププロ)で売上アップ期待！具体的な設定方法

実際に使ってみた『便利機能／個人的ベスト3』を追加しました。 Pochipp(ポチップ)を導入した当サイト。 Pochipp(ポチップ)はブロックエディタ専用の商品リンク作成プラグインです このたび有料版Proにバージョンアップしました。

Pochipp(ポチップ)設定方法／Amazonアソシエイト、もしもアフィリエイト経由の違いを解説

ポチップを始めたいけど最初どうやるんだろう... そんな疑問を解決します。 この記事で分かること ポチップのインストール方法 ポチップに必要な初期設定（ASP登録） もしもアフィリエイトを利用しないときは？ Amazonはアソシエイト、もし

CSSセレクタの調べ方／カスタマイズにはデベロッパーツール（クローム開発者ツール）が必須！

この記事で分かること 私がおこなっているカスタマイズの流れ CSSコードの書き方【基本】 セレクタの調べ方（この記事ではクラス名） デベロッパーツールの見方 SWELL風目次デザインのCSS アピールエリアのカスタマイズやサイト型トップペー

ブログ運営・Cocoonカスタマイズ履歴

この記事は当ブログのカスタマイズ履歴と、参考にしたサイトなどを備忘録的にまとめています。 トップページ作成（固定ページ使用） 大きく変更したところのみ抜粋します。 Cocoonトップページに自作タブ切り替えを導入 固定ページ＋タブ切り替えを

Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法

HTML？CSS？どこに書いたらいいの？ 戸惑う方も多いかと思いますので、このページではHTMLやCSSの編集方法とバックアップのとり方をまとめました。 特にCocoonでのカスタマイズが初めての方、慣れていない方はご一読ください。 見たい

Cocoon目次追従／サイドバー固定の目次に垂直スクロールバーを設置する（CSS）

Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。

Cocoonで作るサイト型トップページ／オシャレなSWELL風（固定ページ使用）

お知らせ この記事で作成できるトップページのサンプルはこちら。 当記事のカスタマイズを実装されたサイトを紹介します。 コピペできるコードを有料公開しています。 X（Twitter）のポストに反響いただきました。 最近ブログサイトでよく見かけ

X（Twitter）にサイト画像を表示するには？CocoonのOGP設定

SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは？イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。

同じページ内にジャンプ！アンカーリンクの設定方法／CSSでスムーススクロールもできる

今回はページ内リンクについて。（アンカーリンクとも呼ばれます） ページ内リンク？普通のリンクとは違うの？？ 同じページ内の途中にジャンプするイメージです！例えば下のボタンをクリックしてみてね。（戻るボタンでここに戻ってこれます） 記事の最後

ボックスデザイン（囲み枠）CSSコピペOK！ブログを見やすく装飾

ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！

Cocoonアピールエリア／SWELL風オシャレなトップページ（ファーストビジュアル）を作ってみるカスタマイズ

ここ数年で人気が出てユーザーが増えているワードプレス有料テーマの「SWELL」。 綺麗なサイトデザインやトップページのカスタマイズ性、豊富なブロック機能など魅力的な要素がたくさんあります。 SWELLが欲しい... でもそこは有料テーマで少

Cocoonカラーパレットの色を追加・変更する2つの方法

ワードプレスで記事を書くときに使うカラーパレットについて。 文字の色を変えるとき、ボックスの枠や背景色を変えるときなど誰もが使うところですね！今回はこのパレットの色を変えるカスタマイズについて書いていきます。 Cocoon機能と、PHPを編

Cocoon見出しデザインと装飾をリセットする方法／CSSコピペOK

見出しを好きなデザインに変えたいな～ 今回は記事を読むときに目にする、見出しのデザインについてご紹介します。 この記事で分かること 見出しのデフォルト装飾をリセットする方法 簡単カスタマイズ／見出しでよく使うCSSプロパティ例 見出しのデザ

ワードプレスのリストデザイン（箇条書き）点の色を変える方法

記事を書くときに使われる箇条書きのリスト。 要点を見やすく、伝えやすくするためにどんなサイトでも使われていますね。 今回はリストのデザインを少し変えてみるカスタマイズについて。 具体的には先頭に付く点の色を変えてみます！ 当記事では3つの方

新着記事に一定期間だけ「NEW!」を表示するには／WordPress（ワードプレス）

ブログに来てもらったときにまず見てもらいたいのが新着記事ですね。 記事タイトルの前に、一目で新着記事と分かるようなNEW!をつけたいな。 と思ったけど、ワープレスの設定画面ではこの機能はついていないので、自分でカスタマイズしたいと思います。

Cocoon人気記事ランキングカスタマイズ／ラベル背景色を変更する方法

今回はCocoonの人気記事ランキングのカスタマイズについて。 この2点について書いています ランキング部分を丸くして少し可愛くする 個別に1～3位までのランキング番号部分の背景色を変更する Cocoon人気記事ランキング／カスタマイズのイ

Cocoon吹き出しに影をつけるCSS／box-shadowとfilter:drop-shadowの違い

数多くあるワードプレスのテーマの中でも「Cocoon」は無料なのに高機能でとても使いやすく愛用しています。 各種装飾ボックスの他、例えば次のような吹き出しもプラグインを入れることなく簡単に作れてしまいます。 シンプルなデザインの吹き出しでと

タブ切り替えをHTMLとCSSで実装（JavaScriptなし／複数設置可）

Cocoonでも、有料テーマのようにタブ切り替えできないかな？ CodePenでタブ切り替えを作成してみました。 実際に動作やコードを確認できます See the Pen タブ切り替え by はっちゃん (@hacchan) on Code

テキストリンクをオシャレに装飾（ボタン風＆矢印スタイル）CSSコピペOK

今回はテキストリンクをボタン風に装飾する方法をご紹介します。 WordPressの有料テーマや無料テーマの「Cocoon」には標準でボタンを作れる機能がありますが、今回のカスタマイズはテキストリンクをCSSで装飾し、ボタン風に見せる方法。

CSSで文字をなめらかに点滅させる方法（コピペOK）

この記事では文字をなめらかに点滅させる方法をご紹介します。 当サイトの場合、トップページに表示した検索ボックス上の文字を点滅させるためにこのカスタマイズを導入しています。 ↓この部分の文字を点滅 ＼気になるキーワードで検索／ ゆっくりなめら

Googleアドセンス審査合格のための対策／申請コードの貼り付け方

アドセンスに合格したい アドセンスでの収益化を目的にブログを始めた方が多いかと思います。 この記事では、当サイトを例として合格率を上げるために有効と思われる対策をご紹介します。 当サイトは開設1ヶ月、1回で審査を通過しアドセンスを導入しまし