WEBST8

今回はWordPressシェアをはじめ、世界・日本で有名なCMSシェアおよびその特徴を紹介します。 (本記事は、2016年10月に執筆したものを2023年5月時点の内容に更新しています。)     2023年5月時点　世界と日本のCMSシェア 2023年5月 世界のCMSシェアランキングトップ10 以下は2023年5月時点の世界のCMSシェアの一覧です。 2023年5月時点での世界のCMSシェアランキング 順位 CMS名 1 WordPress 63.3%(43.2%)　※昨年1位 2 ...

これからホームページを作成しようとしている方で、『自分が作るホームページを、どんな目的で誰にみてもらいどういう行動を起こしてほしいか』、コンセプト作りはとても大切です。 ここでは、これからホームページを作成する方向けに、ホームページのコンセプトの作り方・決め方について説明していきます。     ホームページ・サイトの目的を決める まずはなんのためにホームページを開設するのか目的を明確化しましょう。   ホームページの目的例 サービス中心サイトとして顧客に商品・サービスを購入し ...

今回は、CSSのtransitionプロパティを利用して、下記のように手軽にアニメーションを作成する方法を紹介します。         transitionの使い方 CSSのtransitionプロパティを利用すると、あるHTML要素の状態の変化をアニメーションとして動作させることができます。     3秒間で、右に伸びていって、色が水色からオレンジ色に変化します。カーソルを外すと(スマホの方は別のところにタッチすると)、元に戻っていきます。 & ...

今回は、お名前.comで取得したドメインに対して、ルートドメイン(例. webst8.work)をさくらのレンタルサーバーで利用しつつ、サブドメイン(例. shop.webst8.work)をネットショップサイトとしてBASE(ベイス)で利用するためのDNSの設定手順をご紹介します。     (※)条件の違いにより設定が異なる場合もあります。あくまでこちらで検証した環境での結果であること前提で読み進めてください。       前提条件 今回の前提条件を下記 ...

divやaなどのHTML要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。   CSSでレイアウト装飾するためには上記の違いを理解している必要があります。ここでは、インライン要素・ブロックレベル要素の説明と要素のブロックレベル・インラインの表示形式を変更する際に利用するCSS「display」をについて説明していきます。       HTMLのブロックレベル要素とインライン要素の違い <div>や<a>などの ...

ここでは、HTML要素をpxや%で位置を調整できるCSSプロパティ「position」の使い方について説明します。       位置に関するスタイル position 基準位置を設定してから、要素をpxや%で配置する方法として「position」というスタイルがあります。 positionで配置方法を指定しつつ、位置指定のプロパティ「top(上)、bottom(下)、left(左)、right(右)」と合わせて要素の位置を指定することができます。   ■positi ...

  これから初めて自分でホームページ・Webサイトを作成しようと考えた時に、まず何から手をつけたら良いかわからないという方も多いです。 ここでは自分でホームページを作りたい初心者の方向けに「独自ドメイン＋レンタルサーバーにホームページを作る方法」を紹介していきます。   【PICK UP】サーバーキャンペーン情報     【概要編】Webサイト・ホームページを作成する3つの方法 ホームページを作成する3つの方法には、大きく以下の3つの方法があります。 ■ホームページ ...

今回はHTMLを勉強したい初心者向けにHTMLとはどのようなものか、実際によく使うHTMLタグの一覧を中心に紹介していきます。 HTMLの使い方を覚えてホームページやブログの作成・カスタマイズにぜひ役立ててください。     HTML・CSSはテキストなのでテキストエディターであればなんでも記述することはできますが、Visual Studio Code (以下VS Code)などの開発用エディターを利用するのが一般的です。VS Codeのインストール方法は「【VSCode】Visual ...

良い商品なはずなのに購入までうまく繋がらなくて困っている事業者は多いです。 消費者の購買心理を理解しておけば、うまく自社商品の購買に繋げていくことができます。 本記事では、消費者の購買心理を「認知」「興味」「行動」「比較」「購買」「利用」「愛情」という７つの段階に分けて分析・対策を図っていくマーケティング手法(フレームワーク)の一つであるマインドフローについて説明します。           【概要】消費者の購買心理を7段階に分けたマインドフロー &nbs ...

「ブログを書いてアクセスもあるけど全然申し込みがないなあ」「今のホームページでもっと集客できるようにしたいなあ」と悩んだことはありませんか？   良いセールスレターを作ればよりたくさんの人が商品・サービスを購入してくれます。ここでは、セールスレター(コピーライティング)の基本的な書き方について説明していきます。           【はじめに】セールスレターとは セールスレターとは、「モノやサービスを売るための広告文」のことです。 たとえば、電車 ...

ここでは、ウェブサイトを活用・運営する上でほぼ必須のツールであるGoogle AnalyticsとSearch Consoleの仕組みと違いおよび設定方法を説明します。         Google アナリティクスとGoogle サーチコンソールの違い はじめに、Google アナリティクスとGoogle サーチコンソールの違いについて説明します。   Google アナリティクスは自分のホームページに到着〜離脱するまでの動きを確認できます。   ...

ここでは、HTMLフォームタグ「FORM」の使い方、およびフォームの部品となるINPUTタグ、SELECTタグ、TEXTAREAタグなどについて説明していきます。           フォームタグ form   「お問い合わせはこちら」などでよく見かけるフォームは<form>タグを利用します。   フォームタグの中には、フォーム部品（例. テキスト入力欄、ラジオボタンやドロップダウンメニュー、送信ボタンなど)を追加していきま ...

ここでは、CSSの背景プロパティbackgroundの使い方について紹介します。           よく使うbackgroundプロパティ ここで説明するbackgroundプロパティ一覧は下記の通りです。   カテゴリプロパティ意味 背景に関するスタイルbackground-color背景の色 background-image背景の画像 background-repeat背景の画像の繰り返し background-position背景画像の表 ...

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の使い方やよく使うクラスについて解説していきます。     合わせて読みたい 2019年3月時点で最新のBootstrap4.3の使い方についてはこちらをご参照ください。 https://webst8.com/blog/css-bootstrap4-howto/       ブートストラップ(BootStrap)とは BootStrapの特徴 & ...

PCやタブレット用のレイアウトとスマートフォン用のレイアウトをそれぞれ分けて画面表示しているホームページは多いと思います。   そこで今回はCSSのメディアクエリとViewPort(ビューポート)という機能を利用してレスポンシブデザインを作る方法についてご紹介します。         メディアクエリとViewPortを使ったレスポンシブデザイン CSSメディアクエリを使って横幅サイズで場合分けする PC用の画面とスマートフォン用の画面を切り替えたい人は多い ...

今回は、CSSのfloatを使った要素を横並びにする方法とfloatを解除するclearプロパティをご紹介します。             floatを利用して要素を横並びにする方法   floatを使った横並び <div>タグなどのブロックレベル要素は、基本的に上から下に向かって順番に縦に並んで表示されます。   ■縦に並ぶdivタグ(水色とピンク色)　     ■上記のソースコード [cra ...

HTMLやCSSを学習している初心者の方で必ずと言っていいほどつまずくのが「CSSで指定しているのに設定が効かない」というトラブルです。 CSSでうまくスタイルを適用するためには、セレクタの優先順位や詳細度、継承の特性を理解する必要があります。 今回はCSSセレクタの優先順位・詳細度や継承について紹介します。 ◾️CSSセレクタの優先順位の決まり方 !important インラインスタイルシート形式 style="...." IDセレクタ　 #top{... ...

ここでは、知っておきたいCSSの擬似クラスと擬似要素の基本と併用可否について説明します。       代表的な擬似クラス ある要素が特定の状態にあるときにスタイルを指定する方法に擬似クラスがあります。   例) ある要素に対して、クリックされた状態にある時 ある要素に対して、カーソルが上に乗っている時 などなど。   擬似クラスは、以下のように指定します。 セレクタ:擬似クラス{ 　任意のCSS設定 } で指定します。   代表的なものとしてマウ ...

ドメイン変更を伴うWordPress引っ越しを想定してローカル環境で検証する方は多いかと思います。   ここではレンタルサーバーに構築したWordPressをローカル環境に移行する手順をご紹介します。       移行内容 ここでは下記のケースを想定して進めていきます。   ■引越し元：レンタルサーバーのドメイン (https://keimatsumoto.com) なお、ワードプレスはサブディレクトリ「wpkm」にインストールしているとします。 (htt ...

今回は、Wordpress(ワードプレス)をバックアップするときに定番のプラグイン「BackWPup」の使い方をご紹介します。     この記事を読んでわかること BackWPupの概要とできること BackWPupのインストールと使い方 BackWPupで取得したバックアップの復元方法(関連記事)     ■【BackWPupの使い方】WordPressバックアッププラグイン(動画解説版)     プラグインを導入する上での注意事項 プラグイン ...

WordPress(ワードプレス)のテーマファイルを編集する場合、子テーマを利用することでメンテナンス性が向上します。 ここではWordPressで子テーマを作成する方法を説明していきます。   (※追記)WordPressバージョン4.7から追加CSSという機能が備わりました。簡単なCSSの編集のみでしたら、子テーマを使わず追加CSSから設定を行うことができます。     (※注)子テーマを利用しても、親テーマのテンプレート・仕様が大幅にアップデートされた場合は、子テーマの ...

WordPress(ワードプレス)は色々な設定やプラグインがあり、WordPressインストール後に何をどう設定すれば良いか分からないという人も多いです。 そこでここでは、WordPressインストール後に実施したいおすすめの初期設定をご紹介します。 本記事を読むにあたって (※)本記事は2022年5月に更新した内容です。 ご利用のテーマやプラグインの組み合わせによっては競合する場合がありますのでご注意ください。     WordPressの初期設定概要 今回紹介するWordPress ...

今回は、サーバへファイル転送をするための無料FTPソフトFileZillaのダウンロードから使い方を説明します。FileZillaはMACとWindowsの両方のOSに対応している有名なFTPソフトの一つで、レンタルサーバーへのファイルのアップロードやダウンロードの際に利用します。   ※2021年1月時点での手順になります。     FTPソフト FileZillaの使い方 FTPソフトとは FTPソフトとは簡単にいうと、自分が契約したWebサーバーのフォルダにファイルをア ...

ここでは、HTMLやCSSを編集するのに便利なテキストエディタ「Atom」の紹介とインストール手順などを説明していきます。 Atomの開発終了が宣言 Atomはすでに開発終了が宣言されており、Visual Studio Code(VSCode)への開発一本化が進められています。 今からエディターをインストールするならVSCodeを選択するのがおすすめです。 VS Codeのインストール手順は「【VSCode】Visual Studio Codeのインストール・設定手順」をご参照ください。 (参考)GitH ...

今回は、これから自分でホームページ作成しようとCSSの勉強を始めた初心者の方向けに、CSSの基本と書き方やよく使うプロパティ一覧を紹介します。 ※HTMLを勉強したい方は「【初心者向け】知っておきたいHTMLの基本とよく使うタグ一覧」の記事をご参考ください。   HTML・CSSを書く際は開発用エディターを利用すると便利 HTML・CSSはテキストなのでテキストエディターであればなんでも記述することはできますが、Visual Studio Code (以下VS Code)などの開発用エディターを ...

これからホームページを作成する方、あるいはすでに作成した方も、「ホームページやブログでもっとアクセスを集めたい」「申し込みや問い合わせを増やしたい」「Web集客をしたい」といった希望をお持ちではないでしょうか。   ここでは初心者の方を対象に無料で自分でできるSEO対策について説明していきます。         SEO対策とは検索エンジン最適化 SEOとは、”Search Engine Optimization” （検索エンジン最適化）の略です。自分のホー ...

この記事では、WordPressのパーマリンク変更方法と注意点、おすすめのパーマリンク設定やスラッグとの違いについて説明していきます。   この記事でわかること パーマリンクとは・スラッグとの違い パーマリンクのおすすめ設定 パーマリンクの変更方法 パーマリンクの注意点   ■WordPressパーマリンク/スラッグの変更方法＆おすすめ設定(動画解説版)     WordPressパーマリンクとはページのURLのこと WordPressのパーマリンクとは、固定ページ ...

今回は、Contact Form 7を利用してWordPressに「お問い合わせフォーム」を作成する方法を紹介します。     ここでは下記のようにお問い合わせフォームを作り、WordPress管理者へのメール通知と自動返信を行う設定について説明していきます。   ■全体イメージ   ■Contact Form 7の使い方・その1(動画解説版)   ■Contact Form 7の使い方・その2(動画解説版)   ■【無料スパム対策】Contac ...

WordPress(ワードプレス)で初めてホームページやブログを作成する際にメニューバーをどうやって設定したら良いのかわからない人も多いのではないでしょうか。   今回は、初心者を対象にWordPressで下記のようなメニューバー(グローバルナビゲーション)を作成するやり方を解説していきます。       【基本編】WordPressメニューバーの作り方・追加方法 メニューバー(グローバルナビゲーション)を作る基本的な方法をご紹介します。今回は、下記のようなメニュー ...

WordPressでテーマをインストールする方法は大きく2種類あります。 １つ目は公式テーマを検索でインストールする方法で、2つ目はzipファイルのテーマをアップロードする方法です。今回は２通りのWordPressのテーマインストール・変更方法を説明していきます。     ■WordPress(ワードプレス)テーマのインストール・変更方法(動画解説版)     【はじめに】WordPressテーマはデザインのテンプレート   WordPressで利用する「 ...