求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

記事の本文に画像を挿入する - カスタムテーマ

画像を用意する

  • 画像は、redroof.jpg「800 × 534px」(テキストサンプル画像)

自動生成される画像の大きさを確認する

  • ここでの大きさの変更は、アップロード済みの画像には適用されません

https://cdn-ak.f.st-hatena.com/images/fotolife/w/webmaster-web/20160710/20160710140906.png

https://cdn-ak.f.st-hatena.com/images/fotolife/w/webmaster-web/20160710/20160710141615.png

画像の挿入位置を指定する

  • 記事の編集画面を開いて、記事を開きます

f:id:web-0220:20190409080517g:plain

プラグインをインストールして有効化

f:id:web-0220:20190409081019g:plain

画像挿入の位置
  • ビジュアルモードで作業する
  • 改行して画像の挿入する位置にカーソルを置く

f:id:web-0220:20190409081329g:plain

メディアを追加ボタンをクリック

「ファイルを選択」を押す

f:id:web-0220:20190409083709g:plain

添付ファイルの詳細
  • 「配置:中央、サイズ:中、リンク先:メディアファイル」で挿入する
  • クリックすると「800 x 534px」の画像が開きます

f:id:web-0220:20190409090052j:plain

f:id:web-0220:20190409091211j:plain

ページの表示を確認する
《プレビュー》

f:id:web-0220:20190409091729j:plain

画像を中央に揃えて表示する

/* 本文中の画像 */
.aligncenter {
  display: block;
  margin: 30px auto;
}

f:id:web-0220:20190409092651j:plain

画像のまわりに罫線を表示しないようにする

article img {
  border: none;
}