ナビゲーションやクエリーループを挿入することができる!けど、実際に投稿記事で使うブロックはほとんどないかもしれません…
こういう事ができるんだ、ってさらっと目を通してもらえればOK!なテーマブロック全23種類です
【PR】この記事には広告を含む場合があります
ウィジェットブロックも攻略しました!残すはテーマ・埋込・Cocoonブロックのみ
実は、今回のテーマブロックと次回の埋め込みブロックは、さらっと概要だけ説明だけして終わりにしようと思っています
そのくらい簡単です!種類が多いだけなので怖くありません
また、うまく表示されない・ちょっとよくわからないブロックも多々あったのですが
あまり使用頻度が高くなさそうなので深追いしていません_(._.)_
ではいってみよう!
WordPress × Cocoon × Gutenberg|テーマブロック編
![](https://elliemylove.com/wp-content/uploads/2022/02/14179f11d8a40dc9f9f40ea71ab3710a-1024x634.jpg)
テーマブロックは一目瞭然!そしてほぼ使わない、きっと
「テーマ」とひとくくりにされており、数は多いですが
「ウィジェット」ブロックにかなり近い存在です
ちょっと理解しづらいのが「テーマ」という言葉
CocoonはWordPressで使える「無料テーマ」ですが、
このテーマブロック自体とは切り離して考えたほうが良さそうです
(初心者にとってはここは特に重要ではなさそうなので深追いしません )
ブログ記事本文にはあまり使う機会はなく、固定ページとかページ全体で使うかな‥?
くらいで、使用頻度はこのブロック自体低いです
ブログ初心者に必須な項目を見出しに★★★ で表現しました
目指せWordpressマスター!
私の環境
WordPress 5.9.3, Cocoon Child バージョン: 1.1.3, スキンなし,
Gutenberg 12.9.0
(2022.04.11時点での最新バージョン)
M1 macOS Monterey 12.2.1
ブラウザはBrave バージョン: 1.36.117
テーマブロックの種類は全部で 23個
まずは、トップメニュー、もしくはコンテンツエリアの「+」マークを押して、
テーマブロックを開いてみましょう、全部で 23種類 あります
![](https://elliemylove.com/wp-content/uploads/2022/02/9ecd2d3ad3d1e7105bd31f29fff4ad6e-2-1024x669.jpg)
全 23 種類 を上から順に紹介していきます
![](https://elliemylove.com/wp-content/uploads/2022/04/ab146c5a6157523aa1514c4c4c218314-395x1024.png)
ナビゲーション ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/2bc61ae77eee99b2595e3bcaf2ffa1ef.png)
ブログに設定している「トップのメニュー」「ピックアップ」「フッター」などを設置できます
ツールバー「空から始める」を選んで、自分で自由に記事をメニューとして作り込むこともできる…
らしいのですがうまくいきませんでした汗
↑トップのメニューなどは、ダッシュボード>外観>メニューから作成します
![](https://elliemylove.com/wp-content/uploads/2022/04/fa10663b7c65fdfb8bbf29ccb09434ce-1024x735.jpg)
詳しいサイトを見つけました!
サイトロゴ ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/43786b0fbc36d62e1c1909c051105775.png)
![](https://elliemylove.com/wp-content/uploads/2022/04/bf4883264cea1b1dd272d1efd930555f.png)
ファビコンとは違うのかな‥?一応設定してみたのですが、特に表示もされず、よくわかりませんでした!すみません汗
![](https://elliemylove.com/wp-content/uploads/2022/04/b6e38e7b4c3db9149abe6172bdfec431-1024x252.png)
↓ここに埋め込んでみました
![ゲーム実況大全](https://elliemylove.com/wp-content/uploads/2022/08/cropped-e55cb5f8fdddfaa045dfde908cf5b548.png)
サイトのタイトル ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/11252ef2d0cb9097b0f5061deb57c2c3.png)
ゲーム実況大全
サイトのタイトルをH1で挿入できます
ダッシュボード>設定>一般 の「サイトのタイトル」を反映させます
なんでこのタイトルなの?って感じですがとくに深く考えずつけてしまいました。。!
サイトのキャッチフレーズ ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/aa4983ac20a7ca9231c68a496a65764c.png)
ゲーム実況をやってみよう!
こちらは、ダッシュボード>設定>一般 の「サイトのキャッチフレーズ」を反映しません!
このブロックで入力したことが反映されるようです ややこしい‥
簡単な挨拶を登録してしまうのもありかもしれませんね笑
ただ、登録したフレーズを変更すると、サイトのキャッチフレーズブロック全てに反映されますので注意
クエリーループ ★☆☆ ↓下3つの記事が見出しにも反映
![](https://elliemylove.com/wp-content/uploads/2022/04/cfffe88a06c78f1b11e3f3f643728b89.png)
これ、凄いですが難しいです!
これまでウィジェットブロックで「最新の記事一覧」なんかを挿入できていたのですが、
そういう記事たちを「最新」ではなく「自分の好きな単語」などでまとめたものを、
一覧として表示させることができるよ という機能のようです!
これは若干説明が難しいので、機会をみて解説したいと思います
↓にクエリーループブロックを表示させてみました
「Apple」というキーワードで「過去からさかのぼって」「3件グリッド表示」でソートした記事一覧です
背景グラデーションも試してみました
かわいい!これは使いこなせたら楽しいのかもしれない‥
でも実際使うかな・・?!
投稿一覧 ☆☆☆ ↓下3つの記事が見出しにも反映
![](https://elliemylove.com/wp-content/uploads/2022/04/ec0cda29d8a801cb82b5a0fed415423e-1.png)
これも先程のクエリーループの「最新投稿」でソートしたもの、という風に考えましょう
先程のクエリーループと同じでこのようなアイキャッチを含んだもので、リスト表示 or グリッド表示が選べるようです(クエリループのが選べる種類は多かった)
-
PS5 音の可能性|4K120Hzを維持しG One × DACで至高の音響環境を
朝から晩まで働き、唯一の休息は一人ゆっくりとPS5のゲームに向き合う時間… その時間、「音環境をグレードアップ…
-
【タイプ別15選】ゲーム実況サムネイルにおすすめのフォント【Adobe Fonts編】
Adobe CCやPhotoshop単体でも使える【Adobe Fonts】 ゲーム系You Tubeでおすす…
-
【無料】ゲーム実況のサムネイル作成におすすめフォント7選【Canva】
サムネイルの見栄えが変わる!とにかく太いフォントを選ぼう!! ゲーム系You Tubeでおすすめのフォント7つ…
-
【動画作った】1ヶ月単位で使えちゃう月100GB大容量&縛りなしクラウドWifi【1日上限&速度制限なし】
せっかく使わせていただいた!のでもっともっと詳しく書いちゃいます! クラウドWiFIのどんなところがいいのか?…
投稿タイトル ☆☆☆ ↓下1つの記事が見出しにも反映
![](https://elliemylove.com/wp-content/uploads/2022/04/bd9ddd4084509fcacdd1759d8c41dfe4.png)
投稿タイトルを挿入すると、今回の記事の「投稿タイトル」を見出しH2で挿入してくれます↓
WordPress × Cocoon × Gutenberg|5. テーマブロック編
投稿の抜粋 ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/10971df7426bd1ad5439b573381c3905.png)
出ました!「抜粋」
「続き」ブロックが挿入されていないと↓この抜粋文は表示されません
どこまでが「抜粋」かを判断できないようですね
サイドバー>投稿>抜粋 に手入力したものでもいけます
↓は手入力の抜粋が反映されているようなので
手入力の抜粋のほうが、続きブロックより優先される、 ということでしょうか
手入力の抜粋です ※詳しくは本文で!
↑自動で「続きを読む」のリンクを生成してくれます、文字は好きに変えられます
でも、同記事内で、抜粋をもう一回使うってことあるのかな‥?
投稿のアイキャッチ画像 ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/50f442dbcf07eb7ea7b6088515f1bd62.png)
![](https://elliemylove.com/wp-content/uploads/2022/02/14179f11d8a40dc9f9f40ea71ab3710a.jpg)
アイキャッチ画像が設定されると反映されます
アイキャッチ画像は、
右上の歯車マーク(設定)>投稿>アイキャッチ画像 からアップロードできます
![](https://elliemylove.com/wp-content/uploads/2022/04/ea2c7257c3975b5084b1bd452a5619bb-338x1024.jpg)
投稿コンテンツ ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/20ffaccd42c75bc146f4384c4ad63544.png)
この「投稿コンテンツ」を挿入してしまうと、
この場所から、またこのページが1から始まることになります
↓↓↓1から始まる例
ウィジェットブロックも攻略しました!残すはテーマ・埋込・Cocoonブロックのみ
実は、今回のテーマブロックと次回の埋め込みブロックは、さらっと概要だけ説明だけして終わりにしようと思っています
そのくらい簡単です!種類が多いだけなので怖くありません
また、うまく表示されない・ちょっとよくわからないブロックも多々あったのですが
あまり使用頻度が高くなさそうなので深追いしていません_(._.)_
ではいってみよう!
…
‥怖いですね!ちなみにエディタ画面ではコンテンツの中身は表示されず、プレビューでは見えるようになります
![](https://elliemylove.com/wp-content/uploads/2022/04/0afaaa50c31f20a9b6e0a81437e465d3-1024x145.png)
どういうタイミングで使うかわかりません‥!
投稿者 ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/b8b086b2264a5ad76005679580646af6.png)
投稿者を挿入できます
複数人で運営しているときは必要かもですね!
アイコンが表示されないのはなんでだろう・・
投稿日 ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/cdf44f1ff06de22429ba8992b8ade566-1.png)
そっか‥下書き開始したの2022年02月18日でした‥2ヶ月経っちゃってる!
投稿日を更新すると、このブロックも更新されます
投稿カテゴリー ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/cdf08ca615c9029ad6b8594c7b25295f.png)
カテゴリを挿入できます
アイキャッチ画像と同じく、右上の歯車マーク(設定)>投稿>カテゴリにチェックを入れる
で設定できます
投稿タグ ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/c32d265aa21ceb4170aa98f5ca043710.png)
タグを表示してくれます
タグ付けしていない場合は空白になります
カテゴリと同じく、右上の歯車マーク(設定)>投稿>タグ入力
次の投稿 ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/9971a2a5996d0b5d2480a06531d26f2e.png)
次の投稿へのテキストリンクを作成できます
「次」「次の投稿」など好きに記載できます
前の投稿 ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/484f4cd619dbad13c12ca330d4c7eea9.png)
タイトルを含めることもできます
公開されていないと空白になったりします
基本的にはCocoonだと記事下部に
「前の記事」「次の記事」がタイトルとアイキャッチ画像付きで表示されているので、余り使うことはないのかなぁと思います
投稿コメント ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/791eb84932c9b64b2d3dfbbcd12b27fc.png)
コメントが入ると反映されます!
コメントがないと空白になります
ログイン/ログアウト ☆☆☆
これは難易度が高そうです‥省略!
タームの説明 ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/8b465716a753febac45783d1ff094d37.png)
タームの説明
アーカイブを表示する際、カテゴリー、タグ、カスタムタクソノミーの説明を表示します。
すみません全然わからない‥省略!
アーカイブタイトル ☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/915944b138885f44976752066541ac7c.png)
アーカイブタイトル
クエリーしたオブジェクトに基づきアーカイブタイトルを表示します。
これもわからない‥!省略!
おそらくこちらが関連記事?かなと思います
![](https://elliemylove.com/wp-content/uploads/cocoon-resources/blog-card-cache/7b8caf614e3bd7acbf60f1d67e260c65.jpg)
Post Author Biography (=著者プロフィール)☆☆☆
![](https://elliemylove.com/wp-content/uploads/2022/04/68b4e210a38125515f270c487767606f.png)
ついに英語になった!笑
ダッシュボード>ユーザー>プロフィール>あなたについて プロフィール情報
が反映されます
Avatar(=アバター) ☆☆☆
これをどこで設定するのか見ておきます!
Post Author Name (=投稿者名)☆☆☆
やったー!とりあえず終わり!
次の埋め込みブロックもサクサクいきましょう!
若干駆け足になって不明点も多くて申し訳ないです
しかし、これらの項目は記事執筆にはほとんど使わないということは伝わったのではないでしょうか?!
もし、活用事例がありましたら知りたいです
コメント