2019年4月9日の内容、文章を整え、画像を入れる

4月9日のブログ勉強会は、前回の復習で、長い文章をわかりやすく段落分けし、Canvaで作った画像を入れました。

文章の整形

↓こちらのように見づらい文章を

こちらのように設定していきます

スーツケースの選び方(整形後)

文章に段落を入れる

パソコンやスマホでは、ぎっしりと詰まった文章はとても見づらいです。

本番画面の表示で3行前後で空行を入れるようにしましょう。

見出しをつける

見出しはテキストモード

<h2>見出しにする文字<h2>

<h2>で囲うと表示されます

ビジュアルモードでは段落▼ の部分をクリックすると選べます。

見出しを使う時の注意

見出しは、あくまで文章の構造を表すものです。1、2、3と番号順にぶら下がっていくように使用しなければなりません。

文字の大きさや色を変える目的のために使ってはいけないことになっていますので注意が必要です。

見出し画像を作る

Unsplashで素材をダウンロード

Unsplash(アンスプラッシュ)というフリー(無料)の画像サイトで今回は見出しにする画像をダウンロードしました。

unsplash.com

動画

【初心者講座】Unsplashで画像をダウンロードする方法

Canvaで見出し画像を編集

Canva(キャンバ)という画像編集サイトで、文字入れをしました。

canva.com

動画

【初心者講座】Canvaを使ってブログの見出し画像を作る

リンクを入れる

『スーツケースとは』という文字に、ウィキペディアのリンクを入れ、別タブで開く設定をしました。

リンクは、テキストモードの場合

LINK(リンク)ボタンを押して

URL:リンク先のアドレス
リンク文字列:表示させる文字
リンクを新しいタブで開く:新しいタブで開く場合は☑を入れる

スマホでの見た目を確認する

スマホでの見た目をパソコンで確認するには、キーボードの

『Ctrl』と『Shift』と『 i 』を同時に押してください。(F12キーでも良いです)

右上に出てくる □が二つ重なったようなアイコン(スマホとタブレットを表しています)をクリックします。

するとスマホの表示が確認できるようになります。

まとめ

今回は、改行のない文章を読みやすく改行し、
Unsplashで画像をダウンロード
Canvade文字をのせて
投稿に見出し画像を設定しました。

リンクを作る復習をし、
h2で見出し文を作る方法を学びました

次回の予定

次回の開催は4月23日。

今回の文章整形の復習と、続きの作業を行います。
コードの記事内への埋め込みも行います。

タイトルとURLをコピーしました