Notion│無料で独自ドメインにして公開する方法

独自ドメインを割り当てるCMSとして広告収入を得る手段としてWordPressが人気ですが、情報をアーカイブするとしては時間がかかりすぎます。 そのまま編集できて、即座に公開できるNotionこそが、情報をまとめるナレッジベースとして優秀な

.comやco.jpの更新料が1円！ドメインの移管方法まとめ│Xserverドメイン

毎年の更新料がかかるドメイン。 どこが一番良いのか？悩みますよね。 個人的に以下のようなサービスを使ってました。 お名前.com ムームードメイン Googleドメイン Cloudflare Registrar そして今、特におすすめなのが

シン・レンタルサーバー for free│マルチサイトを作成する方法

レンタルサーバー「シン・レンタルサーバー for free」 機能的にはほとんど有料のサーバーと遜色ないものの、無料で使えるという革新的なサーバーです。 しかし以下の2つの制限が気になります。 MySQL（データベース）が 5個まで サーバ

WordPress│画像だけ元サイトから参照する方法│All-in-One WP Migration

サイトの移転や複製でプラグインのAll-in-One WP Migrationはよく使われると思います。 しかしサイト全体の容量は画像の数やサイズに比例しますので、下手をすると4GB以上もエクスポートすることも結構あります。 ですので、画像

WordPress│記事を公開したままリライト記事を差し替する方法│Revisionize

公開されている記事をリライトする時は、別記事に書いて後で移し替えるということをしていないでしょうか？ もちろん更新ボタンを押さずとも自動で下書きが保存されるリビジョン機能がありますが、他の人が記事にアクセスしたときに消される可能性もあります

All-in-One WP Migration│SSLのダウンタイム無しでサーバー移転する方法

サーバを変更したい時のやり方を調べると様々な方法がありますよね。 一番シンプルで大胆な方法はネームサーバーを新しいサーバーに切り替えて、データを移行する方法ですが、 この場合SSLを失敗したり、その作業中はサイトが見られないこともあり、あま

SWELL│特定のナビメニューの最後にメニューを追加するカスタマイズ

各種メニューを並べた最後に、お問い合わせボタンを挿入したいことはないでしょうか？ 色んなやり方があるのですが、wp_nav_menu_itemsというフックを使うと 必ず最後にメニューを追加できて、かつお客さんが消したり順番を変えてしまう心

さくらのドメインでサブドメインを海外のレンタルサーバーに接続する方法

さくらのドメインで管理しているドメインで、サブドメインだけ海外のレンタルサーバーに接続するようにしてみました。 結構、苦戦（さくらのドメイン側でサブドメインを作ってしまったミスが原因）したので、その備忘録です。 さくらのドメインでサブドメイ

WordPress│メタキーワード（meta keyword）を追加するカスタマイズ

普段はSEO SIMPLE PACKのプラグインを入れているので、メタキーワード（meta keyword）を追加できるのですが、 他のSEOツールだと廃止されていることが多いです。 そもそもメタキーワード（meta keyword）に効果

SWELL│記事の著者に合わせてプロフィール情報を変更するカスタマイズ

SWELLのサイドバーに表示するプロフィールウィジェットカード。 こちらの情報はウィジェット内の入力とカスタマイザーのSNS情報を入力して表示するカードになります。 しかし記事ごとのライターに合わせて、動的にプロフィール情報を変更したいとい

WordPress│2つのサイトのデータベースを結合する方法

WordPressでのWeb制作において、サイトの状態をまるっと移行できるAll-in-One WP Migrationは特に重宝するツールです。 新規サイトを1から作っていて、クライアントさんから途中で過去のデータベースを使いたい等の要望

WordPress│2つのサイトのデータベースを結合する方法

WordPressでのWeb制作において、サイトの状態をまるっと移行できるAll-in-One WP Migrationは特に重宝するツールです。 新規サイトを1から作っていて、クライアントさんから途中で過去のデータベースを使いたい等の要望

WordPress│コマンドでローカルとリモートのデータを同期する方法

Localというツールでローカル環境でWordPressを作成することがあるのですが、クライアントに見せる場合に面倒だなと思うことが度々あります。 一応LocalのLive Linkというオンラインで閲覧できるツールもありますが、ノートPC

WordPress│コマンドでローカルとリモートのデータを同期する方法

Localというツールでローカル環境でWordPressを作成することがあるのですが、クライアントに見せる場合に面倒だなと思うことが度々あります。 一応LocalのLive Linkというオンラインで閲覧できるツールもありますが、ノートPC

SWELL│アーカイブページにブログパーツを挿入する方法

SWELLの場合、アーカイブページはでは記事一覧しか表示されません。 カテゴリーページのように、タイトル下にブログパーツを挿入したい場合は、以下の方法が考えられます。 子テーマにテンプレートを編集してコンテンツを追加する SWELLのフック

WordPress│Redirectionを使ったリダイレクト設定まとめ

サイトを移転したり、ドメインを変えたり、パーマリンクを変えたときはリダイレクトと作業をします。 リダイレクトをしないとせっかく受けた記事の評価などが引き継がれないので、注意しましょう。 本記事ではRedirectionというプラグインを使っ

WordPress│Redirectionを使ったリダイレクト設定まとめ

サイトを移転したり、ドメインを変えたり、パーマリンクを変えたときはリダイレクトと作業をします。 リダイレクトをしないとせっかく受けた記事の評価などが引き継がれないので、注意しましょう。 本記事ではRedirectionというプラグインを使っ

Figma│無料！サイトをFigmaで再現するツール

HTMLからFigmaに変換するツールはhtml.to.designが有名ですが、有料サービス（制限付きで無料でインポートできる）です。 無料でHTMLからFigmaにコンバートするツールを見つけたので紹介いたします。 HTML to Fi

Figma│無料！サイトをFigmaで再現するツール

HTMLからFigmaに変換するツールはhtml.to.designが有名ですが、有料サービス（制限付きで無料でインポートできる）です。 無料でHTMLからFigmaにコンバートするツールを見つけたので紹介いたします。 HTML to Fi

WordPress│noteのような有料コンテンツを作成する方法

noteのような記事の途中から有料コンテンツを販売する方法はいくつかあります。 例えばコンテンツ販売機能のついたテーマ（例えばJIN:R）を買ったり、 外部サービス（例えばCodoc）を仲介してstripe決済したりです。 しかしWordP

WordPress│noteのような有料コンテンツを作成する方法

noteのような記事の途中から有料コンテンツを販売する方法はいくつかあります。 例えばコンテンツ販売機能のついたテーマ（例えばJIN:R）を買ったり、 外部サービス（例えばCodoc）を仲介してstripe決済したりです。 しかしWordP

Figmaで使えるSWELL用テンプレート

昨今のWeb制作では、ワイヤーフレームからデザイン制作までFigmaで制作を行います。 またコーディング時もやはりFigmaを見て、サイトを制作しますので、Figmaで制作は重要になっています。 例えばサイト制作のベースがSWELLであるな

Figmaで使えるSWELL用テンプレート

昨今のWeb制作では、ワイヤーフレームからデザイン制作までFigmaで制作を行います。 またコーディング時もやはりFigmaを見て、サイトを制作しますので、Figmaで制作は重要になっています。 例えばサイト制作のベースがSWELLであるな

SWELL│特定の画像遅延読み込み（Lazy Load）を除外する方法

SWELLでスクリプト(lazysizes.js)を使って遅延読み込みさせるをONにすると、画像の遅延読み込みができます。 しかしWeb制作において、アイキャッチ画像意外にもファーストビューに画像を置く場合は、その遅延読み込みを除外したい時

SWELL│特定の画像遅延読み込み（Lazy Load）を除外する方法

SWELLでスクリプト(lazysizes.js)を使って遅延読み込みさせるをONにすると、画像の遅延読み込みができます。 しかしWeb制作において、アイキャッチ画像意外にもファーストビューに画像を置く場合は、その遅延読み込みを除外したい時

Emmet│CSSに関するチートシート

Web制作をしている時はコード量がどうしても多くなりますが、 少しでも時短になるようにEmmetの記法を使うことにしています。 ということで、まとめてみました。 Emmet│CSSに関するチートシートまとめ この記事ではEmmetのCSSに

Emmet│CSSに関するチートシート

Web制作をしている時はコード量がどうしても多くなりますが、 少しでも時短になるようにEmmetの記法を使うことにしています。 ということで、まとめてみました。 Emmet│CSSに関するチートシートまとめ この記事ではEmmetのCSSに

SWELL│フルワイドの余白を上下別々で微調整する方法

SWELLでのWEB制作でセクションごとにコンテンツを作ると思います。 その時はフルワイドブロックを使うのですが、そのセクション内の余白の調整が上下、別々に調整できません。 その場合は余白調整はCSSで調整すると思いますが、できればコード量

SWELL│フルワイドの余白を上下別々で微調整する方法

SWELLでのWEB制作でセクションごとにコンテンツを作ると思います。 その時はフルワイドブロックを使うのですが、そのセクション内の余白の調整が上下、別々に調整できません。 その場合は余白調整はCSSで調整すると思いますが、できればコード量

SWELL│記事スライダーを記事で表示する方法

トップページの目玉機能である記事スライダーを使ったことがありますでしょうか？ SWELLのデモサイトでも使われている、記事をスライド表示させる機能ですが、トップページにしか使えません。 この記事スライダーを通常記事でも使えるようにカスタマイ

SWELL│記事スライダーを記事で表示する方法

トップページの目玉機能である記事スライダーを使ったことがありますでしょうか？ SWELLのデモサイトでも使われている、記事をスライド表示させる機能ですが、トップページにしか使えません。 この記事スライダーを通常記事でも使えるようにカスタマイ

WordPress│FTPで本体のバージョンを更新する方法│ダウングレード

WordPressの本体の更新の際に、何らかの原因でインストールが失敗してエラーになってしまうことがあります。 その場合は最悪、サイト事態が表示されない事態になることもあります。 そんな時は以前、または別のWordPressのバージョンに戻

WordPress│FTPで本体のバージョンを更新する方法│ダウングレード

WordPressの本体の更新の際に、何らかの原因でインストールが失敗してエラーになってしまうことがあります。 その場合は最悪、サイト事態が表示されない事態になることもあります。 そんな時は以前、または別のWordPressのバージョンに戻

WordPress│アコーディオンで長い説明文を折りたたむ方法

クチコミなどの文章が長い場合は折りたたむ表示を入れたいですよね。 ということで段落ブロックにアコーディオンを入れてみました。 サンプル 名前motoki特長技術的なことが好きなデザイナーやれることデザイン、コーディング この文章はダミーです

WordPress│アコーディオンで長い説明文を折りたたむ方法

クチコミなどの文章が長い場合は折りたたむ表示を入れたいですよね。 ということで段落ブロックにアコーディオンを入れてみました。 サンプル 名前motoki特長技術的なことが好きなデザイナーやれることデザイン、コーディング この文章はダミーです

WordPress│ボタンを押してモーダルで表示するカスタマイズ

SWELLのテーマをカスタマイズしていて、ボタンを押してブログパーツを表示させたいと思い。 作ってみました。 SWELLに限らず、他のテーマでもカスタマイズ可能です。 サンプル 詳しく見る × WordPressでボタンを押して

WordPress│ボタンを押してモーダルで表示するカスタマイズ

SWELLのテーマをカスタマイズしていて、ボタンを押してブログパーツを表示させたいと思い。 作ってみました。 SWELLに限らず、他のテーマでもカスタマイズ可能です。 サンプル 詳しく見る × WordPressでボタンを押して

WordPress│JSの遅延読み込み方法│Uncaught ReferenceError: hljs is not definedエラーの解消

コードを装飾するhighlight.jsを使っている場合、Uncaught ReferenceError: hljs is not definedというエラー表示されることがあります。 SWELLと同じ製作者のHighlighting Co

WordPress│JSの遅延読み込み方法│Uncaught ReferenceError: hljs is not definedエラーの解消

コードを装飾するhighlight.jsを使っている場合、Uncaught ReferenceError: hljs is not definedというエラー表示されることがあります。 SWELLと同じ製作者のHighlighting Co

WordPress│記事の終わりにバナーを表示するカスタマイズ

ブログにアクセスして、すぐに表示されるバナーは非常に邪魔ですが、 記事を読み終わった後にバナーで訴求するのは効果的だと思います。 サンプル 80％読了したあたりで、画面右下からお問いわせの訴求バナーが出るようにしています。 本記事のカスタマ

WordPress│記事の終わりにバナーを表示するカスタマイズ

ブログにアクセスして、すぐに表示されるバナーは非常に邪魔ですが、 記事を読み終わった後にバナーで訴求するのは効果的だと思います。 サンプル 80％読了したあたりで、画面右下からお問いわせの訴求バナーが出るようにしています。 本記事のカスタマ

WordPress│本文に特定のURLがある場合に文言を表示するカスタマイズ

本記事ではアフィリエイト広告を利用しています。 2023年10月施行の景品表示法（ステマ規制）の対策として、 本文に特定のURLのリンクがある場合はPRの文言を表示するのが良いですよね。 全ての記事に表示するのが一番簡単ですが、必要な記事だ

WordPress│本文に特定のURLがある場合に文言を表示するカスタマイズ

2023年10月施行の景品表示法（ステマ規制）の対策として、 本文に特定のURLのリンクがある場合はPRの文言を表示するのが良いですよね。 全ての記事に表示するのが一番簡単ですが、必要な記事だけに出しわけしたい場合もあると思います。 という

WordPress│1行だけ全幅で背景色を変更する方法

例えばコピーライト部分だけ色を変更したいといったことはないでしょうか？ 実はCSSをうまく使えば1行だけ、全幅で塗りつぶしをするという表現もできます。 サンプル 当記事のフッターのみ、コピーライトの背景色が変化しているはずです。 WordP

WordPress│1行だけ全幅で背景色を変更する方法

例えばコピーライト部分だけ色を変更したいといったことはないでしょうか？ 実はCSSをうまく使えば1行だけ、全幅で塗りつぶしをするという表現もできます。 サンプル 当記事のフッターのみ、コピーライトの背景色が変化しているはずです。 WordP

SWELL│FAQブロックを2列にする方法

構造化データの出力もできるSWELLのFAQブロック。 数が多いと縦長になってしまうのが気になることがありますよね？ そこでCSSを追加して、2列の表示にさせてみました。 サンプル FAQ SWELL以外のテーマでもカスタマイズ対応できます

SWELL│FAQブロックを2列にする方法

構造化データの出力もできるSWELLのFAQブロック。 数が多いと縦長になってしまうのが気になることがありますよね？ そこでCSSを追加して、2列の表示にさせてみました。 サンプル FAQ SWELL以外のテーマでもカスタマイズ対応できます

SWELL│アコーディオンブロックをボタン表示にする方法

SWELLのアコーディオンブロックの見た目を変えたいと思ったことはないでしょうか？ もっとボタン風にすると、よりユーザーに視認され、クリックされるのではないでしょうか？ ということでCSSだけでボタン風にアコーディオンブロックをカスタマイズ

SWELL│アコーディオンブロックをボタン表示にする方法

SWELLのアコーディオンブロックの見た目を変えたいと思ったことはないでしょうか？ もっとボタン風にすると、よりユーザーに視認され、クリックされるのではないでしょうか？ ということでCSSだけでボタン風にアコーディオンブロックをカスタマイズ

SWELL│タイトル上にアイキャッチ画像を表示する方法

SWELLではタイトルの下にアイキャッチ画像が表示されます。 デザインを差別化するにあたって、逆の順序にしたいことはないでしょうか？ 本記事ではSWELLでタイトル上にアイキャッチ画像を表示する方法を紹介します。 SWELLでタイトル上にア

SWELL│タイトル上にアイキャッチ画像を表示する方法

SWELLではタイトルの下にアイキャッチ画像が表示されます。 デザインを差別化するにあたって、逆の順序にしたいことはないでしょうか？ 本記事ではSWELLでタイトル上にアイキャッチ画像を表示する方法を紹介します。 SWELLでタイトル上にア

SWELL│自作の人気記事ランキングカードを作る方法│週間・月間・年間のランキング

SWELLの投稿記事にはPV計測がされています。 投稿リストブロックではそのPVに応じにて人気記事ランキング順に表示できますが、 自作のカードではどのようにするのは迷いますよね？ 本記事はSWELLのPV数を取得しつつ、人気記事ランキングを

SWELL│自作の人気記事ランキングカードを作る方法

SWELLの投稿記事にはPV計測がされています。 投稿リストブロックではそのPVに応じにて人気記事ランキング順に表示できますが、 自作のカードではどのようにするのは迷いますよね？ 本記事はSWELLのPV数を取得しつつ、人気記事ランキングを

SWELL│PC表示でハンバーガーメニューを表示する方法

SWELLのスマホでは3本線のハンバーガメニューが表示されますが、PCでは表示されません。 しかしこのハンバーガーメニュー、実は非表示にされているだけであって、PC版でも表示は簡単です。 そのカスタマイズ方法を記載しておきます。 SWELL

SWELL│PC表示でハンバーガーメニューを表示する方法

SWELLのスマホでは3本線のハンバーガメニューが表示されますが、PCでは表示されません。 しかしこのハンバーガーメニュー、実は非表示にされているだけであって、PC版でも表示は簡単です。 そのカスタマイズ方法を記載しておきます。 SWELL

WordPress│ショートコードを条件分岐する方法

特定のページだけでショートコードを使いたい！ということはないでしょうか？ そもそも自作したコードであれば条件分岐を足すのは容易ですが、 テーマで用意された場合はちょっとわからないですよね。 その場合のカスタマイズを書いてみました。 Word

WordPress│ショートコードを条件分岐する方法

特定のページだけでショートコードを使いたい！ということはないでしょうか？ そもそも自作したコードであれば条件分岐を足すのは容易ですが、 テーマで用意された場合はちょっとわからないですよね。 その場合のカスタマイズを書いてみました。 Word

WordPress│記事下にCSSとJSの入力欄を追加する方法

SWELL等の有料テーマにはよくあるのですが、その記事だけに実装されるCSSとJSの入力欄が欲しいことはないでしょうか？ functions.php等に条件分岐で書いても良いのですが、何かと管理＆把握しやすいこともあるので、 どのテーマにも

WordPress│記事下にCSSとJSの入力欄を追加する方法

SWELL等の有料テーマにはよくあるのですが、その記事だけに実装されるCSSとJSの入力欄が欲しいことはないでしょうか？ functions.php等に条件分岐で書いても良いのですが、何かと管理＆把握しやすいこともあるので、 どのテーマにも

WordPress│クラシックエディタでも使えるカラムを作成する方法

ブロックエディタならカラムブロックを使ってコンテンツを分けて表示することがよくあると思います。 しかしクラシックエディタの場合はその方法が使えません。 ということでHTMLとCSSだけで簡易のカラムを作成してみました。 サンプル 内容1 内

WordPress│クラシックエディタでも使えるカラムを作成する方法

ブロックエディタならカラムブロックを使ってコンテンツを分けて表示することがよくあると思います。 しかしクラシックエディタの場合はその方法が使えません。 ということでHTMLとCSSだけで簡易のカラムを作成してみました。 サンプル 内容1 内

WordPress│メディアクエリを使わずにレスポンシブレイアウトにする方法

CSSを書くときに画面の解像度の合わせて メディアクエリ(例@media screen and (max-width: 768px) {})を使うことが多いと思います。 とにかく記述が長くなりがちなCSS。 メディアクエリを使わずにレスポン

WordPress│メディアクエリを使わずにレスポンシブレイアウトにする方法

CSSを書くときに画面の解像度の合わせて メディアクエリ(例@media screen and (max-width: 768px) {})を使うことが多いと思います。 とにかく記述が長くなりがちなCSS。 メディアクエリを使わずにレスポン

SWELL│scroll-hint.jsを表示するカスタマイズ

SWELLのリッチカラムやテーブルのスクロール表示は、「スクロールできます」という表示が標準機能で搭載されています。 スクロールできる要素は、スマホの表示で重要になります。 縦長になりそうな要素を横スクロールにすることで、長さを減らしてUX

WordPress│Amazonライクなレビューサイトの星の表記カスタマイズ

以前、作ったAmazonライクな星の表記のカスタマイズ。 意外とよく使うので記事化してみました。 ※ちなみにレビューの構造化データとは紐づけていないので悪しからず。 サンプルイメージ 小数点部分の0.25〜0.75の場合は、半分の星が表示さ

WordPress│Amazonライクなレビューサイトの星の表記カスタマイズ

以前、作ったAmazonライクな星の表記のカスタマイズ。 意外とよく使うので記事化してみました。 ※ちなみにレビューの構造化データとは紐づけていないので悪しからず。 サンプルイメージ 小数点部分の0.25〜0.75の場合は、半分の星が表示さ

WordPress│参照した記事にショートコードでカスタムフィールドの値を割り当てる方法

ちょっとしたブログカードであればカスタムブロックを作成するのですが、 ちょっと込み入ったカスタマイズはカスタムフィールドを使用しています。 そんな時にブロックを生かしつつ、カスタムフィールドの値を参照するにあたって 記事パーツを参照しつつ、

WordPress│参照した記事にショートコードでカスタムフィールドの値を割り当てる方法

ちょっとしたブログカードであればカスタムブロックを作成するのですが、 ちょっと込み入ったカスタマイズはカスタムフィールドを使用しています。 そんな時にブロックを生かしつつ、カスタムフィールドの値を参照するにあたって 記事パーツを参照しつつ、

WordPress│クラシックエディタで記事の中に他の記事を参照する方法

SWELLというブロックエディタをメインとしてテーマにはブログパーツというものがあり、 そこで書いた記事を投稿記事や固定記事に参照して使うことができるのでとても便利です。 再利用ブロックと言い換えてもいいと思います。 こういった他の記事を参

WordPress│クラシックエディタで記事の中に他の記事を参照する方法

SWELLというブロックエディタをメインとしてテーマにはブログパーツというものがあり、 そこで書いた記事を投稿記事や固定記事に参照して使うことができるのでとても便利です。 再利用ブロックと言い換えてもいいと思います。 こういった他の記事を参

WordPress│Web制作でおすすめ！Visual Studio Codeの環境構築│phpcs phpcbf

今までVisual Studio CodeでPHPを書いてた時は即効性の高いプラグイン（PHP Intelephense）で自動整形をしていたのですが、 Windows PCからMacBookAirに切り替えたのを機にWordPressのコ

WordPress│Web制作でおすすめ！Visual Studio Codeの環境構築

今までVisual Studio CodeでPHPを書いてた時は即効性の高いプラグイン（PHP Intelephense）で自動整形をしていたのですが、 Windows PCからMacBookAirに切り替えたのを機にWordPressのコ

WordPress│wp-envの環境構築・使い方

いつもはLocalを使ってWeb制作をしているのですが、 PCをMacBookAirに変えたので、公式が推奨しているwp-envの環境構築をしてみました。 結論を言うとクライアントワークはLocalで十分ですが、 テーマやプラグイン、ブロッ

WordPress│wp-envの環境構築・使い方

いつもはLocalを使ってWeb制作をしているのですが、 PCをMacBookAirに変えたので、公式が推奨しているwp-envの環境構築をしてみました。 結論を言うとクライアントワークはLocalで十分ですが、 テーマやプラグイン、ブロッ

WordPress│CSSのコードを結合してインライン化して読み込む方法│Code Snippets

CSSを記述する時は追加CSSに書いたり、子テーマのStyle.cssに書いたり、はたまた自分でファイルを用意して読み込んだりと様々な方法があると思います。 個人的にはfunctions.phpに読み込む条件をつけて（例えばトップページのみ

WordPress│CSSのコードを結合してインライン化して読み込む方法│Code Snippets

CSSを記述する時は追加CSSに書いたり、子テーマのStyle.cssに書いたり、はたまた自分でファイルを用意して読み込んだりと様々な方法があると思います。 個人的にはfunctions.phpに読み込む条件をつけて（例えばトップページのみ

WordPress│ファイルを更新のショートカットを追加するカスタマイズ

Style.cssやFunctions.phpをたまにWordPressの管理画面からコードを書いて保存することがあります。 コードが長い時にいちいちスクロールしてファイルを更新ボタンを押すのが面倒だったので、Ctrl+Sで保存されるように

WordPress│ファイルを更新のショートカットを追加するカスタマイズ

Style.cssやFunctions.phpをたまにWordPressの管理画面からコードを書いて保存することがあります。 コードが長い時にいちいちスクロールしてファイルを更新ボタンを押すのが面倒だったので、Ctrl+Sで保存されるように

フルサイト編集（FSE）の基本的な使い方

昨今、ノーコードが流行っているみたいですが、WordPressでもインタラクティブにサイト制作ができる フルサイト編集（FSE、Full Site Editing）という機能があります。 用意されたブロックエディタだけで、 コードは書かずに

フルサイト編集（FSE）の基本的な使い方

昨今、ノーコードが流行っているみたいですが、WordPressでもインタラクティブにサイト制作ができる フルサイト編集（FSE、Full Site Editing）という機能があります。 用意されたブロックエディタだけで、 コードは書かずに

WordPress│サブドメイン型のマルチサイトの設定方法

サブドメイン型のマルチサイトを作成してみましたので、その備忘録です。 ConoHaのサーバーの場合、パーミッションの関係で他のサーバーより少しだけ面倒です。 マルチサイトの特徴 マルチサイトの特徴を端的に書いておきます。 このサイトの仕組み

WordPress│サブドメイン型のマルチサイトの設定方法

サブドメイン型のマルチサイトを作成してみましたので、その備忘録です。 ConoHaのサーバーの場合、パーミッションの関係で他のサーバーより少しだけ面倒です。 マルチサイトの特徴 マルチサイトの特徴を端的に書いておきます。 このサイトの仕組み

WordPress│目次の文字を削る方法

SEO対策として見出しにキーワードを入れると思うのですが、H2はおろかH3まで入れてしまうことがないでしょうか？ その場合に目次の表示がキーワードで埋め尽くされて見にくくなることがあります。 そこで目次に対して指定したキーワードだけ削るカス

WordPress│目次の文字を削る方法

SEO対策として見出しにキーワードを入れると思うのですが、H2はおろかH3まで入れてしまうことがないでしょうか？ その場合に目次の表示がキーワードで埋め尽くされて見にくくなることがあります。 そこで目次に対して指定したキーワードだけ削るカス

ツール│英語名で出力！パーマリンク生成ツール│DeepL

パーマリンクを英語名にしている場合、 一度、翻訳ツールで変換して、英語名を精査。 その後に小文字に直して、ハイフンで単語を繋げるということをしたことはないでしょうか？ いろいろと手順が嵩むので、専用の変換ツールを作成してみました。 参考例

ツール│英語名で出力！パーマリンク生成ツール│DeepL

パーマリンクを英語名にしている場合、 一度、翻訳ツールで変換して、英語名を精査。 その後に小文字に直して、ハイフンで単語を繋げるということをしたことはないでしょうか？ いろいろと手順が嵩むので、専用の変換ツールを作成してみました。 参考例

ツール│ダミー画像ジェネレーター│アイキャッチ画像生成

Webサイト制作をする時に、仮素材を用意することがあります。 ネット上にはそのダミー画像ジェネレーターがたくさんあるのですが、 テキストを打ち込んだり、文字サイズ等調整できるものが欲しくなったので作成してみました。 ツール│ダミー画像ジェネ

ツール│ダミー画像ジェネレーター│アイキャッチ画像生成

Webサイト制作をする時に、仮素材を用意することがあります。 ネット上にはそのダミー画像ジェネレーターがたくさんあるのですが、 テキストを打ち込んだり、文字サイズ等調整できるものが欲しくなったので作成してみました。 ツール│ダミー画像ジェネ

WordPress│ブログカードをアンカーリンクに変換するカスタマイズ

SWELLで関連記事を表示してくれるブログカード。 検索性が高く、タイトルやパーマリンクの修正も動的に対応してくれるので便利ですよね。 ただしSEO対策で考えるとブログカードがいいのか、ストレートにアンカーリンクを設置するのが良いのか？ は

WordPress│ブログカードをアンカーリンクに変換するカスタマイズ

SWELLで関連記事を表示してくれるブログカード。 検索性が高く、タイトルやパーマリンクの修正も動的に対応してくれるので便利ですよね。 ただしSEO対策で考えるとブログカードがいいのか、ストレートにアンカーリンクを設置するのが良いのか？ は

HTML│Pタグの閉じ忘れチェックツール

Pタグのチェックが必要になったのでJavaScriptを書いてツールを作成してみました。 もろもろのHTMLをチェックするツールは世の中にたくさんあると思うのですが、 このツールは単用途ですぐに確認できます。 HTML│Pタグの閉じ忘れチェ

HTML│Pタグの閉じ忘れチェックツール

Pタグのチェックが必要になったのでJavaScriptを書いてツールを作成してみました。 もろもろのHTMLをチェックするツールは世の中にたくさんあると思うのですが、 このツールは単用途ですぐに確認できます。 HTML│Pタグの閉じ忘れチェ

WordPress│ブロックにふわっとフェードインアニメーションを追加する方法

よくコーポレートサイト等を閲覧する時に、スクロールする度にふわっとフェードインしてコンテンツが表示されるという経験はないでしょうか？ こういったアニメーションの追加するプラグインは様々あるものの... 実はCSSとJSだけで簡単にアニメーシ

WordPress│ブロックにふわっとフェードインアニメーションを追加する方法

よくコーポレートサイト等を閲覧する時に、スクロールする度にふわっとフェードインしてコンテンツが表示されるという経験はないでしょうか？ こういったアニメーションの追加するプラグインは様々あるものの... 実はCSSとJSだけで簡単にアニメーシ

WordPress│HTMLファイルを読み込んで表示する方法

WordPressではないCMSのコーディング案件で、HTMLだけ納品する（CMSへの組み込みは不可）というのがあったので、 WordPressを使ってHTMLを組み立てて、表示する仕組みを作ってみました。 意味があるのか？と言われると難し

WordPress│HTMLファイルを読み込んで表示する方法

WordPressではないCMSのコーディング案件で、HTMLだけ納品する（CMSへの組み込みは不可）というのがあったので、 WordPressを使ってHTMLを組み立てて、表示する仕組みを作ってみました。 意味があるのか？と言われると難し

WordPress│特定のページだけJavaScriptを読み込む方法

上書きできて便利なJavaScriptですが、特手のページだけ読み込みさせたい時がありますよね。 そんな時はfunctions.phpをうまく使って条件を付けてあげると良いです。 本記事ではそのやり方を紹介します。 WordPressで特定

WordPress│特定のページだけJavaScriptを読み込む方法

上書きできて便利なJavaScriptですが、特手のページだけ読み込みさせたい時がありますよね。 そんな時はfunctions.phpをうまく使って条件を付けてあげると良いです。 本記事ではそのやり方を紹介します。 WordPressで特定

WordPress│noteライクな会員制サイトの作り方│WP-Members

WordPressで会員制サイトを作るならWP-Membersがおすすめです。 登録されたメンバー限定の記事を公開することができますが、 登録時にアンケートを収集できる 期間限定公開ができる PayPalと連携してサブスクリプション機能が付

WordPress│noteライクな会員制サイトの作り方│WP-Members

WordPressで会員制サイトを作るならWP-Membersがおすすめです。 登録されたメンバー限定の記事を公開することができますが、 登録時にアンケートを収集できる 期間限定公開ができる PayPalと連携してサブスクリプション機能が付