サーバー・ドメインを使ってホームページを作る
【はじめに】自分でホームページを作成するために知っておきたいこと まずは、ホームページの仕組みや、ホームページを作るために用意しなければならないものを説明していきます。 ホームページを閲覧する […]
初心者向けブログの書き方セミナー
pdfパスワード:webst9 20191222-blog-seminar
お問い合わせフォームの作り方
ここでは下記のようにお問い合わせフォームを作り、WordPress管理者へのメール通知と自動返信を行う設定について説明していきます。 【はじめに】お問い合わせフォーム「Contact Form […]
ホームページで使える素材サイト・加工サイト
利用上の注意 無料素材・加工自由・商用利用可能と書いてあっても全ての行為が許可されているわけではありません。 たとえば「アダルト・公序良俗に反する利用」「素材そのもの(無加工な状態)の有料販売 […]
レンタルサーバー ロリポップでWordPressをインストールする
今回は、レンタルサーバロリポップ!を利用して独自ドメインにWordPressをインストールする方法を説明していきます。 これから作成するアカウントが3つあります。アカウント情報を混乱しないようにあらかじめ整 […]
WordPressの使い方基本
WordPressへログインする WordPressにログインするためには、まずは自分がインストールしたWordPressのサイトの管理画面URLにアクセスする必要があります。初期状態ではWordpress […]
ホームページの作り方・基本
【概要編】Webサイト・ホームページを作成する3つの方法 ホームページを作成する3つの方法には、大きく以下の3つの方法があります。 ■ホームページを作成する3つの方法 WordPressなどの […]
その他導入しておきたいプラグイン
ここでは、WordPress運用時に導入しておきたいプラグインをご紹介します。 ※ご利用のテーマや環境によっては重複する場合がありますので、ここではあくまで一般的な内容になります。 WordPress日本語バグ修正パッチ […]
そのほか最初に設定しておきたい基本設定
ここでは、その他の最初に設定しておきたい初期設定系をご紹介します。 投稿のコメント受付を無効化する設定 初期状態では投稿のコメント受付設定がONになっていて、訪問者からコメントが受付・表示されるように設定されています。 […]
WordPressブロックエディターの使い方
改めて投稿・固定ページの編集画面(エディター)の説明を詳しく説明していきます。 WordPressのエディターは、ブロックといわれる単位でコンテンツを作っていくブロックエディターが採用されています。 &nb […]
WordPressバージョンアップ
WordPressはオープンソースで無料でカスタマイズも自由で何でもできる反面、バージョンアップやセキュリティ対策も自分でしなければなりません。 今回は、これからWordPress(ワードプレス)のバージョンアップをした […]
WordPressプラグインとは
プラグインは、スマートフォンでいうアプリ機能に相当します。お問い合わせ機能や目次機能、スライダー(スライドショー)などWordPress自体が持っていない機能をプラグインという形で追加することができます。 […]
WordPressテーマカスタマイザー
テーマカスタマイザーは、テーマのレイアウト・表示に関する設定を行う機能です。 テーマカスタマイザーは、外観>カスタマイズから、テーマカスタマイザーを開くことができます。 補足)テーマカスタマイ […]
WordPressウィジェットの使い方
WordPressにおけるウィジェットとは、ブログパーツ(部品)のことです。 WordPressでは、バナーやテキスト、検索窓や投稿一覧など任意のパーツをサイドバーなどに追加することができます。   […]
WordPressで固定ページにトップページを割り当てる
トップページは初期状態では、最新の投稿記事が表示されている状態です。トップページを任意の固定ページに割り当てる設定ができます。 ここでは、任意の固定ページをトップページに割り当てる表示設定を行なっていきます。   […]
WordPress固定ページの作り方とメニューバー作成
WordPress 固定ページ機能の使い方 ワードプレスの固定ページとは、「会社情報」や「お問い合わせ」のように、ページ単体で完結できるようなページを作成する際に利用する機能です。固定ページで作成したページは投稿一覧の中 […]
WordPress投稿の使い方
投稿はブログとして利用できる機能です。一般的には、お知らせやコラム、技術情報や時事情報などで使われることが多いです。 WordPressの初期状態では、通常トップページで最新の投稿一覧が表示さ […]
WordPressにテーマ(デザインテンプレート)を適用する
デザインテンプレート「テーマ」を設定する WordPressで利用する「テーマ」とは、一言で言うとデザインのテンプレートのことです。 人に例えると、「服」のようなイメージになります。テーマ(服)を変更するこ […]
WordPressへのログイン方法
WordPressへログインする WordPressにログインするためには、まずは自分がインストールしたWordPressのサイトの管理画面URLにアクセスする必要があります。初期状態ではWordpress管理画面のUR […]
保護中: JavascriptとPHP教材
この投稿はパスワードで保護されているため抜粋文はありません。
1日速習HTML・CSS超入門セミナー
事前準備 Atomエディタのインストール確認 Atomをインストールしていない方は下記ページを参考にAtomエディタをインストールしましょう。 Atomエディタインストールと初期設定 zipフ […]
CSS 総合1-3 外部スタイルシート形式
外部スタイルシート形式 総合レッスン1-2で作成したHTMLファイルをスタイルを調整してください 図2 HTML(CSSあり) 厳密な余白や横幅・高さ・フォントサイ […]
CSS 総合1-2 内部スタイルシート形式
内部スタイルシート形式 総合レッスン1で作成したHTMLファイルをスタイルを調整してください 図2 HTML(CSSあり) 厳密な余白や横幅・高さ・フォントサイズは […]
CSS 総合1 インラインスタイルシート形式
インラインスタイルシート形式で図1のHTMLファイルを図2のようにスタイルを調整してください 図1 HTML(CSSなし) 図2 HTML(CSSあり)   […]
CSS layout3 〜レイアウト 横並び〜
下記のWebページを内部スタイルシート形式で作成してください。 ■表示状態1のレイアウトを■表示状態2に修正してください。 ■表示状態1(セミナーとスクールの2つのコンテンツが縦に並んでいる状 […]
CSS layout2 〜レイアウト 中央寄せ〜
下記のWebページを内部スタイルシート形式で作成してください。 ■表示状態1のレイアウトを■表示状態2に修正してください。 ■表示状態1(文字が横幅いっぱいに広がっている状態) […]
CSS layout1 〜レイアウト 初期化〜
下記のWebページを内部スタイルシート形式で作成してください。 表示状態1のレイアウトを表示状態2に修正してください。 ■表示状態1(余白がついている) ■表示状態2(余白が消え […]
CSS B6 〜メディアクエリとビューポート〜
下記のWebページを内部スタイルシート形式で作成してください。 768px以上で横並び、767px以下で縦並びとレウアウトが変化するようにWebページを作成してください。 事前準備 デスクトップ上にフォルダ […]
CSS B5 〜擬似要素before、after〜
下記のWebページを内部スタイルシート形式で作成してください。 下記の擬似要素before、afterを利用して、下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフ […]
CSS B4 〜擬似クラス hover〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のマウスが上に乗ったら文字がピンク色になるようにWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォル […]
CSS B3 〜擬似クラス〜
下記のWebページを内部スタイルシート形式で作成してください。 擬似クラス(notとlast-child)を利用して、下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上 […]
CSS B2 〜セレクタの指定方法2〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します(すでに作成済み […]
HTMLCSSセミナー 演習2
下記のセミナー申し込みページを作成してください。 下記のセミナー申し込みページを作成してください。 見出しの種類(h1,h2,h3…)や改行(br)の有無・数などの記述は任意で構いません。 &n […]
CSS B1 〜セレクタの指定方法〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で、ユニバーサルセレクタ、要素セレクタ、クラスセレクタ、IDセレクタを利用して、作成してください。 […]
HTMLCSSセミナー 演習3
下記のセミナー申し込みページを作成してください。 先ほど作成したWebのコンテンツを960pxで固定して真ん中寄せしてください。 デモWebページ ヒ […]
HTMLCSSセミナー演習1
下記のWebページを作成してください。 下記のセミナー申し込みページを作成してください。 デモWebページ ヒント 下記の雛形をコピーして利用して作成 […]
CSS17 〜position 位置の設定〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します(すでに作成済み […]
CSS16 〜 display・インライン・ブロック要素〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 文字だけでなく、水色背景内でリンクを押せるようにしてみましょう。 事前準備 デ […]
CSS15 〜 display・インライン・ブロック要素〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します( […]
CSS14 〜margin中央寄せと中央揃え〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します( […]
CSS13 〜テキスト揃えの設定〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します( […]
CSS12 〜内部余白の設定〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します( […]
CSS11 〜外部余白の設定〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します( […]
CSS10 〜横幅・高さのスタイル〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します( […]
CSS9 〜背景スタイル〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します( […]
CSS8 〜枠線スタイル〜
下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します( […]
CSS7 〜横並びfloatの設定2〜
floatを利用して図1のHTMLを図2のように横並びにしてください floatを利用して図1のように縦に並んでいるdivから、図2のようにメインメニューとサイドメニューを横並びにしてください。 図1のHT […]
CSS6 〜横並びfloatの設定〜
floatを利用して図1のHTMLを図2のように横並びにしてください。 floatを利用して図1のように縦に並んでいるdivを図2のように左詰めに横並びにしてください。 図1のHTML &nb […]
CSS5 〜class名でスタイルを指定〜
下記のWebページを内部スタイルシート形式で作成してください。なおclass名を使ってスタイルを設定してください。 参考サイト (補足)HTMLにつけるid属性とclass属性に […]
CSS4 〜色々な文字のスタイル〜
下記のWebページをインラインスタイルシート形式で作成してください。 以下はCSS無しのHTMLファイルです。下記をコピーしてスタイルをつけていってください。 [crayon-662a2160 […]
CSS3 〜外部スタイルシートと文字の色〜
下記のWebページを外部スタイルシート形式で作成してください。 スタイル調整をしていないHTMLコードは下記になります。下記コードを元にスタイルを調整していってください。 [crayon-66 […]
CSS2 〜内部スタイルシートと文字の色〜
下記のWebページを内部スタイルシート形式で作成してください。 スタイル調整をしていないHTMLコードは下記になります。下記コードを元にスタイルを調整していってください。 [cr […]
CSS1 〜インラインスタイルシートと文字の色〜
下記のWebページをインラインスタイルシート形式で作成してください。 スタイル調整をしていないHTMLコードは下記になります。下記コードを元にスタイルを調整していってください。 [crayon […]
CSS超入門編
CSSとは また、Webページのスタイルを整えるため、HTMLとセットでCSS(Cascading Style Sheets)という言語もよく使います。 ■人に例えたイメージ 先 […]
HTML 総合1
下記のセミナー申し込みページを作成してください。 下記のセミナー申し込みページを作成してください。 見出しの種類(h1,h2,h3…)や改行(br)の有無・数などの記 […]
HTML8 〜フォーム〜
下記のWebページを作成してください。 引用タグと整形済みタグを利用して、下記のWebページを作成してください。 フォームの練習 名前: 性別: 男 女 職業: 学生 会社員 自営業 無職 生まれた年代: […]
HTML7 〜グループタグ〜
下記のWebページを作成してください。 divタグとspanタグを利用して、下記のWebページを作成してください。 設定手順 デスクトップ上にフォルダ「webst8 […]
HTML6 〜引用・整形済みテキスト〜
下記のWebページを作成してください。 引用タグと整形済みタグを利用して、下記のWebページを作成してください。 ※見出しはh1でもh2でも任意の見出しを使って構いません。 &n […]
HTML5〜特殊文字の書き方〜
下記のWebページを作成してください。 (注)3つ目は「左端」と「右端」の間に(全角スペースではなく)半角スペースを10個分ほど連続表示させて間を空けてみてください。   […]
HTML4 〜リストタグ・水平線タグ〜
下記のWebページを作成してください。 リストタグと水平線タグを利用して、下記のWebページを作成してください。 ※見出しはh1でもh2でも任意の見出しを使って構いません。 &n […]
HTML3 〜テーブル(表)〜
下記のWebページを作成してください。 設定手順 デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。 「webs […]
HTML2 〜リンク(アンカーテキスト)〜
下記のWebページを作成してください。 (※)タイトルタグや見出しの種類(h1,h2…)は任意で構いません。 yahoo,amazon,googleの部 […]
HTML1 〜見出し・段落・画像〜
下記のWebページを作成してください。 見出しタグ、段落タグ、画像タグを利用して下記のWebページを作成してください。 titleタグは任意で構いません。見出しもh1,h2など任 […]
HTML0 〜HTMLの基本構造とTitle〜
下記のWebページを作成してください。 下記のWebページを作成してください。 事前準備 デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。 […]
HTML超入門編
HTMLとは HTMLとはWebページの構造を定義する言語 HTMLとはHyper Text Markup Languageの略です。Webページの構造を定義する言語です。 ■人 […]
WordPress スペシャルレッスン 〜WordPressを引っ越ししてみよう〜
1. レンタルサーバーに構築したWordPressをローカル環境に引っ越ししてください 下記のサイトを参考に、レンタルサーバーに構築したWordPressをローカル環境(MAMPまたはXAMPP)上のワード […]
WordPressの子テーマを導入してみよう
WordPressには既存のテーマをカスタマイズしたいときに、そのテーマを引き継いだテーマ「子テーマ」を作成・適用できる機能があります。 今回はWordPressで子テーマを作成する手順を記載します。 &n […]
ローカル開発環境を導入しよう
Atomをインストールしよう HTMLやCSSを編集するのに便利なツール「Atom エディタ」をまずはインストールしていきましょう。 Atom概要とインストール手順 開発エディタ Atom の […]
はじめに ホームページ開設&ワードプレス導入しよう
ドメイン契約とサーバー契約を行おう まずは、ホームページの土台となるサーバー契約とドメイン契約を行っていきましょう。 ■参考ページ 知っておきたいWebの仕組みと ホームページ作成手順 &nb […]
テキスト集
ホームページ作成基礎 自分でホームページを作りたい人のためのWebの基本とホームページの作り方【難易度☆】 無料FTPツール FileZilla の使い方 Mac・Windows対応【難易度☆】   […]
ホームページ作成セミナー 1日速習WordPress講座
WordPressでのホームページ作成の流れ 下記はWordPressでホームページを作成する流れです。今回は上記の流れに沿って進めていきます。 開設アカウントメモ用 ●ロリポッ […]