Cocoonブロックエディタでの記事投稿方法について解説します!

Cocoonブロックエディタでの記事投稿方法について解説します!

WordPressにおける無料デザインテーマの中では確固たる地位を確立しているCocoon。

Cocoonデザインテーマですが、使いやすく分かりやすい、そして感覚的に使えるようにと各種便利な機能が織り込まれています。

ただ、Cocoonブロックエディタでの記事投稿の方法について分からないという人が多くいます。

そこで、当記事ではCocoonブロックエディタでの記事投稿方法について解説します。

WordPressにCocoonをインストールしてブログを始めたものの、肝心の記事投稿方法が分からないという人は、是非参考にして下さい。

当記事の執筆者

ココナラ

・ココナラプラチナランク継続4年以上
・Wordpressブログ作成実績1,000件以上
・ココナラ売上600万円以上

それでは本題に入りますね。

目次

Cocoonブロックエディタでの記事投稿方法

ここからは、Cocoonブロックエディタでの記事投稿方法について解説していきます。

Cocoonブロックエディタの記事投稿編

STEP
新規投稿の追加

WordPressのダッシュボード画面より『投稿』→『新規投稿を追加』をクリックします。

新規投稿の追加
STEP
投稿初期画面

新規投稿を追加すると、下記の投稿初期画面が表示されます。

ここから、Cocoonブロックエディタでの投稿を始めます。

投稿初期画面
STEP
タイトルを追加する

まずは、先程の画面内の『タイトルを追加』という箇所を右クリックして記事のタイトルを入力します。

今回は『テスト記事』と入力しました。

タイトルを追加する
STEP
ブログ記事を投稿する

続いて、『ブロックを選択するには』という箇所を右クリックして、記事本文を入力していきます。

今回は『これはテストです。』と入力しました。

ちなみに、一段落を書き終えて改行(Enter)すると、再度『ブロックを選択するには』が表示されますので、次の段落の記事を投稿して行きます。

ブログ記事を投稿する

Cocoonのブロックエディタでは、このように記事を投稿して行きます。

一段落を書き終えたら改行して再度記事を書いていく流れです。

Cocoonブロックエディタでの記事装飾方法

ここでは、Cocoonブロックエディタでの記事装飾方法について解説していきます。

記事内に見出しを入れる

記事内に見出しを入れて、読みやすくしましょう。

STEP
ブロックメニューを表示する

記事投稿画面左上に表示されている①『+』(ブロックメニュー)をクリックします。

ブロックメニューを表示する
STEP
見出しブロックを設置

投稿画面左側に画像のようにブロックメニューが表示されたら、この中から①『見出し』をクリックします。

すると、記事内に②『見出し』という背景文字が表示されますので、ここに記事の見出しを入れます。

見出しブロックを設置
STEP
見出しの挿入&レベル設定の完了

今回は、『サンプル見出し』と入力しました。

見出しを挿入して改行(Enter)すると、再度『ブロックを選択するには』が表示されますので、次の段落の記事を投稿して行きます。

見出しの挿入&レベル設定の完了

また、①『見出しブロック』内にてブロックメニューの②『H2』をクリックすると見出しレベルの変更が出来ますので、ここで設置する見出しレベルの選択が可能です。

※見出しの設定後でも見出しレベルの変更が可能です。

見出しレベルの変更

ちなみに、CocoonのH3デフォルト見出しはこんな感じです。(Cocoonのスキンにより異なります)

CocoonH3見出し

文字に装飾を入れる

Cocoonブロックエディタの文字装飾では、主に使われるものについて解説しています。

STEP
装飾予定の文字をドラッグする

装飾したい文字を①『選択(ドラッグ)』します。

すると、②ブロックメニューが表示されますので、このメニューの中から装飾種類を選択します。

装飾予定の文字をドラッグする
STEP
インライン

インラインは、文字を太字にする、色付き文字にしたい時に使用します。

インライン
STEP
マーカー

マーカーは、文字に色付きマーカー、または色付きアンダーラインマーカーを入れたい場合に使用します。

マーカー
STEP
フォントサイズ

フォントサイズは、文字の大きさを変更したい時に使用します。

フォントサイズ
STEP
文字装飾のサンプル

これらの事を踏まえて、今回は『文字色の変更&アンダーラインマーカー』にて文字装飾を行いました。

文字装飾のサンプル

文字にリンクを挿入する

STEP
リンクアイコンの選択&URLの記入

リンクを挿入したい文字をドラッグして、ブロックメニューの①『リンクアイコン』をクリックします。

すると、リンク先URLを入力するスペースが表示されますので、ここに②『リンク先URL』を記入します。

リンクアイコンの選択&URLの記入
STEP
リンク先URLの確定

リンク先URLを入力すると、①『このリンクを追加するにはEnterキーを押してください』というメッセージが表示されますので、Enterキーをクリックします。

リンク先URLの確定
STEP
リンク挿入の完了

下記画面のように、文字色&アンダーラインが共に青色に変化していれば、リンク挿入が完了しています。(Cocoonのスキンにより異なります)

リンク挿入の完了

画像を挿入する

記事内に画像を入れる事によって、記事全体の見栄えが良くなると共に、訪問者に少し休んでもらえるポイントにもなります。

STEP
画像メニューの呼び出し

まずは、①『画像を挿入したい箇所』をクリックして、②『+』(ブロックメニュー)をクリックします。

画像メニューの呼び出し
STEP
画像の挿入方法の選択

投稿画面左側に表示されるブロックメニューを少し下にスクロールすると、①『画像アイコン』が表示されますのでクリックします。

すると、②画像ファイルの挿入方法として、『アップロード』『メディアライブラリ』『URLから挿入』が表示されますので、挿入方法を選択します。

ちなみに、今回の例では『アップロード』にて進めて行きます。

画像の挿入方法の選択
アップロード

PCやスマホ内に保存されている画像を挿入

メディアライブラリ

WordPressブログのメディア内に保存されている画像を挿入
→ダッシュボード→メディア→ライブラリ内

URLから挿入

インターネット上に公開されている画像を直接挿入

STEP
画像ファイルのアップロード

STEP2でアップロードをクリックすると、PCやスマホ内のフォルダが表示されますので、表示されているフォルダ内に挿入したい画像が入っているのか?確認します。

※入っていない場合、画像ファイルが保存されている別のフォルダを選択してください。

フォルダ内に挿入したい画像を確認したら、①『挿入する画像ファイル』をクリックします。

次に、②ファイル名欄にて『画像ファイル名』を確認したら、③『開く』をクリックします。

画像ファイルのアップロード
STEP
画像の挿入が完了

すると、投稿画面の任意の場所に画像が挿入されます。

画像の挿入が完了
STEP
画像位置の調整

ちなみに、画像を挿入した場合、デフォルトでの配置は左寄せになっていますので、位置を変更する場合は『配置メニュー』をクリックして変更する事が可能です。

画像位置の調整
STEP
代替テキストの入力

代替テキストとは、別名alt属性と呼ばれており、Webサイトに含まれる画像の代わりになるテキストの事です。

Google検索など各種検索エンジンは、画像の内容を完璧に把握する事が難しいため、この代替テキストから画像情報の取得&判断を行います。

そのため、後述するアイキャッチ画像も含め、Wordpressに挿入する画像には必ず代替テキストを入力します。

そこで、代替テキストの設定ですが、挿入した画像をクリックすると投稿画面右側に画像ブロックのメニューが表示されますので、①『代替テキスト』内に画像の説明を入力します。

代替テキストの入力

記事の下書き保存

記事を書いている途中で、何らかのアクシデントによりそれが消えてしまう事があります。

そのような事にならないためにも、記事を書いている途中でも下書き保存する事をお勧めします。

STEP
下書き保存する

投稿画面右側にメニューが表示されますので、①『下書き保存』をクリックすれば、下書き保存完了です。

下書き保存する

Cocoonブロックエディタでの記事公開方法

WordPressブログに記事を書いたら、今度はいよいよ記事を公開します。

記事を公開する事により、Googleにインデックスされる可能性が出てきます。

その結果として、自分のブログにアクセスが集まる可能性が出るため、納得する記事が書けたら公開しましょう。

ちなみに、記事を公開するにあたっては、投稿画面右側に表示されている下記メニュー使います。

Cocoonブロックエディタでの記事公開方法

①パーマリンク(URL)
②カテゴリー
③タグ
④アイキャッチ画像

あわせて読みたい
WordPressで忘れがちなパーマリンクの設定方法を解説 Wordpressで記事を書いていると、色々な設定が必要になってきます。 例えば、ブログ訪問者の方が読みやすいように下記のような設定を行います。 ●文字を太字や赤文字に...
あわせて読みたい
WordPressのカテゴリーについて詳しく解説します ココナラでWordpressブログの制作依頼を受けていると、Wordpressに関して色々な質問がきます。 ちなみに、私はWordpressの操作方法についてはそれ専用のブログを作成し...
あわせて読みたい
WordPressの記事に画像やアイキャッチを設定する方法 Wordpressで記事を投稿する場合、投稿画面内でひたすら記事を書いていく事になります。 そして、記事は50行や100行、さらには200行以上にもなる場合もあると思いますが...

なお、投稿画面右側にメニューが表示されていない場合は、画面右上に表示されている①『設定』をクリックすると表示されます。

※この設定を1回クリックするごとに、メニューの表示・非表示が切り替わります。

メニュー非表示

パーマリンクの設定

WordPressのダッシュボード→設定→パーマリンクにおいて、『日付と投稿名』『月と投稿名』『投稿名』となっている場合、パーマリンクの設定が必要です。

※カスタム構造の場合も設定内容によってはパーマリンク設定が必要です。

パーマリンクの設定
STEP
パーマリンクを変更する

投稿メニュー内の①『URL』をクリックします。

すると、②『パーマリンク』が表示されますので、ここでパーマリンクを変更します。

パーマリンクを変更する

今回の例では、testに変更しました。

パーマリンク

カテゴリーの設定

ブログ訪問者向けに、分かりやすく記事を選択&購読してもらうためには、カテゴリーの設定は重要になります。

そのため、記事内容に沿ったカテゴリーを設定しましょう。

STEP
カテゴリーを設定する

投稿メニュー内の①『カテゴリー』をクリックします。

すると、設定されているカテゴリーが表示されますので、ここでカテゴリーを設定します。

※設定したいカテゴリーが無い場合、新規カテゴリーを追加にてカテゴリーを追加する事が出来ます。

カテゴリーを設定する

タグの設定

WordPressにおいて、タグとは投稿記事を分類するために付ける札という意味になります。

カテゴリーと似たような意味を持ちますが、カテゴリーは記事を大きな分類にまとめるのに対して、タグはより細かく分類するための機能です。

そして、適切にタグを利用する事により、ブログの利便性を向上させることが可能になります。

当ブログでは、下記画像のように投稿記事下部に表示されています。

STEP
タグを設定する

投稿メニュー内の①『タグ』をクリックします。

すると、『新規タグを追加』という項目が表示されますので、②『タグ入力欄』へタグを設定します。

今回は、『テスト』というタグを設定しました。

タグを設定する

アイキャッチ画像の設定

アイキャッチ画像とは、簡単に言うと記事の見出し画像の事です。

このアイキャッチ画像が無いと、ブログの見た目(印象)が全く変わってきますので、記事投稿の際には必ず設定しましょう。

アイキャッチ画像は、自作でもフリー画像でも構いません。

当ブログでは、下記画像内赤枠がアイキャッチ画像となっています。

アイキャッチ画像
STEP
アイキャッチ画像を設定する

投稿メニュー内の①『アイキャッチ画像』をクリックします。

すると、②『アイキャッチ画像を設定』という項目が表示されますので、これをクリックします。

アイキャッチ画像を設定する
STEP
アイキャッチ画像の選択

WordPressのメディアライブラリに入っている画像一覧が表示されますので、この中からアイキャッチ画像を選択します。

今回は、下記画像内赤枠の画像をアイキャッチとして設定します。

アイキャッチ画像の選択
STEP
代替テキストの入力

アイキャッチ画像にも、代替テキストを設定します。

設定方法は、画像の中からアイキャッチ画像を選択すると、投稿画面右側にブロックメニューが表示されますので、①『代替テキスト』内に画像の説明を入力します。

代替テキストの入力が完了したら、②『アイキャッチ画像を設定』をクリックします。

代替テキストの入力
STEP
アイキャッチ画像の設定完了

アイキャッチ画像内に設定した画像が表示されたら、設定は完了となります。

アイキャッチ画像の設定完了

ブログのTOPページには、デフォルトでこのように表示されます。

アイキャッチ画像の公開

記事を公開する

記事本文の入力、各種記事設定が完了したら、いよいよインターネット上に記事を公開します。

記事を公開しないと、いつまで経ってもGoogleに認識されない=訪問者が訪れないため、記事が完成したら必ず公開しましょう。

STEP
記事の公開①

投稿メニュー上部に表示されている①『公開』をクリックします。

記事の公開①
STEP
記事の公開②

再度確認のため①『公開』が表示されますので、クリックします。

記事の公開②
STEP
記事の公開③

『〇〇を公開しました。』と表示されたら、記事の公開は完了です。

お疲れ様でした。

記事の公開③
ぽんちゃん

Cocoonブロックエディタでの記事投稿~公開までお疲れ様でした。

まとめ

●Cocoonブロックエディタは初心者でも使いやすい構造となっています。
●ブロックに慣れれば、記事投稿~公開までスムーズに進みます。
●ブロックエディタに慣れるためには、ひたすら練習するのみです。

WordPressの無料デザインテーマ『Cocoon』は、無料デザインの中では操作性も高く使いやすくなっています。

また、記事投稿に関しても必要な機能が揃っているため、Wordpress初心者でも安心して使う事が出来ます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次