FunLearningDifPoint-WordPress-03

差知ポイント楽習_WordPress編

差が出る知識を重点楽習
WordPress編 🌍

最近、AIの進歩があまりにも早く、全く付いて行けない状況なので、情報の整理が必要と感じ、何が良いかと考えると、やっぱり、オーソドックスで毎週私のブログで使っているWordPressが使い慣れてるので、いいとなり、機能もいろいろと更新されているので、サラッと勉強をしようとYoutubeで物色しましたが。

ほとんとが、2年以上前に投稿されたものだった。そんな中、クニトミさんの『WordPressブログの始め方』は、情報が最近のもので、目次もわかりやすく、チャプターもあり、非常にわかり易く、情報を自分好みに整理しやすかったので使わせていただきました。まだ、模索の段階ですが、取り敢えず、反応を見ながら仕上げる予定です。

ステップ1:WordPressブログの始め方  0:24

エックスサーバ申込 1:29  サーバーID確認 1:54  料金プラン決 2:05  WPクイックスタート選択 2:26  サーバー契約期間決 2:58  取得ドメイン入力 3:24  ブログ名決 4:10  ユーザー名・パスワード入力 4:36  メアド入力 4:58  テーマ決 5:18  アカウント登録 5:58  基本情報登録 6:01  利用規約同意、次へ 7:09  確認コード入力 7:28  登録情報最終確認 7:58  設定完了メール受取 8:56

ステップ2:WordPressの初期設定11選 9:47

1)サイトアドレスの確認をする 10:36  2)パーマリンクを変更する 11:31  3)タイトル・キャッチフレーズ設定する 12:11   4)カテゴリーを変更・追加する 14:36   5)プロフィールを作成する 17:18   6)メニューバーを作成する 19:30   7)お問い合わせフォームを設置する 22:20   8)プライバシーポリシー・免責事項を作成する 24:59  9)プラグインの削除・導入をする 27:35  10)コメント機能をOFFにする 28:14  11)サンプルページを削除する 28:38  定期的な更新を忘れない 29:14

ステップ3:記事の投稿方法を覚える 29:39

投稿設定 30:02  タイトルを入力 30:28  本文を書く 30:51  文字色の変更・フォントサイズ 31:20  見出し追加 31:55  画像挿入 32:56  リスト作成 33:33  リンク挿入 34:09  アイキャッチ画像設定 34:56  記事のパーマリンク変更 35:56  プレビュー確認 38:38  公開 38:59

ステップ4:ブロックエディターの基本と標準ブロック

ブロックエディター

  • 00:00   投稿や固定ページで新しいページを作成・編集するエディター画面
  • 02:01   基本構成は、メインエリア(ページ作成エリア)、上部のメニューバー、右側のメニューバー
  • 04:02   上部のメニューバーでは、ページの管理や公開・保存
  • 06:03   右側のメニューバーには、投稿の設定や選択中のブロックの設定変更可
  • 08:04   ブロックエディターでは、ブロックと呼ばれる単位でコンテンツを作成
  • 10:05   段落ブロックでは、通常改行とシフト改行によって行間が異なる
  • 12:06   ブロックを選択すると、上部のツールバーにそのブロックに関する装飾や設定変更のオプションが表示
  • 14:07   ブロックの複製や貼り付け、挿入位置の変更など、さまざまな操作が可

段落ブロック

  • 00:00   基本的なブロック
  • 00:59   改行方法
  • 01:58   太字、斜体、取り消し線などの書式設定
  • 02:57   段落内のテキストにリンク設定
  • 03:56   段落ブロック内のフォントサイズと行間を調整
  • 04:55   段落中に画像を挿入し、インライン画像としてレイアウト
  • 05:54   インライン画像と段落ブロックの画像の表示の違い
  • 06:53   高度な設定からクラス名を設定し、CSSを利用してブロックを装飾

画像ブロック

  • 01:24   ワードプレスで画像を挿入する最も一般的な方法
  • 02:47   画像ブロックの色を変更したり、画像を横並びに並べが可
  • 04:10   ギャラリーやカラムブロックを使用して、画像を横並びに並べが可
  • 05:33   画像の説明文を記入で、検索エンジンが画像の内容を理解しやすい
  • 06:56   画像ブロックで直接寸法を設定すると、実際の表示サイズとは異なる
  • 08:19   画像ブロックにテキストを挿入で、カバーブロックに変換
  • 09:42   カラムブロックの使用で、画像の下に文言を挿入可

ギャラリーブロック

  • 00:02   使い方
  • 01:00   アップロードから新規追加するか、メディアライブラリからすでにアップロードした画像を選ぶ形になります。
  • 01:58   ギャラリー画像の下にアップロードメディアライブラリがあるのでここから再度画像を追加可
  • 02:56   設定メニューが表示され、ここで列数を変更可
  • 03:54   画像の切り抜きを外すと、画像本来の縦横比で表示。縦横比が同じものをアップしている場合はいいが、異なる場合は不揃いになる。
  • 04:52   リンク先の設定可
  • 05:50   各画像あるいは下にキャプション文字を入力可
  • 06:48   スマートフォンでは基本的には列になって表示

カラムブロック

  • 00:00   使い方
  • 01:00   ブロックを横に並べて表示するためのブロック
  • 02:00   カラムブロック内の各カラムに、段落や画像などの任意のブロックを追加可
  • 03:00   外側のカラムと内側のカラムの幅や配置を変更可
  • 04:00   スマホでは、ブロックが縦に並ぶ
  • 05:00   カラムブロックを使用すると、ブロックの構造が複雑になり、選択したいブロックを選びにくいことがある
  • 06:00   カラムブロックを利用して、コンテンツを中央に寄せたレイアウトを作成可
  • 07:00   1カラムで少しレイアウトに工夫したい場合などに使用可

カスタムHTMLブロック

  • 00:01   使い方
  • 01:31   追加 CSS 機能を利用して、a タグに色や装飾などを簡単に設定できます。
  • 02:16   YouTube の埋め込みコードをカスタム HTML ブロックに追加可
  • 03:01   Google マップの埋め込みコードをこれに入力で、地図を埋め込み可
  • 03:46   これには設定項目はなく、プレビュー画面で内容を確認可
  • 04:31   JavaScript の記述は可能ですが、PHP の記述はできません。
  • 05:16   PHP の記述ができない点に注意が必要です。
  • 05:41   YouTube やアフィタグの埋め込みなど、多用途利用可

GoogleMap埋め込み

  • 00:02   使い方
  • 00:48   手順は大きく分けて2ステップ
  • 01:34   カスタムHTMLブロックを使用してGoogleマップの埋め込みコードを追加
  • 02:20   Googleマップを表示し埋込コードをコピーし、WordPressに貼付
  • 03:06   地図の埋め込みコードのサイズは、小、中、大、カスタムから選択
  • 03:52   ストリートビューも埋め込み可
  • 04:38   Googleマップを外観のウィジェットに貼り付け、サイドバーにも表示可
  • 05:24   埋め込んだ地図のサイズは、必要に応じて調整可

スペーサーブロック

  • 00:01  使い方
  • 00:28   余白を追加
  • 00:55   「デザイン」→「スペーサー」でブロックを追加
  • 01:22   スペーサーの高さをカスタマイズ可能
  • 01:49   適度な余白でデザインをより見やすく
  • 02:16   Lightningテーマの「v-blocks」プラグインでレスポンシブスペーサーブロックが利用可
  • 02:43   レスポンシブスペーサーブロックでデバイスごとの余白を調整できる
  • 03:10   スペーサーブロックは要所で使えばデザインの向上に役立つ

表ブロック

  • 00:01   使い方
  • 01:11   表作成は、エディタ右側の「+」か、左上の「ブロックを追加」をクリックし、「テーブル」を選択
  • 02:21   表の行数と列数をあらかじめ設定できます。後からの変更も可
  • 03:31   表を作成したら、内容を入力し、プレビューで確認
  • 04:41   テーブルブロックでは、文字数が増えると、自動で幅が調整
  • 05:51   文字の装飾や、背景色、キャプションなどの設定も可
  • 07:01   表の行や列の追加、削除、並び替えなどの操作も可

ボタンブロック

  • 00:01   使い方
  • 00:59   追加方法と基本構造
  • 01:57   文言、リンク、アイコンの設定
  • 02:55   構成と設定の仕組み
  • 03:53   内側ボタンで設定可能な項目(スタイル、色、サイズ)
  • 04:51   外側ボタンで設定可能な項目(配置、追加ボタン)
  • 05:49   縦方向の設定と応用方法
  • 06:47   使いどころと利点

ファイルブロック

  • 00:00   使い方
  • 00:55   挿入し、PDF、Excel、パワポのファイルを簡単にダウンロード可
  • 01:50   テキストやボタンの文言を入力し、ダウンロードをクリックするとファイルがダウンロードされます。
  • 02:45   設定で、配置の変更(中央揃え、右揃え)ができます。
  • 03:40   ファイルを新規追加したり、メディアライブラリーから選択可
  • 04:35   リンクを設定し、ファイルブロックの目的を拡張可
  • 05:30   高度な設定で、クラス名の設定でファイルブロックのスタイルを変更可
  • 06:25   アップロードできるのはPDF、Word、Excel、パワポ、ZIPなどの一般的な拡張子です。

カバーブロック

  • 01:28   タイトルを設定して段落や見出し、ボタンなどのブロックを追加可
  • 02:56   背景画像を後から変更したり、クリアして色で背景を設定可
  • 04:24   上に色を重ね合わせるオーバーレイ機能があり、不透明度を調節することで文字の見え方を調整可
  • 05:52   幅を全幅にすることで背景をブラウザいっぱいに表示できますが、サイドバーがある場合はレイアウトが崩れるので注意が必要
  • 07:20   背景を固定化することで、スクロールしてもカバーブロックの背景を固定
  • 08:48   画像を繰返し背景として設定で、1つの画像を背景全体に繰返し表示可
  • 10:16   フルハイライトを切り替えると、カバーブロックの高さがブラウザの高さに合わせて拡大表示可
  • 11:16   これで、背景画像の上に文字などのコンテンツを簡単に配置できます。

グループ化ブロック

  • 00:01   使い方
  • 01:29   見出しブロックやリストブロック段落、その他の色々なブロックをグループ化できます。
  • 02:57   これによりグループ単位でブロックを移動したり、文字や背景色の設定、CSSのクラス名の設定が可
  • 04:25   グループ化の方法は大きく2つあり、先にブロックを作成して後からグループ化するやり方と、先にグループブロックを作成して後からブロックを挿入するやり方があります。
  • 05:53   グループ化すると、グループ単位でページ内で移動可
  • 07:21   グループに対する色や背景色、および全幅の設定が可
  • 08:49   グループ解除をすると、グループで設定した内容も消えるので注意
  • 10:17   再利用ブロックは、ブロックのひな型を登録し、各ページで雛形として利用する機能です。

文章にインデントや字下げ設定方法

  • 00:01   使い方
  • 00:32   スペースで調整するとスマホで崩れたりするため、使用不可
  • 01:03   今回の段落ブロックは、右側のメニューの設定メニューからパディングオプションで左の余白を設定可
  • 01:34   パディングを設定すると、スペースでレイアウトが崩れていたのが綺麗に字下げインデントが可
  • 02:05   複数のブロックに自作をしたい場合は、グループブロックを使うと便利
  • 02:36   グループにサイズの設定メニュから左側のパディングを設定で自作可
  • 03:07   クラシックブロックを利用してもインデントは設定可
  • 03:38   自作インデントの設定方法

ブロックのコピペの使い方

  • 00:01   使い方
  • 00:46   マウスで複数選択してコピーする方法
  • 01:31   コピーしたブロックを異なるページにも貼り付け可
  • 02:16   シフトを押しながら左クリックで複数選択可
  • 03:01   全てのコンテンツをまとめてコピーする方法
  • 03:46   全てのコンテンツをコピーして貼り付け可
  • 04:31   コードエディターモードでコピぺする方法
  • 05:16   異なるサイトの場合は崩れ動作しないブロックもあるので、注意が必要

コメント