「ワードプレスで画像を使いたいけどどんなことが出来るんだろう?」

記事の顔にもなってくれる画像は表示の仕方でとっても表情を変えてくれます。自分が書く記事にあわせて変えていければ記事作成も楽しくなること間違いなし!



① 超基本。画像の挿入
・新規段落の追加後 / 半角のスラッシュ→【画像】選択
・【ブロックの追加】→【画像】選択
(以下の【メディアと文章】などのブロックを追加するときも同様の動作をします)

② 【設定】で画像を弄る
右上の歯車アイコン設定を押す
・【デフォルト】or【角丸】
・サイズ変換

③ メディアと文章
・文章と画像を並べて表示。
ツールバーから左右垂直と位置変更可。
右上歯車アイコン【設定】で、
・色設定
・画像、文字の大きさ変更
・モバイルでは縦に並べる←画像が上に文字が下にという表示になる

④ カバー
画像や動画を背景にして文字を飾れる。
画像と画像の上にかける色と文字を選ぶことが出来る


目次



WordPress初心者向けマニュアル。2020年度版~
ワードプレス基本の使い方から知っておいたら便利な小技まで動画や画像を使ってまとめています。初心者にオススメ。

超基本。画像の挿入


① 超基本。画像の挿入
・新規段落の追加後 / 半角のスラッシュ→【画像】選択
・【ブロックの追加】→【画像】選択
(以下の【メディアと文章】などのブロックを追加するときも同様の動作をします)


※1番のマークが【ブロックの追加】です。

「あ、違う画像を挿入しちゃった…」という場合は、
画像クリックをすると上記ツールバーにでてくる【置換】をクリックして画像変更しましょう。

【設定】で画像を弄る

こっちがデフォルト
こっちが角丸


② 【設定】で画像を弄る
右上の歯車アイコン設定を押す
・【デフォルト】or【角丸】
・サイズ変換


実際に触って遊んでほしい。
なぜってとっても楽しい。このサイトの記事をご覧の人は分かるように私は角丸表示が好きでそればっかりしていますが、

サイズ変換をするとこんなこともできます。

これは【画像サイズ】→【サムネイル】選択


いや~楽しい。

メディアと文章

女の子の可愛さが光ります。


③ メディアと文章
・文章と画像を並べて表示。
ツールバーから左右垂直と位置変更可。
右上歯車アイコン【設定】で、
・色設定
・画像、文字の大きさ変更
・モバイルでは縦に並べる←画像が上に文字が下にという表示になる


①と同じ要領で【メディアと文章】を記事内に挿入して試してみてください。

上に用意したサンプルと同じようなものを作れますか?
ちゃちゃーっと答えを載せてしまうと、

①メディアと文章挿入
②画像挿入
③メディアと文章をクリックして詳細から色設定
④画像を調整

ちなみに画像にも文字にもリンク張れますよ~

カバー


④ カバー
・画像や動画を背景にして文字を飾れる。
画像と画像の上にかける色と文字を選ぶことが出来る


文字だけVer

画像+文字+オーバーレイ白


上記のような表示にするには、
記事内に【カバー】追加後、右上アイコン【詳細】を押して希望の変更をすればオッケーです。

まとめる


画像で遊んでると記事作成に時間がかかるのが唯一の注意ですが、せっかくWordPressを使うならおおいに楽しんじゃいましょう。ぜひ、自分のワードプレス記事作成画面で試してみて。



① 超基本。画像の挿入
・新規段落の追加後 / 半角のスラッシュ→【画像】選択
・【ブロックの追加】→【画像】選択
(以下の【メディアと文章】などのブロックを追加するときも同様の動作をします)

② 【設定】で画像を弄る
右上の歯車アイコン設定を押す
・【デフォルト】or【角丸】
・サイズ変換

③ メディアと文章
・文章と画像を並べて表示。
ツールバーから左右垂直と位置変更可。
右上歯車アイコン【設定】で、
・色設定
・画像、文字の大きさ変更
・モバイルでは縦に並べる←画像が上に文字が下にという表示になる

④ カバー
画像や動画を背景にして文字を飾れる。
画像と画像の上にかける色と文字を選ぶことが出来る


基本的に「細かく変更したいな~」と思ったら対象個所をワンクリックして【詳細】を押せば大丈夫。

【WordPress】【mixhost】サイトやブログ作成を考える超初心者にオススメ【2020年】
「ブログを作りたいけど結局どれがいいの?」にお答えすると失敗談から言えば、というお話。

ワードプレス、サイト関連


  • 【WEB色見本】カラーピッカー+色見本コードをコピペ【イラストやブログサイトデザインに】
    デザインやブログ制作、イラスト作成などで「この色いいな」と思ったとき、すぐにカラーコードが分かれば便利ですよね。 このページでは、カラーピッカーで自由に色を選べる機能に加えて、ナチュラルでやさしい印象の色を多めに集めたWEB色見本を一覧で掲載しています。 コードはワンクリックでコピーできるので、サイト制作やバナー作成、配色アイデアに悩んでいる方にもぴったり。 見た目のやさしさと、実用性を両立したカラーツールを探している方におすすめです。


サイト最新記事


  • 夏だ!暑い!100均グッズで水遊びを思いっきり楽しみましょう【セリア・ダイソー】2024年購入品
    セリアとダイソーで手に入る100均グッズを使って、手軽に水遊びを楽しみませんか?この記事では、水鉄砲やビーチボール、水に当たると色が変わるヒットマーカーなど、お子様から大人まで楽しめるおすすめの水遊びアイテムをご紹介。100均アイテムで、夏の暑さを吹き飛ばす楽しい思い出を作りましょう!
  • AI画像生成で迷わない!初心者でも理想に近づけるプロンプト作成ツール
    AI画像生成のプロンプト作成で悩んでいる人に。理想の画像に必要な選択肢を選べば、自動でプロンプトができあがります。自分が作りたいものを言語化するお手伝いをします。 選択肢がない場合でも手入力項目もあり、コピペもできるようになっています。
  • 【WEB色見本】カラーピッカー+色見本コードをコピペ【イラストやブログサイトデザインに】
    デザインやブログ制作、イラスト作成などで「この色いいな」と思ったとき、すぐにカラーコードが分かれば便利ですよね。 このページでは、カラーピッカーで自由に色を選べる機能に加えて、ナチュラルでやさしい印象の色を多めに集めたWEB色見本を一覧で掲載しています。 コードはワンクリックでコピーできるので、サイト制作やバナー作成、配色アイデアに悩んでいる方にもぴったり。 見た目のやさしさと、実用性を両立したカラーツールを探している方におすすめです。

100均 (64) AI (1) GoogleSearchConsole (4) Virtualbox (3) WordPress (19) まとめ (1) オススメ (4) グチグチ・落ちこみ (4) ゲーム (10) コロナ (2) サーバ構築演習 (6) ハンドメイド (45) 一口メモ (28) 仕事一覧 (13) 作業環境・効率 (52) 依存 (1) 動画作成 (6) 在宅ワーク (27) 変態 (1) 女性 (7) 子供 (5) 子供のころの夢を叶える (2) 年金 (2) 攻略 (2) 数学 (1) 料理・お菓子 (4) 東京通信大学 (33) 漫画、イラスト (3) 発見・挑戦 (40) 美容 (4) 考える・検証 (60) 計算 (1) 診断 (1) 資格、勉強、講習 (3) 贈り物 (1) 鑑賞・読書記録 (25) 1日目 (2)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です