Twitterはこちら

【Cocoonテーマ】自分で作成したアイコンをワードプレスでブログ活用する方法

自分で作成したアイコンをワードプレスでブログ活用する方法ブログ運営
おこ丸
おこ丸

自分でアイコン作成したけど、どうやってブログで使うの?

先生
先生

ワードプレスで設定する方法を見てみましょう。

ワードプレスでブログ作成中の初心者ブロガー向けの記事です。
吹き出しを自分らしく変更するだけで、なんとなく気分が上がりませんか?

わたしはブログ開設した時点でアイコンを変更していました。
それだけでプロフェッショナルに近づいたような気分となり、ブログ運営のやる気が上がった記憶があります。

今回の記事で分かること
  • 自分で作成したアイコンをプロフィールに使用する方法
  • オリジナルキャラクターのアイコンを吹き出しに活用する方法

ブログを始めたころは、デザインのカスタマイズを行う余裕はないと思います。
オリジナルアイコンを使用すると、それだけでブランディングできるのでおすすめ!

ちなみに自作アイコンの作り方がわからない方は、こちらの記事にCHARATを使用した無料アイコン作成の手順を解説していますのでご覧ください。

さっそくワードプレスで自作アイコンを活用しましょう。
※Cocoonと呼ばれるテーマでブログ運営しているので、操作手順や画面画像は全てCocoonテーマです。

ワードプレスでプロフィール画像を変更しよう

  • ワードプレスにログインします
ワードプレスにログイン
  • 「ユーザー」にカーソルを合わせます
あなたのプロフィールをクリック
  • 「あなたのプロフィール」をクリックします
画面を下へスクロールする
  • 画面を下にスクロールすると「プロフィール画像のアップロード」があります
プロフィール画像のアップロード
  • 「選択」ボタンをクリックします
ファイルのアップロード
  • 「ファイルをアップロード」タブを押します
アップロード画像の選択
  • プロフィール画像を選択します
  • 「代替えテキスト」に画像の説明を入力します
代替えテキストを入力
代替えテキストとは?

「altテキスト」とも呼ばれ、画像が適切に表示されなかった際に、画像の代わりに表示されるテキストのことです。

  • 「画像の選択」をクリックします
「画像の選択」をクリック
  • プロフィール画像の設定をすると以下のようになります
プロフィール画像の設定完了

プロフィール画像は新アイコンに更新される

プロフィール画像は設定変更すると、自動的に新しいアイコンに更新されます。
特にブログ記事に反映する手順はないので、初心者ブロガーにおすすめ!

おこ丸プロフィール画像

わたしのプロフィール画像はこんな感じです。
CSSでデザインをカスタマイズしているので、その方法は別の記事で語るつもりです。

ワードプレスで吹き出し画像を変更しよう

次に吹き出しコメントの画像を自作アイコンに変更する手順を解説します。

  • 「Cocoon設定」のタブにカーソルを合わせます
「Cocoon設定」をクリック
  • 「吹き出し」ボタンをクリックします
「吹き出し」ボタンをクリック
  • Cocoonの初期状態は以下の通りです
Cocoonの初期状態
  • 「新規追加」ボタンをクリックします

上から順に入力します

確定する設定項目
しっかりと決める項目
  • 「タイトル」→記事に使用する際に使います
  • 「名前」→画像の下に表示される名前です
  • 「アイコン画像」→ココを自作アイコンで設定します

こちらはブログ作成時に変更できる項目です。

変更可能な項目
ブログ作成時に変更できる項目
  • 吹き出しスタイル
  • 人物位置
  • アイコンスタイル
    ※とりあえず設定しておけばOK

「保存」ボタンをクリックします

吹き出し設定の保存
  • 新しい吹き出しの登録完了です
吹き出し設定完了

新アイコンの吹き出しをブログ記事で使う方法

ブロックエディターを使用しているので、そちらの手順と画像で解説しています。

  • 「プラスマーク」をクリックします
「プラスマーク」をクリック
  • 「Cocoonブロック」ボタンをクリックします
「Cocoonブロック」ボタンをクリック
  • サブメニューの「吹き出し」をクリックします
サブメニューの「吹き出し」をクリック
  • 「スタイル設定」で希望アイコンやデザインに調整します
「スタイル設定」を行う

アイコンスタイルの見本

Cocoonの吹き出しは4パターンあります。

デフォルトの吹き出しイメージはこちらになります。

デフォルトの吹き出し

フッラトの吹き出しイメージはこちらになります。

フラットの吹き出し

LINE風の吹き出しイメージはこちらになります。

LINE風の吹き出し

考え事の吹き出しイメージはこちらになります。

考え事の吹き出し

吹き出しの画像がオリジナルに変更するだけで、かなりブログ記事の全体がカッコよく見えますね。

まとめ:自作アイコンを使うだけでサイトが自分らしくなる!

今回はワードプレス【Cocoonテーマ】を使用して自作アイコンに変更する手順を解説しました。3分で変更できる!まずは自作アイコンに変更しましょう。

まとめ
  • プロフィールや吹き出しアイコンを変更するとカッコよくなる
  • 自作アイコン使用で作業者のモチベーションがアップする
おこ丸
おこ丸

ぜひやってみてね!

先生
先生

今日はここまで。終わり

コメント