この記事には広告が含まれています。

【初心者向け】Cocoon(コクーン)の使い方【画像挿入編】

【初心者向け】Cocoon(コクーン)の使い方【画像挿入編】

この記事がお勧めな方

  • WordPressを始めたばかりの初心者の方
  • 無料テーマCocoon(コクーン)の画像挿入機能について知りたい方

Cocoon(コクーン)で記事に画像を挿入する方法

記事に画像を挿入するのはとても簡単です。

ブロックから「画像」を選択して挿入したい画像をアップロードすればOKです。

ブロックから「画像」を選択

Cocoon(コクーン)で変更できる画像のスタイル

Cocoon(コクーン)では挿入した画像に対して、14種類のスタイルを設定することができます。

Cocoon(コクーン)の画像スタイル
デフォルト角丸
ClarendonGingham
MoonLark
ReyesJuno
SlumberCrema
LudwigAden
PerpetuaMono

実際にどんな風に表示されるのか、Cocoon(コクーン)で作成したサンプルページを作成したのでそちらを参考にしてみてください。

スタイル以外にもこの記事に関係する実際のCocoon(コクーン)での画像表示を確認できます。

→ Cocoon(コクーン)で記事に画像を挿入した際の表示例一覧

Cocoon(コクーン) 画像の設定項目について

画像を挿入した際の設定項目について確認していきます。

パパくま
パパくま

画像を挿入した際に右側に表示される設定部分の説明です。

Cocoon(コクーン) 画像の設定項目
①:ALTテキスト(代替テキスト)画像の説明を入力する欄です
②:画像サイズフルサイズ・中・サムネイルの3種類が選択可能
③:枠線・角丸枠線の太さや角丸が設定可能

①:ALTテキスト(代替テキスト)

ALTテキスト(代替テキスト)の欄にはその画像の説明を入力します。

【入力時の注意点】

  • 記事の内容に関係のないデザイン的な画像のAltテキストは「空欄」にする
  • 記事の内容にそったAltテキストを簡潔に入力する

②:画像サイズ

画像サイズはフルサイズ・中・サムネイルの3種類から選択することができます。

Cocoon(コクーン)フルサイズ・中・サムネイル画像

③:枠線・角丸

画像に枠線と角丸を設定することができます。

【枠線】

Cocoon(コクーン)で枠線を設定した画像

【角丸】

Cocoon(コクーン)で角丸を設定した画像

画像に関するWordPress既存の機能

画像に関するWordPress既存の機能
①:配置画像の配置を変更可能
②:リンクを挿入リンクの挿入
③:切り抜き画像の切り抜き
④:画像上にテキストを追加画像上にテキストを表示させることが可能
⑤:デュオトーンフィルターを適用デュオトーンフィルターを適用する

①:配置

画像の配置を変更できます。

②:リンクを挿入

画像にリンクを設定することができます。

リンクを挿入

③:切り抜き

画像を切り抜いて表示させることができます。

④:画像上にテキストを追加

画像上にテキストを追加することができます。

画像上にテキストを追加

⑤:デュオトーンフィルターを適用

デュオトーンとは2色組を組み合わせて表現したデザインのことで、画像を目立たせたり雰囲気を変えたりすることができます。

実際にどんな表示になるかは、Cocoon(コクーン)で作成したサンプルページを確認してみてください。

→ Cocoon(コクーン)で記事に画像を挿入した際の表示例一覧

記事に画像を利用することは読み手の方に見やすく解りやすい記事を作成するのに重要です。

見やすい記事・解りやすい記事を作成することはブログの収益化にも直結してきます。

画像を利用して、見やすく解りやすい記事を作成してみてください。

ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。

ハムタ
ハムタ
パパくま
パパくま

現在は多くのAIライティングツールがあります。

そのほとんどが無料お試しでの利用が可能です。

お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。

無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。

関連記事

Cocoon:記事一覧

Cocoon(コクーン)の特徴を徹底解説!-初心者向け-

2024/9/28  

この記事では無料テーマ「Cocoon(コクーン)」の特徴について初心者向け解説しています。 また、別記事でCocoon(コクーン)の使い方やカスタマイズ方法についても解説していますので、参考にしてみて ...

     Cocoonの設定関係

    お勧めWordPress無料テーマ「Cocoon(コクーン)」のインストール方法
    「Cocoon(コクーン)」のインストール方法:初心者向け簡単ガイド

    Cocoon(コクーン)とは? Cocoon(コクーン)は無料とは思えない高機能なWordPressの無料テーマです。 WordPressを始めた初心者の方にお勧めするNo,1の無料テーマです。 Wo ...

    Cocoon(コクーン):お勧めのプラグインとお勧めしないプラグイン
    Cocoon(コクーン):お勧めのプラグインとお勧めしないプラグイン

    この記事がお勧めな方 Cocoon(コクーン)に最初に導入すべきプラグインを知りたい方 Cocoonと相性の悪いプラグインを知りたい方 Cocoonにお勧めのプラグイン Cocoon(コクーン)にお勧 ...

    Cocoon(コクーン):グーグルアナリティクスを導入する方法
    Cocoon(コクーン):グーグルアナリティクスを導入する方法

    この記事ではWordPressテーマ「Cocoon(コクーン)」を利用している方向けにグーグルアナリティクスを導入する方法を解説しています。 グーグルアナリティクスを導入する手順 Googleアカウン ...

    Cocoon(コクーン)のステマ規制対策
    Cocoon(コクーン)のステマ規制対策

    この記事ではCocoon(コクーン)のステマ規制対策について初心者向け解説しています。 ステマ規制とは2023年10月から開始された「ステルスマーケティング」に対する景品表示法による規制です。 この規 ...

       Cocoonの使い方

      Cocoonの使い方
      Coccon(コクーン)の使い方-初心者に解りやすく解説-

      この記事では、Coccon(コクーン)の使い方について初心者向け解説しています。 見出しの作成方法 記事作成の基本である「見出し」の作成方法について解説しています。 基本的な記事作成機能 基本的な記事 ...

       Cocoonのデザインカスタマイズ

      Cocoonカスタマイズ
      Coccon(コクーン)のカスタマイズ方法-初心者に解りやすく解説-

      この記事ではCoccon(コクーン)のカスタマイズ方法について初心者向け解説しています。 全体設定 メニューの作成方法 カテゴリーの作成と並び替えをする方法 ヘッダーカスタマイズ ヘッダーメニューの位 ...