【差が出る知識を楽しく重点学習】ブログまとめ_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入門
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プラグイン
始め方総まとめ編
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 記事の構成、タイトル・リード文・目次・見出し・文章を挙げ、その基本的な書き方
全体設定やブロックの使い方
レイアウト、装飾
カテゴリの作り方
パーマリンク、スラッグ設定
ブロックエディタ
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 固定ページでは、タグやカテゴリーによる記事の関連付けと言ったことができません。
固定ページ階層化
カスタム投稿タイプ
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」が推奨される
段落
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
カラム
カラム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
テーブル
09:26 WEBST8
- 00:01 新しいテーブルブロックを使用して表を作成する方法を説明。
- 01:11 予算に合わせてプリセットの表を選択か、カスタムの行と列で表を作成。
- 02:21 ヘッダーやフッターを追加したり、セルの幅を調整したりするための追加の設定オプションにアクセスします。
- 03:31 表に行や列を簡単に追加または削除して、必要な情報を明確にします。
- 04:41 表のセルの幅を自動調整するか、固定値を設定して表示を最適化。
- 05:51 取り消し線、テキストの色、ハイライトなどのスタイルオプションを使用して、重要な情報を強調。
- 07:01 列全体を中央揃え、右揃え、左揃えに設定。
- 08:11 表の下にキャプションを追加して、追加の情報を提供または説明。
コメント