「WordPress」で見やすく記事を書く方法【SWELL】



ブログを見やすく書くために、
「WordPress」に元々そなわっていた機能もございますが、
「SWELL」には無料テーマには無い便利な機能がありますので
合わせて紹介いたします

アシ美

記事を書いてみて
「便利だな~」って思ったモノを
紹介しちゃいます

この記事では、こんなことが分かります

  1. インライン画像を挿入する
  2. ブロック下の余白量の調整
  3. 画像の大きさを変える
  4. パソコンとスマホで画像の大きさを変える
  5. 「PC」と「スマホ」で改行を変える

※「SWELL」でしか出来ない機能があります

まさ

書いてるの・・・
あなたじゃないですよね

アシ美

何か聞こえましたか?

まさ

あの~
書いてるの・・

アシ美

では
気にせずにいきましょう

まさ

・・・

スポンサーリンク

目次

インライン画像を挿入する

「インライン画像を挿入する」とは?

アシ美

簡単に言っちゃうと
こういうことです

まさ

ちょっと・・
やめてください

アシ美

挿入したい位置
「インライン画像」選択したら
いつも通り画像を選ぶだけです

アシ美

画像の大きさは、
あとからでもクリックすれば調整できます

まさ

数値を入力したらをクリック

アシ美

どうしたんですか

まさ

私の黒歴史が・・

ブロック下の余白量

ブロック下の余白量を簡単に調整できちゃいます

アシ美

では実際にやってみましょう
※SWELLの場合です

わたくしアシ美はいったい何者なんでしょうね

わたくしアシ美はいったい何者なんでしょうね

わたくしアシ美はいったい何者なんでしょうね

わたくしアシ美はいったい何者なんでしょうね

わたくしアシ美はいったい何者なんでしょうね

わたくしアシ美はいったい何者なんでしょうね

まさ

ブロックの下の余白
5段階で調整できます

アシ美

それにはを使います

まさ

余白の量をそろえたい場合に
便利ですよね

アシ美

ただ、スマホで見た場合
特大でも量が足りないことが
ありますので
その時は
素直に「スペーサー」を使ってください

画像の大きさを変える

画像の大きさを変えるには3つの方法があります

ひとつめ の方法

貼り付けた画像をクリックすると
青丸が出ます

アシ美

青丸●をマウスでグイ~ン」ってします

まさ

まあ、そうなんですけど・・

ふたつめの方法

画面右側にある
設定の数値を変更します

アシ美

縦横比が固定なので
片側だけでいいですよ

Cocoonでは縦横比がくるいます
まさ

元画像大きさが まちまち でも
そろえるコトができますね

みっつめの方法

「%」で変更する

アシ美

4段階変更できますね

まさ

これは記事に貼った画像
あとから調整するのに便利ですね

アシ美

せっかく横幅そろえたのに
あとで気に入らないコト
ありますね

まさ

あとから数値を入れ直す
地味にめんどくさいですから

パソコンとスマホで画像の大きさを変える

パソコンとスマホで画像の大きさを変えるには

アシ美

どうして変えなくては
いけないのですか?

まさ

私は画像を多用するので

https://twitter.com/MMasasan48/status/1346794729233469441?s=20
アシ美

なるほど
よく分かりました

まさ

スマホに画像を貼るにしても
画面横幅いっぱいギッチギチ
見にくいです

アシ美

余白がある方
見やすいですね

まさ

スマホに合わせる
PCでは小さすぎたりします

アシ美

それで「PC」「スマホ」
画像の大きさを変えるのですね

まさ

画像だけでなく
装飾も変えられます

アシ美

大きさの違う画像を
2つ貼り付けます

アシ美

画像をクリックして
「デバイスコントロール」

アシ美

大きい画像
「PCサイズでのみ表示する」
選択

まさ

小さい画像

選択

アシ美

これで「PC」「スマホ」
違う画像
表示できました

大小だけでなくまったく違う画像でもいいですし
PCスマホ文章を変えることもできます
どちらか片方だけに表示したい場合にも使えます

「PC」と「スマホ」で改行を変える

「PC」と「スマホ」で改行を変えるには

アシ美

どうして
「PC」「スマホ」
改行を変えたいんですか

まさ

こういう風になりませんか?

PCで見ると
スマホで見ると
アシ美

メッチャよくなりますね

まさ

だからといって「スマホ」に合わせる

スマホで見ると
PCで見ると
アシ美

何だかちんちくりんですね

まさ

「PC」「スマホ」
改行を変えたくなりましたね

アシ美

「ショートコード」を使いましょう

まさ

改行したい位置カーソルを合わせて
選択です

アシ美

編集画面ではこうなります

編集画面
まさ

「PCだけ改行」もありますので
 上手に使って下さい

まとめ

今回は、私が普段よく使っている機能を中心にお伝えしました
WordPressといいつつも主にSWELLの機能になってしまったかもしれませんが
Cocoonで使えたかは今となっては記憶をたどるしかありませんでした

SWELLには他にも便利な機能がありますので、一度お確かめください

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね (´艸`*)
  • URLをコピーしました!
  • URLをコピーしました!

コメント等、お気軽にどうぞ ( ̄▽ ̄)

コメントする

目次