2018年6月24日の内容『ビジュアルエディタとテキストエディタ』『アイキャッチの設定』

            <img src="http://saekosensei.com/blogclub/wp-content/uploads/chloe-bourhis-715346-unsplash-1024x768.jpg" alt="" width="700" height="525" class="alignnone size-large wp-image-220" />

6月24日は、Wordpressの『ビジュアルエディタ』と『テキストエディタ』の違いの確認と、『アイキャッチ』画像の設定を学びました。

ビジュアルエディタとテキストエディタ

『ビジュアル』と『テキスト』は、投稿画面のタブで切り替えます。

ビジュアルの場合、画像が表示されるなど、実際のブログと似たような見栄えで編集ができます。

テキストの場合は、HTMLタグで表示されます。

ビジュアルエディタとテキストエディタの使い分けは?

ビジュアルエディタ

ビジュアルエディタは、写真などの配置を確認しながら書くことができますので、初心者の方もなじみやすいです。

ビジュアルエディタの欠点は、本番のブログと全く同じ見栄えではないこと、余計なタグがついたりすることです。

このようなタグがついたりします。

本番のブログプレビューを確認しながら書けば大きな問題ではありません。

テキストエディタ

テキストエディタの利点は、タグがわかれば正確に画像などの配置ができることです。

慣れてくると、ドラッグ&ドロップをして移動するビジュアルエディタより使いやすいです。

基本のタグ

基本のHTMLタグをおさらいしておきましょう

aタグ

リンクを作るタグです

<a href=”リンク先のアドレス”>文字または画像(img)タグ</a>

imgタグ

画像を表示するタグです

<img src=”画像のアドレス”>

コピペのときは、ビジュアル・テキストの確認を

HTMLコードのついた文字を貼り付け、画像などを表示させる場合は、テキストエディタに貼り付けてください。

『テキスト』モードで張り付けると

きちんと画像が表示されました。

『ビジュアル』モードで張り付けると

コードのまま表示されてしまいます

アイキャッチ

アイキャッチとは、『見出し画像』のことで、記事一覧のときに、記事の内容を象徴的に表す画像です。

記事の中に使われている画像でなくても設定できますが、記事の内容に合った画像を選択することをおすすめします。

アイキャッチ画像の設定

投稿画面右下の『アイキャッチ画像を設定』をクリックします

画像をアップロードして

右下の『アイキャッチ画像を設定』ボタンを押します

このように設定されている画像が表示されます。

あとは、記事を公開・もしくは更新すれば完了です。

アイキャッチ画像のサイズ、位置などは『テーマ』によって違う
アイキャッチの表示のされ方は、選択している『テーマ(着せ替えデザイン)』によって大きく異なります。
自分の好きな位置に表示させるためには、コーディング、プログラミングの知識が必要ですので、初心者のうちは自分の好みのテーマを探すことからはじめてみましょう。

その他にやったこと

  • サイドバーウィジェットの配置基礎
  • WordPressのログイン画面のアドレス『http(s)://ブログのアドレス/wp-admin』
  • 縮小専用の復習
  • 投稿の削除、ゴミ箱について

まとめ

今回は、テキストエディタとビジュアルエディタの違いを学び、アイキャッチが設定できるようになりました。

今回勉強した内容については、次回も復習しますのでご安心ください。

次回

7月10日(火)
13:30-15:00
会議室D

今回の復習と、Jetpackというプラグインの導入を行う予定です。

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