16

チェック表

スキルチェック表 スキルチェック表(WordPress基本) スキルチェック表(ブログ) スキルチェック表(ブログ実績)

06

お問い合わせフォームの作り方

ここでは下記のようにお問い合わせフォームを作り、WordPress管理者へのメール通知と自動返信を行う設定について説明していきます。     【はじめに】お問い合わせフォーム「Contact Form […]

26

WordPressの使い方基本

  WordPressへログインする WordPressにログインするためには、まずは自分がインストールしたWordPressのサイトの管理画面URLにアクセスする必要があります。初期状態ではWordpress […]

26

ホームページの作り方・基本

  【概要編】Webサイト・ホームページを作成する3つの方法 ホームページを作成する3つの方法には、大きく以下の3つの方法があります。   ■ホームページを作成する3つの方法 WordPressなどの […]

12

その他導入しておきたいプラグイン

ここでは、WordPress運用時に導入しておきたいプラグインをご紹介します。 ※ご利用のテーマや環境によっては重複する場合がありますので、ここではあくまで一般的な内容になります。 WordPress日本語バグ修正パッチ […]

12

そのほか最初に設定しておきたい基本設定

ここでは、その他の最初に設定しておきたい初期設定系をご紹介します。 投稿のコメント受付を無効化する設定 初期状態では投稿のコメント受付設定がONになっていて、訪問者からコメントが受付・表示されるように設定されています。 […]

12

WordPressブロックエディターの使い方

改めて投稿・固定ページの編集画面(エディター)の説明を詳しく説明していきます。   WordPressのエディターは、ブロックといわれる単位でコンテンツを作っていくブロックエディターが採用されています。 &nb […]

12

WordPressバージョンアップ

WordPressはオープンソースで無料でカスタマイズも自由で何でもできる反面、バージョンアップやセキュリティ対策も自分でしなければなりません。 今回は、これからWordPress(ワードプレス)のバージョンアップをした […]

12

WordPressプラグインとは

プラグインは、スマートフォンでいうアプリ機能に相当します。お問い合わせ機能や目次機能、スライダー(スライドショー)などWordPress自体が持っていない機能をプラグインという形で追加することができます。   […]

12

WordPressテーマカスタマイザー

テーマカスタマイザーは、テーマのレイアウト・表示に関する設定を行う機能です。   テーマカスタマイザーは、外観>カスタマイズから、テーマカスタマイザーを開くことができます。   補足)テーマカスタマイ […]

12

WordPressウィジェットの使い方

WordPressにおけるウィジェットとは、ブログパーツ(部品)のことです。 WordPressでは、バナーやテキスト、検索窓や投稿一覧など任意のパーツをサイドバーなどに追加することができます。   &nbsp […]

12

WordPressで固定ページにトップページを割り当てる

トップページは初期状態では、最新の投稿記事が表示されている状態です。トップページを任意の固定ページに割り当てる設定ができます。 ここでは、任意の固定ページをトップページに割り当てる表示設定を行なっていきます。 &nbsp […]

12

WordPress投稿の使い方

投稿はブログとして利用できる機能です。一般的には、お知らせやコラム、技術情報や時事情報などで使われることが多いです。     WordPressの初期状態では、通常トップページで最新の投稿一覧が表示さ […]

12

WordPressへのログイン方法

WordPressへログインする WordPressにログインするためには、まずは自分がインストールしたWordPressのサイトの管理画面URLにアクセスする必要があります。初期状態ではWordpress管理画面のUR […]

CSS 総合1-3 外部スタイルシート形式

  外部スタイルシート形式 総合レッスン1-2で作成したHTMLファイルをスタイルを調整してください   図2 HTML(CSSあり)     厳密な余白や横幅・高さ・フォントサイ […]

CSS 総合1-2 内部スタイルシート形式

  内部スタイルシート形式 総合レッスン1で作成したHTMLファイルをスタイルを調整してください   図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」を作成します(すでに作成済み […]

01

HTMLCSSセミナー 演習2

下記のセミナー申し込みページを作成してください。   下記のセミナー申し込みページを作成してください。 見出しの種類(h1,h2,h3…)や改行(br)の有無・数などの記述は任意で構いません。 &n […]

CSS B1 〜セレクタの指定方法〜

下記のWebページを内部スタイルシート形式で作成してください。 下記のWebページを内部スタイルシート形式で、ユニバーサルセレクタ、要素セレクタ、クラスセレクタ、IDセレクタを利用して、作成してください。   […]

29

HTMLCSSセミナー 演習3

下記のセミナー申し込みページを作成してください。   先ほど作成したWebのコンテンツを960pxで固定して真ん中寄せしてください。     デモWebページ     ヒ […]

27

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 […]

はじめてでも3時間でできる!HTML超入門セミナー

CSS超入門編

CSSとは また、Webページのスタイルを整えるため、HTMLとセットでCSS(Cascading Style Sheets)という言語もよく使います。     ■人に例えたイメージ   先 […]

HTML 総合レッスン1

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個分ほど連続表示させて間を空けてみてください。   &nbsp […]

HTML4 〜リストタグ・水平線タグ〜

下記のWebページを作成してください。   リストタグと水平線タグを利用して、下記のWebページを作成してください。   ※見出しはh1でもh2でも任意の見出しを使って構いません。   &n […]

HTML3 〜テーブル(表)〜

  下記のWebページを作成してください。       設定手順 デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。   「webs […]

HTML1 〜見出し・段落・画像〜

  下記のWebページを作成してください。   見出しタグ、段落タグ、画像タグを利用して下記のWebページを作成してください。   titleタグは任意で構いません。見出しもh1,h2など任 […]

HTML0 〜HTMLの基本構造とTitle〜

  下記のWebページを作成してください。 下記のWebページを作成してください。     事前準備 デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。 […]

WordPressの子テーマを導入してみよう

WordPressには既存のテーマをカスタマイズしたいときに、そのテーマを引き継いだテーマ「子テーマ」を作成・適用できる機能があります。   今回はWordPressで子テーマを作成する手順を記載します。 &n […]

はじめてでも3時間でできる!HTML超入門セミナー

テキスト集

ホームページ作成基礎 自分でホームページを作りたい人のためのWebの基本とホームページの作り方【難易度☆】 無料FTPツール FileZilla の使い方 Mac・Windows対応【難易度☆】   &nbsp […]