-
codocで始めるコンテンツ販売！WordPressで有料記事を作成する方法
WordPressブログを運営していると、「有料noteのように自分のコンテンツを販売したい」と考える方は多いのではないでしょうか？ そんな希望を叶えてくれるのが、タグを貼るだけで手軽に記事や動画を有料販売できるサービス…
-
WordPressで簡単にカード形式のリンクを作成する方法！Pz-LinkCardの使い方
今回は、WordPressでブログカードを簡単に作成できるプラグイン「Pz-LinkCard」の使い方を解説します。 Pz-LinkCardを導入することで、内部リンクおよび外部リンクをカード形式で表示できるようになりま…
-
フリーランス・副業で活動する方がブログを始めるメリット・デメリット、AI時代にブログを戦略的に運営する方法
フリーランスや副業で活動している方は、自ら仕事を獲得する必要があるため、収入や仕事量がどうしても不安定になりがちです。 そんな不安定さを解消し、個人としてのビジネス基盤を固めたい方におすすめなのが「ブログの開設」です。 …
-
【画像最適化プラグイン】EWWW Image Optimizerの使い方・設定方法
画像の容量は、Webサイトの表示スピードに大きく影響します。 画像のサイズが大きいままだと、ページの表示に時間がかかってしまうことがあります。 そのため、WordPressサイトに画像をアップロードする際は、あらかじめ画…
-
【実体験】Web制作フリーランスが案件獲得のためにやって効果があったこと・期待外れだったこと
Web制作の学習を終えた人が、最初にして最大の壁だと感じるのが「案件の獲得」ではないでしょうか。 スキルを身につけたものの、案件の獲得方法が分からず、1円も稼げないままWeb制作を諦めてしまう方は少なくありません。 私も…
-
Webpackの開発サーバー（devServer）の基本設定
今回は、Webpackの開発サーバー（devServer）の使い方を解説します。 Webpackを使用して開発する上で、一番のメリットはコードの修正から確認までの時間を最短にできることです。 通常、コードの修正から確認ま…
-
WebpackでCSSファイルをminify（ミニファイ）する方法
今回は、CSSファイルを直接importしてMiniCssExtractPluginで出力している場合のminify設定方法を解説します。 Webpackでは、mode: ‘production’…
-
Webpackの設定ファイルを開発用と本番用で分割する方法
今回は、Webpackの設定ファイルを開発用と本番用で分割する方法を解説します。 設定ファイルを分けるメリットは、環境ごとに最適なビルドプロセスを構築できる点です。 例えば、開発環境では「高速なビルドとデバッグのしやすさ…
-
Webpackの「Asset Modules」機能を使って画像を処理する方法
Webpackは、エントリポイントを起点に依存関係をたどり、複数のJavaScriptファイルを1つにバンドルします。 その過程で、JSやCSSから画像ファイルへの参照を検知すると、それらもプロジェクトのアセットとしてバ…
-
Webpackで出力ファイルにハッシュ値を自動で付ける方法！
今回は、Webpackで出力ファイルにハッシュ値を自動で付ける方法を解説します。 Webpackでは、ブラウザキャッシュへの対策として、バンドルしたファイル名にハッシュ値を付与して出力することが可能です。 また、Html…
-
Webpackでバンドル後のJavaScriptをHTMLに自動で読み込ませる方法
今回は、Webpackでバンドル後のJavaScriptをHTMLに自動で読み込ませる方法を解説します。 正確には、MiniCssExtractPluginなどでCSSを別ファイルとして抽出している場合、これらもすべて自…
-
WebpackでSassをコンパイルする方法
今回は、Webpackを使ってSassをコンパイルする方法をはじめ、コンパイルされたCSSにベンダープレフィックスを付与する方法や、CSSを別ファイルとして出力・管理する方法について解説します。 本記事は、Webpack…
-
【Webpack入門】インストール方法とJavaScriptファイルのバンドル手順
今回から複数回に渡って、モジュールバンドラー「Webpack」の使い方を解説していきます。 Webpackを使うことで、複数のJavaScriptファイルを1つのファイルにまとめられるほか、SassをCSSにコンパイルし…
-
【初心者向け】SEO SIMPLE PACKの使い方・設定方法
今回はシンプルで扱いやすいSEO対策プラグイン「SEO SIMPLE PACK」の使い方について解説します。 「SEO SIMPLE PACK」は、他のSEO対策プラグインと比べて機能を必要最低限のもの（例: ページ毎の…
-
【サロン向け・時間枠予約】WordPressの予約システム「Booking Package」の使い方
サロンやスクールなどを運営していて、Web上で「何時から何時まで」のように予約を受け付けられるようにしたい場合、WordPressを利用しているなら「Booking Package」がおすすめです。 Booking Pa…
-
GoogleカレンダーをWebサイトに埋め込み表示する方法
Googleカレンダーに予定を登録しており、その予定をWebサイト上で共有したいケースもあるかと思います。 たとえば、お店を経営している方が、営業日や休業日、イベントの予定などをお知らせしたい場合です。 そのような場合、…
-
ホームページに定休日カレンダーを実装する方法【HTML・Googleカレンダー・プラグイン】
今回は、ホームページにお店の定休日を発信するのに便利な定休日カレンダーを実装する方法を解説します。 カレンダーを表示することで、テキストで表示するよりも一目で定休日が分かるようになります。 お店のホームページを運営されて…
-
npmとは？Voltaを使ってNode.jsとnpmをインストールする方法
Web制作の勉強をしていると、必ずと言っていいほど「npm」というキーワードを目にすると思います。 Webpackなどのモジュールバンドラーを学んでみようと思った際に、「まずはnpmをインストールしてください」「npmコ…
-
【ノンエンジニア・初心者向け】WordPressとは？メリット・デメリットやインストールの基本的な流れを解説
ブログやホームページを自分で開設したいと考えている方であれば、WordPressの名前を一度は聞いたことがあるかもしれません。 WordPressは現在世界・日本で最も利用されているブログ・ホームページ作成ソフトで、世界…
-
sectionやarticleの使い分け！よく使うセマンティック要素の使い方を初心者向けに解説
コーディングを学び始めた初学書の方にとって、最初に使いどころに迷うのがsectionタグやarticleタグといったセマンティック要素ではないでしょうか？ sectionタグやarticleタグなどは見た目上はdivタグ…
