【初心者向け】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ライティングツールをまとめてみたので、是非試してみてください。

無料お試しがずっと可能なAI記事作成ツール
無料お試しがずっと可能なAIライティングツール

2024/7/26    ,

「記事作成にAIを活用してみたいなぁ」 「でも料金はかけたくないなぁ」 そんな方に無料お試しがずっと可能なAIライティングツールをいくつか紹介します。 もちろん無料お試しなので、機能をフルに使用するこ ...

Cocoon:記事一覧

 Cocoonの設定関係

 Cocoonの使い方

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