FunLearningDifPoint_wordpress202405

【差が出る知識を楽しく重点学習】ブログまとめ_WordPress版

分かり易いYoutube動画を厳選し、ブログ作成に必要なアプリの基本操作をコンパクトにわかり易くまとめます。このブロックで使われているアプリはWordPressと人気テーマのCocoon などです。実践でよく使われそうで、かつ応用範囲が広い部分を厳選し、差が出る知識を楽しく重点動画学習出来るように、心掛け精進していきます。また、ご意見、ご感想などのコメントを頂けると、こらからのやる気に繋がります。特に欲しい情報として、『身から鱗が落ちる』的な、この操作方法や知識を得るだけで大きく違うポイントをわかり易く説明している動画の情報が欲しいです。宜しくお願い致しまーーーす (*^^*)。

まとめ 【差知楽重点学習】

タイトルの決め方
14:20 ヒトデせいや

覚えやすく、読みやすく、他の名前と重複せず、恥ずかしくなければ何でも構わない

複数ブロック全コピペ
6:06 WEBST8
  • 00:01   今回はWordPressのブロックを複数選択して貼り付けする方法
  • 00:46   マウスで複数選択してコピペ方法
  • 01:31   異なるページでも右クリック貼り付けあるいはコントロールCコマンドCなどで貼り付け
  • 02:16   シフトを押しながら左クリックで複数選択してコピー
  • 03:01   例えば複数の段落ブロックをまとめてコピーすることも可能です
  • 03:46   このような形で非常に長いブロック複数あるブロックをまとめてコピペしたいと言った方は全てのコンテンツをコピペも可能
  • 04:31   貼り付ける時は同様に編集画面の右上オプションのコードエディターで右クリック貼り付けで貼り付ける
  • 05:16   ただ異なるサイトの場合は、上手くいかない場合もあります。
Cocoonで一通り作る
11:41 ヒトデせいや

 1:46 スキンの設定
 2:46 ヘッダー画像を入れる
 6:03 サイドバーを調整する
 6:46 グローバルメニューを作る
 8:43 おすすめカードを作る 
11:12 まとめ

Cocoon入門
54:11 wEBST8
  • 04:27   投稿の書き方や固定ページによるメニューバーの表示設定方法など、機能説明。
  • 08:54   テーマの設定として、デザインテンプレートであるスキンやロゴ設定、キャッチフレーズの設定
  • 13:21   固定ページでは、問い合わせなどの単一ページコンテンツを作成し、メニューバーに表示
  • 17:52   プライバシーポリシーを下部のフッターメニューに配置
  • 23:49   お問い合わせフォームは、プラグインを使用することで追加
  • 29:46   初期設定では日付を含むパーマリンク構造となっていますが、日付を含まないパーマリンク構造に変更することを推奨
  • 35:48   Enter キーを押すと段落が変わりますが、shift + Enter は同じブロック内で改行するため、余白が少しだけ異なる
  • 41:55   横並びブロックの構成は 6 ブロックで、外側の 6 ブロックと内側の 6 ブロックに分かれており、幅はパーセンテージで変更可能
  • 48:02   ウィジェットを使用すると、サイドバーやフッターエリアにお好みのブログパーツを配置して表示可。配置エリアはテーマによって異なる
Cocoonプラグイン
31:05 wEBST8
  • 07:43   日本語環境強化プラグイン wpマルチバイトパッチ
  • 11:34   セキュリティ対策プラグインとしてサイトガード wp プラグイン
  • 03:52   初期設定型アクセス解析ツールの
  • 15:27   プラグインとしてWPビジョン部コントロールという機能があります
  • 19:21   ワードプレスは新しいバージョンごとに自動的に最新の状態に保たれます
  • 23:15   タイトル、リード文、目次、各論の見出し、まとめがブログ記事の一般的な構成
  • 27:09   グーグルアドセンスの収益性は低い
始め方総まとめ編
1:46:14 wEBST8
  • 05:55   一般的なレンタルサーバーの特徴やサーバー、料金体系を解説
  • 11:50  ログイン方法、ブログ投稿時の基本的な知識、固定ページやお問い合わせフォームの作成方法を紹介。
  • 17:49   ログイン
  • 23:47   テーマといったデザインのテンプレートを適用
  • 29:45   管理画面でブログ投稿
  • 53:22   WordPress ブロック エディターの 使い方 総まとめ
  • 56:54   「段落」ブロックでエンターを押すと次の段落に移動し、シフトエンターを押すと同じ段落内で改行が行われます。}
  • 1:07:04   「カスタム HTML」ブロック
  • 1:09:01   「目次」の表示、非表示
  • 1:09:55   ブロック エディターの 使い方 総まとめ
  • 1:11:09   従来のウィジェットの説明
  • 1:12:09   配置できる場所は、サイドバーやフッターなど
  • 1:20:32  使えるプラグインの導入方法のみ紹介
  • 1:29:02   バックアッププラグイン「updraft+」をインストールします。
  • 1:37:37   記事の構成、タイトル・リード文・目次・見出し・文章を挙げ、その基本的な書き方

全体設定やブロックの使い方

レイアウト、装飾
17:27 WEBST8
  • 00:01   レイアウトと装飾で差をつける見やすいブログの作り方
  • 02:11   情報整理した読みやすいブログの作り方
  • 04:21   論理的な文章構造を作る見出し
  • 06:31   図解してイメージで理解してもらう
  • 08:41   箇条書きで項目数を理解してもらう
  • 10:51   表で情報を整理して視覚化
  • 13:01   長いブログ記事には目次を活用する
  • 15:11   装飾で単調さをなくし印象的に
カテゴリの作り方
10:31 WEBST8
  • 01:18   ブログ記事のカテゴリー付けは難しいが、メインとなるカテゴリーを1つ設定しておくといい。
  • 02:36   カテゴリーは階層構造を持ち、親子関係を保つことができる。
  • 03:54   タグは階層構造を持たず、付箋のようなイメージ
  • 05:12   カテゴリーを追加する際は、親カテゴリーを指定して親子関係を保つ
  • 06:30   カテゴリーは記事の編集画面から設定できる。
  • 07:48   1つの記事に複数のカテゴリーを設定できるが、乱用は避ける
  • 09:06   メニューバーにカテゴリーを設定して、利便性を高めることができる。
パーマリンク、スラッグ設定
14:46 WEBST8
  • 02:08   推奨されるパーマリンク設定(英単語をハイフンでつなぎ、シンプルかつ短い構成にする)
  • 02:13   当サイトのパーマリンク例(wordpressの始め方 → wordpress-start)
  • 02:45   半角アルファベットの英単語を利用
  • 02:50   単語間はハイフンで接続する
  • 02:54   できるだけ短い構成にする
  • 03:04   意味不明なパラメーターは使用しない
  • 03:19   Google推奨のURL構造(シンプルで人間が理解しやすい、意味のある単語を使用する)
ブロックエディタ
16:20 WEBST8
  • 01:05   投稿や固定ページで新規追加をしてページを編集して作成
  • 02:10   ブロックエディター
  • 03:15   見出しや文章、段落等のブロックを挿入してページ作成
  • 04:20   段落
  • 05:25   見出し
  • 06:30   箇条書き
  • 07:35   画像ブロック
  • 08:40   入力が終わったらプレビューボタンで確認可
  • 09:45   横並びで表示するカラムブロック
  • 10:50   カラムブロックをうまく選択するコツ
  • 11:55   アウトライン
  • 13:00   複数のブロックを選択して移動可能
  • 14:05   設定変更とすることで簡単に研修可
  • 15:10   画面右メニューでは、パーマリンク url アイキャッチ、コメント、ページ全体設定など可。
投稿と固定ページの使い分け
10:34 WEBST8
  • 00:00   改めてWordPressの投稿と固定ページの違い、使い分けについてご紹介
  • 01:26   投稿と固定ページでSEOの優劣はあるのか
  • 02:52   投稿はブログ記事のようなコンテンツで作成し、会社情報やプライバシーポリシー、お問い合わせなどページ単体で独立しているものに関しては固定ページを利用。
  • 04:18   一方固定ページでは、カテゴリーやタグ設定というのができず、一覧表示も基本的にはできません。
  • 05:44   投稿では時系列順で一覧表示されたり、各ページをカテゴライズしてグルーピングしたり、一覧表示することができます。
  • 07:10   固定ページでは一般的にページごとにデザインテンプレートというのを設定して、固定ページでもレイアウトを変えて表示作成することができたりします。
  • 08:36   ランディングページなど、固定ページで作成することが多い
  • 10:02   固定ページでは、タグやカテゴリーによる記事の関連付けと言ったことができません。
固定ページ階層化
9:50 WEBST8
  • 01:14   固定ページの『新規追加』から親ページを作成
  • 02:27   子ページを作成し、『ページ属性』の『親』で親ページを指定。
  • 03:40   親ページのURLに子ページのスラッグが追加され、親子関係が設定されます
  • 04:53   プラグインによっては、子ページの一覧表示やアイキャッチ画像を設定可
  • 06:06   親子関係を設定することで、メニューバーやページ構造を整理できます
  • 07:19   固定ページの『抜粋』を設定すると、テーマによっては子ページの一覧表示可
  • 08:32   クイック編集から子ページの順番を変更可。
カスタム投稿タイプ
08:27 WEBST8
  • 00:00   投稿や固定ページのほかに独自で投稿タイプを作成して運用できる機能
  • 01:03   カスタム分類とは投稿におけるカテゴリー・タグのような分類タイプを独自に定義できるもの
  • 02:06   カスタム投稿タイプとカスタム分類をセットで利用可
  • 03:09   カスタム分類の項目はタームと呼ぶ
  • 04:12   カスタム投稿タイプの最新記事をトップページなどに表示可
  • 05:15   カスタム投稿タイプとカスタム分類を作成するにはプラグインの利用が一般的。
  • 06:18   ライトニングではプラグインの「Lightning All-in-One Expansion Unit」が推奨される
  • 07:21   カスタム投稿タイプを作成するにはプラグインの「Custom Post Type UI」が推奨される
固定ページに最新投稿一覧
9:46 WEBST8
  • 01:13   まず 標準のブロックを利用方
  • 02:26   より綺麗なデザインや細かい制御をしたい場合は、テーマ独自のブロックやプラグインを利用
  • 03:39   ライトニングで有料版プラグインを利用、テーマ独自のブロックで最新の投稿を表示
  • 04:52   スノーモンキー
  • 06:05   enfold
  • 07:18   一般的なプラグインでの表示方法
  • 08:31   今回は初心者向けに WordPress で投稿一覧を表示
段落
7:56 WEBST8
  • 00:59   段落ブロックは、一般的な文章を書くのに用いられる、ブロックエディターの中では最も基本的なブロックの一つです。
  • 01:58   段落ブロックの基本的な使用方法
  • 02:57   文章をEnterキーで区切ることで新しい段落ブロックが挿入され、Enterキーを押すと新しい段落ブロックが追加される
  • 03:56   段落ブロックで重要な使い方は、EnterキーとShift+Enterキーの違い
  • 04:55   ブロックの設定を変更するには、ブロックを選択した状態でツールバーか右側のメニューバーから変更可
  • 05:54   段落ブロックに画像を挿入するには、インライン画像という機能を使う。
  • 06:53   段落ブロックにCSSを利用するには、高度な設定からアンカーやクラス名を設定できます。
文章字下やインデント
4:11 WEBST8
  • 00:32   スペースによる調整は、スマホで崩れることがあるため避ける必要があります。
  • 01:03   段落ブロックの設定メニューの「サイズ」オプションから、「パディング」を設定することでインデントを作成可。
  • 01:34   グループブロックで、複数のブロックに対して同時にインデントを設定可。
  • 02:05   クラシックブロックでもインデントを設定可。
  • 02:36   パディングを設定することで、スマホやパソコンの両方で適切なインデントが表現可。
  • 03:07   クラシックブロックでは、インデントアイコンからインデントを設定可。
  • 03:38   インデントを使用すると、テキストを適切に配置して読みやすくなる。
カラム
8:06 WEBST8
  • 01:00   カラムブロックは内側と外側の2つのブロックで構成されています。
  • 02:00   各カラムブロックに画像や見出し、段落などのブロックを追加可。
  • 03:00   外側のカラムブロックではカラム数を変更可。
  • 04:00   内側のカラムブロックでは幅を変更可。
  • 05:00   外側のカラムブロックでは中央揃え、下揃え、縦揃えなどの位置調整可。
  • 06:00   カラムブロックで、コンテンツを中央に寄せたレイアウトを作成可。
  • 07:00   レイアウトの工夫は、カラムブロックが有効。
カラム2
8:04 webパンダ
  • 00:00   記事内で画像や文章を横に並べる方法の解説
  • 01:00   ブロックエディターでは、「グループ」機能を使用して、要素を横に並べる「列」を作成できます。
  • 02:00   「列」は、要素を均等に分割したり、左右の幅を調整したりできます。
  • 03:00   「列」内にブロックを追加することで、画像、文章、ボタンなどを横に並べることができます。   }
  • 04:00   「列」は、3つの要素まで並べることができ、それ以上は「カラム」の設定で追加できます。   }
  • 05:00   「カラム」では、列数を増やしたり、カラムの幅を調整したりできます。   }
  • 06:00   「列」や「カラム」は、PCでは横に並びますが、スマホでは縦に表示されます。   }
  • 07:00   「グループ」機能を活用することで、要素を簡単に横に並べ、レイアウトを整えることができます。   }
イメージ、画像
11:15 WEBST8

01:24 画像ブロックの挿入 イメージブロックを挿入するには、エディタツールバーの「+」アイコンをクリックするか、右クリックして「イメージ」を選択。
02:47 画像の配置と変更は、画像を選択し、ツールバーの配置オプションをクリック。
04:10 画像のスタイリングと効果は、 丸みを帯びた角、ドロップシャドウ、フィルターなど、さまざまなスタイルや効果を画像に適用可。
05:33 画像のサイズと寸法

は、境界線をドラッグするか、ツールバーの「画像サイズ」オプションを使用します。
06:56 画像のトリミング は、エディター内で画像を切り抜いたりサイズを変更したりできる切り抜きツールを使う。
08:19画像にテキストを挿入は、 ツールバーの「T」アイコンをクリックすると、画像にテキストを追加できます。ただし、これにより、画像ブロックがカバーブロックに変換され、画像が背景として扱われます
09:42  イメージ ギャラリーと列の作成 複数の画像を並べて表示するには、ギャラリーブロックまたは列ブロックを使用できます。ギャラリーブロックでは画像のグリッドを作成でき、列ブロックでは画像とテキストを別々の列に追加出来ます

ギャラリー画像
07:49 WEBST8

01:00ギャラリーブロックの挿入と画像のアップロード ギャラリーブロックを挿入するには、ブロックエディタの「+」アイコンをクリックし、「ギャラリー」を選択します。その後、新しい画像をアップロードするか、メディアライブラリから選択できます。アップロードされた画像は横一列に表示されます。
01:58ギャラリー画像の編集と管理 画像をクリックして目的の位置にドラッグすることで、画像の順序を並べ替えることができます。「ゴミ箱」アイコンをクリックして画像を削除することもできます。さらに画像を追加するには、[アップロード]または[メディアライブラリ]をクリックして、追加する画像を選択します。
02:56ギャラリーブロック設定のカスタマイズ 設定アイコンをクリックして、ギャラリーブロックのさまざまなカスタマイズオプションにアクセスします。列数を変更したり、画像の配置を調整したり、ギャラリーの幅を指定したりできます。 03:54 ライトボックス効果の有効化 Easy Fancyboxなどのプラグインを使用して、ユーザーがクリックするとポップアップウィンドウに画像を表示できるライトボックス効果を有効にすることを検討してください。
04:52画像のキャプションと説明の追加 キャプションや説明は、個々の画像またはギャラリー全体に追加できます。画像の下にテキストが表示されます。
05:50 レスポンシブギャラリー表示 スマートフォンなどの小さな画面では、通常、ギャラリーに画像が 2 列で表示されます。
06:48 ギャラリーブロックの実用化 ギャラリーブロックは、店舗のインテリアを紹介したり、製品コレクションを表示したり、画像ベースのコンテンツを作成したりするのに役立ちます。

カバー
11:50 WEBST8
  • 01:28   タイトルを入力でき、フォントサイズなどの変更、段落や見出しへの変換も可能
  • 02:56   任意のブロック(段落、ボタン、見出しなど)をカバーブロック内の背景画像の上に追加できる
  • 04:24   背景画像を後から変更したり、クリアして背景色を設定可。
  • 05:52   オーバーレイ機能で背景画像に色を重ね合わせたり、透明度を調整して文字の見やすさを向上可
  • 07:20   幅の設定を変更することで、全幅に表示、特定の幅に制限可。
  • 08:48   背景画像を繰り返し背景として設定することで、1つの画像をパターンとして繰り返し表示可
  • 10:16   フルハイライトを切り替えで、カバーブロックをブラウザーの高さに100%に拡大表示可。
  • 11:16   背景画像の上に文字を入れたり、レイアウトの幅を広げることが可能

カスタムHTML
6:10 WEBST8
  • 00:46   カスタムhtmlブロックを利用するとhtmlを記述可
  • 01:31   youtubeの埋め込みコードやgoogleマップの埋め込みアフェリエイトタグの埋め込みなど
  • 02:16   カスタムhtmlブロックを挿入したいところで+ブロックのtwitterアイコンをクリックしてカスタムhtmlブロックを選択
  • 03:01   例えばA8.netのバナーの広告リンクをコピぺで、入力するとカスタムhtmlで入力した行動に対し表示。
  • 03:46   基本的にはこのブロックというのは設定項目というのはなありません。プレビューで確認可
  • 04:31   javascriptの記述は可能だが、phpの記述はNGな点にご注意ください
ページ内リンク
10:10 WEBST8
  • 01:16   ボタンを押すと指定した場所に移動するページ内リンク
  • 02:31   リンク先に飛ばしたい要素にid属性を設定し、リンク先に#(シャープ)記号とidを指定。
  • 03:46   テーマによっては、メニューバーが固定されており、ページ内リンクの表示が重なってしまう場合が有。
  • 05:01   このような場合は、スペーサーブロックを使用して、お問い合わせ部分の上部に余白を作成。
  • 06:16   スペーサーブロックを含むグループブロックにidを設定し、リンク先をそのidに設定すれば、お問い合わせ部分が重ならずに表示可。
  • 07:31   メニューバーのリンクにもページ内リンクを設定可。
  • 08:46   テーマによっては、ページ内リンクをクリックするとスクロールではなくジャンプ移動することもある。
ボタン
07:51 WEBST8
  • 00:59   ボタンブロックで、申し込みボタンなどのリンク付きボタンを作成できます。
  • 01:57   ボタンブロックの基本的な追加方法やボタンブロックで設定できる内容。
  • 02:55   ボタンブロックは、内側と外側の設定項目が異なります。
  • 03:53   内側のボタンでは、色、サイズ、枠線などの設定が可能で、各ボタンごとに設定できます。
  • 04:51   外側のボタンでは、ボタン全体の配置やスタイルの設定、ボタンの追加などができます。
  • 05:49   ボタンブロックでは、横並びのボタンを縦並びにすることもできます。
  • 06:47   ボタンブロックで、見栄えの良いリンク付きボタンを簡単に作成できます。
テーブル
09:26 WEBST8
  • 00:01   新しいテーブルブロックを使用して表を作成する方法を説明。
  • 01:11   予算に合わせてプリセットの表を選択か、カスタムの行と列で表を作成。
  • 02:21   ヘッダーやフッターを追加したり、セルの幅を調整したりするための追加の設定オプションにアクセスします。
  • 03:31   表に行や列を簡単に追加または削除して、必要な情報を明確にします。
  • 04:41   表のセルの幅を自動調整するか、固定値を設定して表示を最適化。
  • 05:51   取り消し線、テキストの色、ハイライトなどのスタイルオプションを使用して、重要な情報を強調。
  • 07:01   列全体を中央揃え、右揃え、左揃えに設定。
  • 08:11   表の下にキャプションを追加して、追加の情報を提供または説明。

スペーサー
03:47 WEBST8
  • 00:56   余白を入れたい場所にカーソルを合わせ、ブロック追加ボタンから「スペーサー」を選択すると、高さをカスタマイズできる余白が追加されます
  • 01:51   デザインで便利なブロック
  • 02:46   「v-blocks」プラグインをインストールしていると、デバイスごとに余白を調整できる「レスポンシブスペーサーブロック」を利用可
バックアップ
11:25 WEBST8
  • 01:24   WordPressのバックアッププラグインでbackWPupが有名
  • 02:48   ファイル類とデータベースの両方バックアップ可。
  • 04:12   スケジュールバックアップ機能。
  • 05:36   バックアップファイルはサーバー内の指定のフォルダに保存。
  • 07:00   バックアップ時に異常があればメール通知機能有。
  • 08:24   バックアップファイルは圧縮保存
  • 09:48  注意点。
目次プラグイン
11:38 WEBST8
  • 01:27   ページ内の見出しを元に自動で目次を生成するプラグイン
  • 02:53   このプラグインを有効化
  • 04:19  簡単に目次は表示させる設定を紹介。
  • 05:45   この見出しテキスト
  • 07:11   スムーススクロール効果
  • 10:03   css ファイルを除外
07:51 WEBST8

03:47 WEBST8

コメント