初心者のブロックエディター攻略!WordPressで基本的な記事作成

やっと!や~~っと!
記事が書けますよ、お嬢さん!
<<前回の続きです。

基本的な記事作成

<span class="fz-12px">素人師匠</span>
素人師匠

今回もyuji先生が書いてくれている通りにやってくれ♡

WordPressテーマCocoonの使い方とおすすめ初期設定
WordPressテーマのCocoonをはじめて利用する人向けに、SEO対策などを含めたのおすすめCocoon設定を紹介しました。SEOに強く機能性の高いブログにするために、この記事で一括設定してしまいましょう!
<span class="fz-12px">ドリミ</span>姫
ドリミ

ざ、、雑!

<span class="fz-12px">素人師匠</span>
素人師匠

それとも、ここまで教えてもらっても、
ドリミ姫にはできないんかね?

<span class="fz-12px">ドリミ</span>姫
ドリミ

む・・むかっ!

<span class="fz-12px">素人師匠</span>
素人師匠

見ながら自分でやってみ!
そして気づいたことを教えてちょーだい!

<span class="fz-12px">ドリミ</span>姫
ドリミ

・・がんばりましゅ。。

ブロックエディター攻略

<span class="fz-12px">素人師匠</span>
素人師匠

yuji先生の言う通りにできてるかの?

記事作成で必須な、ブロックエディターの
使い方をマスターするんじゃ!

<span class="fz-12px">ドリミ</span>姫
ドリミ

気になったことだけ挙げていきま~す!

ブロックの選択

<span class="fz-12px">ドリミ</span>姫
ドリミ

あれ?あれ?
ブロックが選択できない~!
って、
ブロックがうまく選択できない時は、

ヘッダーの三本線をクリックすると、
使用しているブロック一覧が表示されるから、
そこで選択できる!

<span class="fz-12px">素人師匠</span>
素人師匠

うむ!
初心者ならではの悩み解決じゃな!

<span class="fz-12px">ドリミ</span>姫
ドリミ

ブロックを複数まとめて動かしたい
時もリスト表示部分で動かせばいいから便利!

っても、まとめて動かすの難しいわ💦

あ、なるほど!
ブロックをグループ化
すればいいのね~!

の項目に記載!

ブロックの複製・コピー・グループ化・削除

<span class="fz-12px">ドリミ</span>姫
ドリミ

ブロックを複製したり
コピーしたり

グループ化したり
などしたい時は、
上述のリスト表示や
ブロックを選択して
「…」をクリック!

<span class="fz-12px">ドリミ</span>姫
ドリミ

複製だと直下に同じブロックができるし、
コピーだと離れた段落に貼り付けできるのね。

ブロックやカラムの枠線

<span class="fz-12px">ドリミ</span>姫
ドリミ

ブロックやコラムは背景色は付けられるけど、
枠線はつけられない。

枠線を付けたい時は、
「白抜きボックス」を使う!

▲アイコンはコレ
白抜きボックス

吹き出し設定

<span class="fz-12px">ドリミ</span>姫
ドリミ

「吹き出し」で使うアイコン画像
のサイズは、
160×160
がオススメよ!

大きなサイズだとうまくいかない時がある。。

<span class="fz-12px">素人師匠</span>
素人師匠

クロームのタブを開きすぎていないか?
使用容量によるのかもしれぬ!

ボタン

<span class="fz-12px">ドリミ</span>姫
ドリミ

ボタンの作り方、この記事わかりやす~い♡

https://kenjineer0224.com/cocoon-button/

カラムの垂直配置

<span class="fz-12px">ドリミ</span>姫
ドリミ

カラムを使う時、カラムを選択して、
コンテンツの垂直配置を選べる!

画像の配置

<span class="fz-12px">ドリミ</span>姫
ドリミ

画像の配置も画像を選択して、
コンテンツの配置を選べる!

文字色

<span class="fz-12px">ドリミ</span>姫
ドリミ

部分的な文字色は赤・青・緑以外は設定できない!
右サイドバーで色を選択すると、ブロック全体の文字色が変更されてしまう!

<span class="fz-12px">素人師匠</span>
素人師匠

ちなみにプラグインで解決できるが、、
ま、とりあえずはいいか!

<span class="fz-12px">ドリミ</span>姫
ドリミ

ちなみに、カラーパレットに追加できる色は種類!(Cocoon)
Cocoon設定>エディターで追加!

【Cocoon】カラーパレットに好きな色を追加する【6種増!】
「Cocoonのスキンに合ったカラーがブロックでも使えるようにならないかな。デフォルトのものじゃ、どうも自分のブログに合わないんだよな〜」←こういった疑問に答えます。Cocoonはアップデートによって、カラーパレットに自分の好きな色を6種類追加できる仕様になりました。ごにょごにょとコードをイジらなくても標準でできます。

リンク先の表示

<span class="fz-12px">ドリミ</span>姫
ドリミ

ブログカードを使うと、
ちょっとした装飾ができるけど、
日本語を含むURLだとうまくいかないみたいよ。

フツーにリンク先を記載してもうまくいく!

①段落にリンクしたいURLを記載(コピペ)

②左のような表示が出てくるので、
「リンクへ変換」をクリック

③もう一度リンク先URLをクリックすると、
左のような表示が出てくるので、
お好みで「新しいタブで開く」をクリック。

※別タブで開かない場合は不要

<span class="fz-12px">素人師匠</span>
素人師匠

使ってみて、自分なりにわかったことが増えたのぅ!

コンテンツを別の記事で使いたい時

<span class="fz-12px">ドリミ</span>姫
ドリミ

記事の複製はできないみたいなので、
ちょっとめんどくさいけど、
どうしてもコピーしたい場合は、
右サイドバーの
「すべてのブロックをコピー」して貼り付ける。

<span class="fz-12px">ドリミ</span>姫
ドリミ

あら!
「再利用ブロック」

という方法があるのね!便利~♡

よく使うブロックは再利用ブロックとして登録するといいのね!

WordPress同期パターン(旧再利用ブロック)の使い方・編集方法
WordPressには「同期パターン(旧:再利用ブロック)」という機能があり、共通で何回も使うような「定型文・テンプレート」を登録・利用することができます。 同期パターンとして一度テンプレートを作成す

ブロックエディターの種類は豊富!

<span class="fz-12px">ドリミ</span>姫
ドリミ

使いこなせるようになったら、すごくやりやすいかも!

<span class="fz-12px">素人師匠</span>
素人師匠

他にも盛り沢山の種類があるからの。

使いこなせるようになるのが楽しみだのぅ!

Cocoonのブロックエディターを使いこなそう!機能と使い方を動画で紹介! | WebNote+
Cocoonのブロックエディターの機能と使い方を動画付きで紹介しています。さらにCocoonのブロックエディターを更に快適に使う方法も紹介しています。記事執筆を効率化したい方はぜひ参考にしてください。

<span class="fz-12px">素人師匠</span>
素人師匠

やったね!
だいぶいい感じになってきたのぅ!

  • NEXT coming soon!
今ココ

LV0 初期状態 (プアリー)

プア度100
戦闘力0
HP0

まずはブログ開設!なんとか道具を揃えて武装しよう 💦

タイトルとURLをコピーしました