WEBST8のブログ

2023/9/19

CSSのfloatプロパティで要素を横並びにする方法

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

CSS

2023/9/19

今回は、知っておきたいCSS セレクタの優先順位・詳細度・継承についてご紹介します。 CSSセレクタとは内部スタイルシートや外部スタイルシートで記述するCSSは、下記のように記述します（下記は内部スタイルシート形式）。上記のセレクタとはスタイルを適用する対象のことです。 h1などのHTML要素のほかHTMLタグのid属性やclass属性、他にも任意の属性などを指定することができます。よく使うセレクタとして、以下の4種 ...

CSS

2023/9/19

CSS擬似クラスと擬似要素および併用可否について

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

WordPress

2023/9/19

ドメイン変更を伴うWordPress引っ越しローカル環境への移行手順

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

WordPressプラグイン

2023/9/19

【BackWPupの使い方】WordPress バックアッププラグイン

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

WordPress

2021/2/8

WordPressで子テーマを作成してカスタマイズする方法

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

WordPress

2023/9/19

【初心者向け】WordPressのおすすめ初期設定を徹底解説

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

その他・ツール類ホームページの作り方

2023/9/19

FTPソフト FileZilla の使い方【Mac・Windows対応】

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

その他・ツール類

2022/9/2

テキストエディタ Atom のインストールとおすすめ初期設定

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

CSS

2023/9/19

【CSS HTML】CSSコードの書き方とプロパティ・タグ一覧

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

SEO

2023/9/19

【SEO対策基本】初心者必見！無料で自分でできるSEOまとめ

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

WordPressエディター操作

2023/9/19

WordPressパーマリンク/スラッグの変更方法＆おすすめ設定

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

WordPressプラグイン

2023/9/19

【Contact Form 7の使い方】問い合わせフォーム作成方法

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

WordPress

2023/8/26

【WordPressメニューバー】作り方とカスタマイズ方法を解説

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

WordPress

2023/9/19

【徹底解説】WordPressテーマ変更・インストール方法

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

WordPress ロリポップ

2023/9/19

【ロリポップ版】WordPressインストール方法・始め方

今回は、格安レンタルサーバー「ロリポップ！」と「ムームードメイン」を利用して独自ドメインにWordPressをインストールする方法を説明していきます。本手順では作成するアカウントが3つあります。アカウント情報を混乱しないようにあらかじめ整理しておきましょう。項目アカウント開設サイトレンタルサーバー「ロリポップ」のアカウント WordPressを使うならロリポップ！簡単インストール完備で楽々スタート！ドメインサービス「ムームードメイン」のアカウント格安ドメ ...

WordPress

2023/9/19

【テーマ自作】WordPress オリジナルテーマの作り方と基本

今回はWordPress(ワードプレス)でオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にワードプレスのテーマの作成方法の基本について説明していきます。 ■今回WordPress化する静的サイトの例ここでは、まずワードプレスの基本のおさらいをしてから、前半に最小構成のテーマの作り方を説明、後半に投稿・固定ページなどの各種テンプレートの追加の仕方を説明していきます。 WordPressとは　基本のおさらい ...

ホームページの作り方

2023/9/19

【ホームページ用語集】初めてでもわかる！ホームページの重要用語を徹底解説！

ホームページの作り方を勉強しようとネットを見たときに「サーバー」とか「ドメイン」とか、用語の意味がよくわからない方もいらっしゃるのではないでしょうか。そこで、ここでは、初心者の方向けにホームページの重要用語を説明していきます。これだけは覚えたいホームページ関連の必須用語ホームページホームページとは、組織や個人の持つウェブサイトのトップページやウェブサイト全体のことです。元々はInternet Explorerなどのウェブブラウザ ...

« Prev 1 … 12 13 14

YouTubeチャンネル開設

PICK UP

個別指導Webスクール

ホームページの作り方・ブログの始め方

【ブログ記事の最適な文字数は？】SEOを考慮した文字数の目安

【ExpressVPNの評判は？】特徴・使用した感想やデメリット

【何が違う？】ブロガーとアフィリエイターの違い・定義と運営目的

ブログの収益化が難しい理由と現状のトレンド・今から間に合うのか

【個人向け】VPN接続とは・メリットデメリットや利用シーン

関連メディアサイト

WEBST8のブログ