STEP3-5ブログに画像を入れたり文字を装飾してみよう!

あゆこ
あゆこ

今回はブログに画像を入れたり、

文字を装飾したり、

記事をより見やすくするための方法をお話します!

さくら
さくら

文字の装飾って・・・

さくら
さくら

?!

あゆこ
あゆこ

・・・そうそう、そんな感じです。

あゆこ
あゆこ

ブログに画像が入ると説明がわかりやすくなったり

文字だけの文章よりも読みやすくなります。

 

文字の装飾も、文章を読みやすくしたり

伝えたいことをを強調したいときに便利です。

さくら
さくら

では早速、いってみよー!

やってみよ~!♪

あゆこ
あゆこ

・・・。

(さくらさん今日テンション高いな~)

ブログで画像を使うにはまず画像のアップロード!

あゆこ
あゆこ

ブログの記事やブログのトップページなど

ブログで画像を使える場所は沢山ありますが

まずは使いたい画像をワードプレスに入れなければなりません。

さくら
さくら

画像をワードプレスに入れる。。。?

あゆこ
あゆこ

そうです!

撮った写真やダウンロードした画像など

あなたのパソコンの中にある画像のデータを

ワードプレスに入れるのです。

 

これを画像のアップロードと言います。

 

さくら
さくら

なんか・・・難しそ・・?

あゆこ
あゆこ

いえいえ!画像のアップロードは簡単に出来ますよ!

まずはやってみましょう♪

画像をワードプレスにアップロードしてみよう

まず、使いたい画像を用意します。

 

分かりやすいようにデスクトップに画像を置きました。


 

次にダッシュボードのメニューから【メディア】→【新規追加】をクリックします。


するとこのような画面が表示されます。

これがメディア(画像)のアップロード画面です。

ここに先ほどデスクトップに置いたねこ画像を入れるのですが、その方法は二つあります。

 

①ドラッグ&ドロップで入れる

 

メディアのアップロード画面の右上の四角が重なったようなボタンをクリックします。

 

すると今見ている画面が小さくなります。

(他の画面が開いている場合はその画面を四角ボタンの横の「ー」ボタンをクリックして最小化してください)

デスクトップのねこ画像とメディアのアップロード画面が両方見える状態にしたら、

ねこ画像をマウスで左クリックしながら(指を離しちゃだめですよ!)

『ここにファイルをドロップ』と書かれているところまで持っていき、左クリックを離します。

(これをドラッグ&ドロップといいます。)

これでねこ画像がアップロードされました!


 

ちなみに・・・小さくなった画面は画面右上の四角ボタンで元にもどせます^^

 

②ファイルを選択して入れる

 

次にファイルを選択して画像をアップロードする方法をご紹介します。

先ほどのメディアのアップロード画面の【ファイルを選択】というボタンをクリックします。


 

するとフォルダが開きます。

①アップロードしたい画像が置いてある場所をクリックします。

②アップロードしたい画像を選択します。

③【開く】をクリックします。


 

ねこ画像がアップロードされました!

さくら
さくら

画像のアップロード、本当に簡単だね!

あゆこ
あゆこ

そうそう、

画像のアップロードは記事の投稿画面からもできるんですよ!

 

 

 

記事投稿画面から画像をアップロードする

まずは記事投稿画面に入ります。


 

記事投稿画面が開いたら【メディアを追加】をクリックします。


 

すると『メディアを挿入』という画面に入りますので

【ファイルをアップロード】をクリックします。


 

この画面になったら先ほど同じ手順(ドラッグ&ドロップかファイル選択)で画像をアップロードできます。


 

アップロードされた画像はこのように表示されます。

あゆこ
あゆこ

記事の投稿画面からアップロードする方法を知っていると

記事を書いている途中に

 

「あ、ここに画像を入れたいな」

 

と思った時に記事投稿画面を閉じずに

そのまま画像をアップロードできるので便利ですよ♪

 

あゆこ
あゆこ

次は記事の中にアップロードした画像を入れてみましょう!

記事本文に画像を挿入する方法

 

記事の投稿画面の【メディアを追加】をクリックします。


 

するとアップロード済の画像が表示されますので記事に挿入したい画像を選択し、

【投稿に挿入】をクリックします。


 

すると、記事の文中に画像が挿入されます。

あゆこ
あゆこ

次は文字を装飾してみましょう!

記事の文字を装飾する方法

あゆこ
あゆこ

文字の装飾は色々あるので順番に説明していきますね!

文字の大きさを変える

 

文字のサイズを変えるには、まずサイズを変えたい文字を選択します。

下の文章の『今日は』という文字を大きくしたいと思います。

①『今日は』という文字を選択する

②18pxと書かれているところをクリックする


すると文字のサイズが選べるタブが出て来ます。

試しに28pxをクリックして見ましょう。


 

『今日は』が大きくなりました(^^)

この手順で文字のサイズを大きくしたり、小さくしたりできます。

 

文字を太字にする

先ほど大きくした『今日は』という文字を今度は太くしてみます。

まず太字にしたい文字を選択し、次に 「B」のボタンをクリックします。

『今日は』という文字が太字に変わりました^^

 

文字の色を変える

次は『ゴーヤチャンプルー』という文字の色を変えてみます。

まず色を変更したい文字を選択し、次に 「A」のボタンの横の▼をクリックします。


 

するとこのようなパレットが出てきて、好きな色を選べます。(ここでは赤を選びました)

『ゴーヤチャンプルー』が赤色に変わりました^^

 

さくら
さくら

文章がカラフルになって嬉しいな♪

あゆこ
あゆこ

基本的な文章の装飾は以上です。

次は「見だし」を設定してみましょう!

見出しを設定する

さくら
さくら

「見だし」ってなーに?

あゆこ
あゆこ

「見出し」とは

丁度この真上にある【見出しを設定する】というタイトルの様なものです。

 

 

他にもこのページの、ココも見出しを使っています。

あゆこ
あゆこ

見出しには、文章を段落に分けて読みやすくする役割の他に

見出しを設定すると、自動的に目次に反映されるので

この記事にどんなことが書かれているのかを読者さんにわかりやすく

伝えることができます。

 

下の画像はこのページの目次です。

見出しが目次に反映されている事がわかります。

さくら
さくら

へー見出しって重要なんだね!

あゆこ
あゆこ

さらに!

見出しをつける事でSEO的にも効果があるのです!

ブログを書くときは見出しを使うようにしましょう!

 

あゆこ
あゆこ

ではさっそく見だしをつけて見ましょう!

 

まず、見出しにしたい文章を入力します。

試しに『本日の夜ご飯のメニュー』という文字に見出しをつけます。

 

①見出しをつけたい文字を選択して

②【段落】をクリックする


 

すると見出しの種類を選べるタブが出てきます。

【見出し2】を選択してみます。


 

『本日の夜ご飯のメニュー』が見出しになりました!^^


 

同じように次は『ゴーヤチャンプルーのレシピ』を【見出し3】にしてみます。


 

【見出し2】より小さい【見出し3】が出来ました。


 

最後に『材料』を【見出し4】にしてみます。


 

【見出し3】より更に小さい【見出し4】が出来ました。

あゆこ
あゆこ

試しに実際のページではどんなふうに表示されるか見てみましょう!

 

あゆこ
あゆこ

ちゃんと見出しが目次に反映され、

文章自体も見やすくなっているのがわかりますね!

 

これで見出しの設定の説明は終わりです。

 

※見出しの色やデザインはこちらで選択したスキンによって変わります。

 

リンクを貼る方法

あゆこ
あゆこ

次に、記事内の文字や画像にリンクを貼る方法を説明していきます。

さくら
さくら

リンクって

クリックしたら違うページに飛ぶってやつだよね?

あゆこ
あゆこ

そうです!

 

例えば下の画像の

「あゆこへのメールはこちらからどうぞ」

という文字にはリンクが貼られていて、

クリックするとメール送信できるお問い合わせページに飛ぶようになっています。

あゆこ
あゆこ

リンクを貼る事で読者さんにとっても便利ですし、

アフィリエイトをする上で商品を紹介する時にも

リンクは必須になるのでリンクの貼り方はしっかり覚えてくださいネ!

では、実際にリンクを貼っていきましょう!

 

まずはリンクを貼りたい文字を選択します。

下の作り方はこのブログのレシピを参考にしました!という文章の

『このブログ』という文字にリンクを貼る事にします。

①リンクを貼りたい『このブログ』という文字を選択します。

②リンク挿入ボタンをクリックします。


 

すると選択した文字の下にURLを入力出来るボックスが表示されますので、

そこに飛ばしたいページのURLを入力し、青い矢印ボタンを押します。


 

『このブログ』という文字にリンクが貼れました!^^


 

また、同じように画像にを貼る事が出来ます。

①リンクを貼りたい画像をクリックして選択します。

②リンク挿入ボタンをクリックします。


 

すると画像の下にボックスが表示されますので

後は飛ばしたいページのURLを入力するだけです♪

 

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

あゆこ
あゆこ

最後にアイキャッチ画像を設定する方法をご説明しますね!

 

アイキャッチ画像とは投稿する記事のイメージ画像の事です。

アイキャッチ画像を設定することで、その記事の内容のイメージを読者さんに伝えることが出来ます。

 

あゆこ
あゆこ

ではさっそくアイキャッチ画像を設定していきましょう!

 

まず、アイキャッチ画像に設定したい画像をワードプレスにアップロードしておきます。

 

アイキャッチ画像設定のメニューは投稿画面の右メニューの下の方にあるので下の方へスクロールしてみてください。


 

アイキャッチ設定メニューが表示されたら

【アイキャッチ画像を設定】をクリックします。


 

するとアップロード済の画像が表示されますので、

①アイキャッチに設定したい画像をクリックして選択し

②【アイキャッチ画像を設定】をクリックします。


 

するとアイキャッチ設定メニューに選択した画像が表示されます。

これでアイキャッチ画像の設定は完了です!


 

記事を投稿するとブログのトップページにアイキャッチ画像と共に新しい記事が表示されます^^


 

あゆこ
あゆこ

お疲れ様でした!!

これで基本的な文字の装飾や投稿の設定はすべて完了です!

さくら
さくら

ヨシ!!これから記事をガンガン書くぞ~~!!

あゆこ
あゆこ

そう!ワードプレスを使いこなすには、

とにもかくにも実践して慣れる事です!

あゆこ
あゆこ

間違えたり、変な記事を書いてしまっても後で削除できますので

まずは色々と試して見てくださいネ♪

 

まとめ

今回はいっぺんに沢山の事を説明をしましたが、1つ1つはそれほど難しくなかったと思います。

投稿画面の文字装飾ボタンの種類さえ覚えてしまえばやり方をいちいち確認しなくてもスムーズに文字の装飾をしたり、リンクを貼ったりすることが出来るようになります。

自分の書いた記事を見やすくわかりやすく装飾するのは大変と思われるかもしれませんが

やりだすと意外とハマってしまいます(;^ω^)

楽しんで記事を書いてくださいネ(*^-^*)

 

さくら
さくら

あれーうまくいかない?!

なんで~??

さくら
さくら

もっとこんな風にしたいのにやり方がわからない・・・

あゆこ
あゆこ

そんな時にはいつでもあゆこにメールで質問して来てください!

 

悩んでいる時間がもったいないですよ!

☆あゆこへのメールはコチラからどうぞ!

STEP3【ワードプレス構築編】 目次

1 ワードプレス最初に必要な設定をしよう!

2 ブログのテンプレートを変更しよう!

3 ワードプレスに必要なプラグインを入れよう! 

4 記事を投稿してみよう! 

5 ブログに画像を入れたり文字を装飾してみよう! 

6 グローバルメニューを設定しよう! ←次はココ!!

 ↓ 

STEP4へ! 

 

STEP3
5ステップ! アフィリエイト スタート講座

コメント