テーマ共通 CSSでなめらかに点滅させる方法（コピペＯＫ）
この記事では、CSSを使って要素をなめらかに点滅させる方法を紹介します。ウェブデザインにおいて、要素を点滅させるアニメーションは視認性を高め、注目を引く際に便利です。当サイトでは、トップページの検索フォーム上の文字を点滅させるためにこのカス...
テーマ共通 
テーマ共通 CSSでテキストリンクをおしゃれに装飾する方法
この記事では、WordPressのブロックエディタを使用して、テキストリンクをスタイリッシュに装飾する手順を解説します。CSSを活用することで統一感のあるリンクデザインを簡単に作成可能です。ワードプレスにはテーマによってボタンを作る機能があ...
テーマ共通 タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
必要な情報へ迅速にアクセスするために便利なのが「タブ切り替え」機能。この記事では、HTMLとCSSだけでタブ切り替えを自作する方法を紹介します。通常はJavaScriptを使って実装されますが、HTMLとCSSだけでもシンプルなタブ切り替え...
テーマ共通 CSSで疑似要素に影をつける方法｜box-shadowとdrop-shadowの違いを比較
この記事では、CSSを使って疑似要素に影をつける方法を紹介します。使用するCSSプロパティは、以下の2つです。box-shadowfilter: drop-shadow一般的に要素に影をつけるにはbox-shadowプロパティがよく使われま...
Cocoon ファーストビューを印象的に！Cocoonアピールエリアをフルスクリーン＆動きのあるデザインにする方法
Cocoonのアピールエリアは背景画像やテキストを表示することでサイト全体の第一印象を決める大事なパーツ。ここをうまく活用すれば訪問者の関心をグッと引き寄せることができます。この記事では、アピールエリアをフルスクリーン化し、視線を集める印象...
テーマ共通 【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集
ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！
テーマ共通 同じページ内にジャンプ！HTMLを利用したアンカーリンクの設定方法
この記事では、アンカーリンクの設定方法と効果的な使い方について解説します。アンカーリンクはページ内の特定の位置や他のページの特定の場所に直接ジャンプするリンクのことです。ユーザーが目的の情報に素早くアクセスできるため、長いページやナビゲーシ...
Cocoon 【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる？OGP設定方法
SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは？イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。
Cocoon Cocoonカスタマイズの基本｜HTML・CSSの編集とワードプレスをバックアップする方法
ワードプレスのカスタマイズは、サイトの見た目や使いやすさをぐっと向上させてくれます。特にHTMLやCSSを編集することで、細かなデザイン調整やレイアウトの変更も可能に。でも、「どこに書いたらいいの？」「間違えたら元に戻せるの？」と不安になる...
テーマ共通 Webデザインの強い味方！ChromeデベロッパーツールでCSSセレクタを調べる方法
このような方向けの記事ですCSSを使ったカスタマイズに興味があるHTMLとCSSの基本を知りたいデベロッパーツールの使い方を学びたいWebデザインやサイトカスタマイズにおいて、「要素のCSSセレクタを調べる」ことは必須スキルです。「デベロッ...
アフィリエイト Pochipp Pro（ポチッププロ）｜無料版との違い・価格・導入手順まで詳しく紹介
アフィリエイトリンクを簡単・おしゃれに表示できる人気プラグインPochipp（ポチップ）。Pochipp Proにアップグレードすると、無料版では使えないセール情報の自動取得やAmazon口コミリンク表示など、ブログ収益を劇的に伸ばす機能が...
設定 エックスサーバーでワードプレスのパーマリンク変更｜SEOに与える影響と対策
パーマリンクの構造を「日付＋投稿名」から「投稿名」に変更したいと思っている。しかし、正確な手順や影響が分からずに悩みとなっている方向けの記事となります。パーマリンク変更の方法や注意点、SEOへの影響などについて解説します。この記事で分かるこ...
設定 エックスサーバー｜サブドメイン設定で２つめのブログ（複数サイト）を作る方法
この記事で分かることエックスサーバーを利用して複数サイトを作る方法エックスサーバーでサブドメインを設定する方法サブドメインにワードプレスをインストールする方法もうひとつブログを作りたいな～ブログを運営してしばらくすると、別のジャンルに方向転...
テーマ共通 ワードプレスの「追加CSSクラス」を活用！特定のブロックにだけスタイルを適用する方法
ワードプレスのブロックエディタで、特定のブロックに独自のデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます。この記事では、初心者でも分かりやすいようにクラス追加の基本と具体的な実例を交えなが...
設定 エックスサーバーで常時SSL化｜https化・リダイレクト・サブドメイン設定まで解説
ワードプレスを開設したら、まず最初にやるべき重要な設定のひとつが「SSL化（https化）」です。SSL（Secure Sockets Layer）とは、インターネット上の通信を暗号化しデータの盗聴や改ざんを防ぐ技術です。WebサイトをSS...
テーマ共通 CSSのカスタムプロパティを使いこなそう！繰り返し利用できる変数の設定方法
この記事ではCSSカスタムプロパティ（CSS変数）の使い方と、よく使われる値を解説します。CSSカスタムプロパティ（CSS変数）は「設定した値を何度も使えるようにする」仕組み。サイト内で繰り返し登場するプロパティ値（色や数値）を変数にして一...
Cocoon Cocoonのブログカードを自分好みに！見た目を11パターンから切り替えできるCSS簡単カスタム
“必要な情報だけ、シンプルなデザインで”Cocoonのブログカードをもっと自由にカスタマイズしませんか。この記事でご紹介するカスタマイズは、シンプルで見やすい11種類のデザインを、サイドバーからクリック操作だけで切り替え可能。さらに、表示し...
Cocoon Cocoonラベルボックスのデザインを切り替え可能に！クリックで選べる6種類のスタイルを実装する方法
──Cocoonの「ラベルボックス」をもっとおしゃれに。Cocoonテーマに標準搭載されている「ラベルボックス」は、シンプルで使いやすいブロックですが、線の太さや余白、見出しの位置などを少し整えるだけで、ぐっと洗練された印象に変わります。見...
Cocoon Cocoonの通知エリアをカスタマイズ！流れる文字アニメーションとボタンを設定する方法
Cocoonでは、テーマ標準機能を使って通知エリアを簡単に表示できます。通知エリアは、サイト訪問者に重要なメッセージを伝えたり、特定のページへ誘導するための便利な機能です。この記事では、以下の通知エリアのカスタマイズ方法を紹介します。通知エ...
テーマ共通 ワードプレスのパターン（再利用ブロック）機能とは？よく使うデザインをテンプレ化して時短化する方法
ワードプレスの「パターン」機能、使ったことはありますか？これは、特定のブロックやブロックグループを登録して他の投稿やページでも簡単に再利用できる便利な機能です。例えば、よく使う装飾ボックスやボタン付きのコールトゥアクションなどをパターンとし...