blog

【ワードプレス】スマホでのブログの書き方とタグの基本【ブラウザ版】

スマホでのブログの書き方 アイキャッチ

 
 

とみ
とみ
こんにちは、小幸こゆきとみ(@koyuki_tomi)です。

 
ワードプレスのブログは、スマホのみでも書けるの?

ーー答えは、YES

とみ
とみ
スマホひとつで投稿までできるよ!

 
この記事では、開設から2年間スマホひとつで記事更新をしてきた私が、スマホでのブログの書き方をお伝えします。
 

私の執筆環境

  • WordPressワードプレス
  • 有料テーマ『JINジン
  • ブラウザ(Safariサファリ
  • テキストエディタ
  • iPhone6S
    (のちにiPhone7)

 

  • スマホでブログを更新したい
  • ワードプレスを使っている
  • ブログ初心者

 

【ワードプレス】スマホでのブログの書き方│①記事を書く前に

私はいつもブラウザ&テキストエディタでブログの更新をしています。

とみ
とみ
アプリでの更新はやったことないからこの記事では解説しないよ。

 

私はブラウザ&テキストエディタ派

ブラウザだと自由度が高い!

ワードプレスのスマホアプリがいくつかありますが、

  • 一部の機能しか使えない
  • 使い勝手が悪い

などであまりいい評価を聞きません。
 

とみ
とみ
記事更新だけじゃなくカスタマイズもスマホでできるから、私はブラウザ一択!
ブラウザ
インターネットを閲覧するためのソフト。SafariサファリChromeクロームのこと。

 
スマホでブラウザだと表示範囲は狭くなるものの、PCのときとほぼ同じ画面が見られるのでふだんはPC派の人にもおすすめです。
 

テキストエディタはタグの理解が必要

記事編集画面では、ビジュアルエディタとテキストエディタのタブを切り替えることができます。
 

ビジュアルエディタ
たとえば太字にしたい場合、文字がそのまま太くなる。実際の出来上がりに近い投稿画面を見ながら編集できる。
例:なりたかった自分になるのに、遅すぎるということはない。
 
テキストエディタ
テキストにタグと呼ばれる命令記号を挿入することで太字などの指定をしていく。タグの理解がある程度必要。
例:<b>なりたかった自分になるのに、遅すぎるということはない。</b>

 

とみ
とみ
私はテキストエディタ派! ビジュアルエディタは苦手だな〜。

 
ーーというのも、ビジュアルエディタだとなぜだか誤タップしやすくて、表やらランキングやらお呼びでない装飾がほいほい出てきちゃうんですよね。

消すのもひと苦労な上に簡単な装飾しかできないため、私はほとんど使いません。

とみ
とみ
好みだと思うから好きなほうを選んでね。

 
テキストエディタは誤タップすることこそ少ないものの、HTMLタグの理解がある程度必要です。

これから使用頻度が多いタグについて解説していきますね。

とみ
とみ
よく使うタグはそのうち自然に覚えられるから初めはコピペでok!

 

ログイン〜記事投稿画面

ログイン

さて、それではまずログインです。

ログイン画面にアクセスするには、ブログのURL末尾に/wp-adminをつけて検索します。
 

http(s):/自ブログのURL/wp-admin

 
ただし、Site GuardサイトガードWP Pluginでログインページを変更している人は、そのURLを入力してください。

とみ
とみ
アクセスできたらいつも通りIDとパスワードを入れてね!

 

記事投稿画面へ

ダッシュボード(管理画面)に入れたら、次は左上の三のマークから「投稿」を選びましょう。

ワードプレス スマホ 書き方左上の「三」をタップ

 
「投稿」をタップするととタブが開くので、そこから「新規追加」へと進みます。
 

ワードプレス スマホ 書き方 投稿「投稿」をタップ

 

ワードプレス スマホ 書き方 新規追加「新規追加」をタップ

 

とみ
とみ
すでに追加した記事を編集したい場合は「投稿一覧」を選んでね!

 
投稿画面に入ったらテキストエディタから、直接文字を入力していくだけです。

ワードプレス スマホ 書き方 テキストエディタ「テキストエディタ」をタップ

 

とみ
とみ
ここまではできたかな? タグについてはこれから説明するね。

 

ここまでのまとめ
  • 個人的にはブラウザ&テキストエディタが使いやすい
  • ログイン画面にアクセスするにはURL末尾に/wp-adminを入力
  • ダッシュボード→三→投稿→新規追加

 

【ワードプレス】スマホでのブログの書き方│②基本のHTMLタグ

テキストエディタで記事の編集をする場合、ある程度HTMLタグの理解が必要です。

とみ
とみ
基本的なタグを紹介するから、コピペして使ってね。

 

大見出し・小見出し

大見出し

<h2>大見出し</h2>

 

小見出し①

<h3>小見出し①</h3>

 

小見出し②

<h4>小見出し②</h4>

とみ
とみ
優先順位は大見出し>小見出し①>小見出し②だよ。

 

文字装飾⑴太字・斜め・下線・削除線

太字

<b>太字</b>

太字
 

斜め

<em>斜め</em>

斜め
 

下線

<u>下線</u>

下線
 

削除線

<s>削除線</s>

削除線
 

文字装飾⑵色とサイズの変更

大きくする

<big>大きくする</big>

<span style=”font-size:120%;”>大きくする</span>

大きくする
大きくする
 

小さくする

<small>小さくする</small>

<span style=”font-size:85%;”>小さくする</span>

小さくする
小さくする
 
紹介しているどちらのタグでも文字のサイズを変えられます。

spanタグだとフォントサイズを指定できるため、細かく調整したいときに便利です。

とみ
とみ
通常サイズが100%だよ。

 

色を変える

<span style=”color:red;”>赤色</span>

<span style=”color:#FF0000;”>赤色</span>

赤色
赤色
 
色の変更もどちらでもok。

#から始まる文字列はカラーコードと呼ばれ、このように薄い濃いなど繊細な色合いが表現できますよ。

とみ
とみ
シャープ(#)の後ろを変えるだけ! カラーコードは下のリンクを参考にしてみてね。

 

色とサイズを変える

<big><span style=”color:#red;”>色とサイズを変える</span><big>

<span style=”font-size:120%; color:#FF0000;”>色とサイズを変える</span>

色とサイズを変える
色とサイズを変える
 

とみ
とみ
spanタグだとひとつにまとめられてスッキリするよ。
タグを閉じる順番
<外側のタグ><内側のタグ></内側のタグ></外側のタグ>というように、必ず内側から順番に閉じよう。

 

文字装飾⑶中央寄せ・リンク・ルビ

中央寄せ

<div class=”t-aligncenter”>中央寄せ</div>

中央寄せ

 

リンク(同タブで開く)

<a href=”リンク先のURL”>リンク先のタイトルや紹介など</a>

このブログについて。
 

リンク(新タブで開く)

<a href=”リンク先のURL” target=”_blank”>リンク先のタイトルや紹介など</a>

このブログについて。
 

ルビ(ふりがな)

<ruby>単語<rt>読み</rt></ruby>

単語たんご
 

基本の表

基本の表

<table>
<tr><td>△</td><td>▲</td></tr>
<tr><td>〇</td><td>●</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>

 

<table>〜</table>は表の始まりと終わりを示す。<tr>〜</tr>は行を、<td>〜</td>は列(セル)をそれぞれ示す。

行を増やしたければtrタグを、セルを増やしたければtdタグを上の表を参考に挿入してみよう。

 

見出しをつける

<table>
<tr><th></th><th>三角</th><th>丸</th><th>四角</th></tr>
<tr><th>白</th><td>△</td><td>○</td><td>□</td></tr>
<tr><th>黒</th><td>▲</td><td>●</td><td>■</td></tr>
</table>

三角四角

 

見出しをつける場合は<td>〜</td>の代わりに<th>〜</th>を使う。文字が太字になり、中央ぞろえになる
とみ
とみ
表は複雑な上に装飾の種類も多いから、プラグインやテーマに頼るのもアリ!

 

引用・リスト

引用

<blockquote>引用内容</blockquote>

引用内容

 

番号なしのリスト

<ul>
<li>アイス食べたい</li>
<li>お寿司食べたい</li>
<li>焼き肉食べたい</li>
</ul>

  • アイス食べたい
  • お寿司食べたい
  • 焼き肉食べたい

 

<ul>〜</ul>は、番号なしリストの開始と終了を表す。リストを増やしたければ<li>〜</li>を増やす。

 

番号ありのリスト

<ol>
<li>この道をまっすぐ行く</li>
<li>ひとつめの信号で右手に曲がる</li>
<li>左手にお店が見える</li>
</ol>

  1. この道をまっすぐ行く
  2. ひとつめの信号で右手に曲がる
  3. 左手にお店が見える

 

<ol>〜</ol>は、番号ありリストの開始と終了を表す。リストを増やしたければ<li>〜</li>を増やす。

 

 


【ワードプレス】スマホでのブログの書き方|③タグの管理方法3つ

長いタグを手打ちするのは非常に面倒なため、管理する方法を3つお伝えしておきます。

タグの管理方法
  1. プラグインに登録
  2. 単語登録
  3. コピペ

 

①プラグインに登録

私はプラグイン『Add Quick Tag』によく使うタグを登録しています。

一度登録すればテキストエディタの編集画面に出てくるため、タップするだけでかんたんにタグが打ち込めます

ワードプレス スマホ 書き方 プラグイン登録したコード(赤字)をタップしてみると……
ワードプレス スマホ 書き方 プラグイン開始タグが自動で入力される
ワードプレス スマホ 書き方 プラグイン赤字にしたい文字を入力
ワードプレス スマホ 書き方 プラグインもう一度赤字をタップで
ワードプレス スマホ 書き方 プラグイン終了タグが自動で入力される
ワードプレス スマホ 書き方 プレビュープレビューで確認。バッチリ赤字になってます。

 

とみ
とみ
このプラグインはPC派の人でも必須級だよ。

 

詳しくはこちら

AddQuickTagの設定方法&使い方/ひつじアフィリエイト

 

②単語登録

プラグインをあまり増やしたくないという人は、スマホの単語帳に登録しておくのもひとつの手です。
 

③メモ帳などにコピペしておく

よく使うものはプラグインや単語帳で管理し、使用頻度の低いものはメモ帳へ。

必要になればメモ帳からコピペして利用します。

ワードプレス スマホ 書き方 メモメモ帳にタグを残しておく方法も

 

とみ
とみ
全部Add Quick Tagに登録すると編集画面がごちゃごちゃするから使い分けてるよ。

 
試行錯誤しながら自分の1番やりやすい方法を見つけてみてくださいね。
 

タグの管理方法
  1. プラグインに登録
  2. 単語登録
  3. コピペ

 

まとめ:根気さえあれば誰でもスマホでブログを書ける!

根気さえあれば、誰でもスマホでブログを書けます。

よく使うタグはプラグインなどに登録しておくと作業の効率化ができますよ。

とみ
とみ
スキマ時間をうまく活かせたらいいね!

 
この記事が、あなたのブログ運営の一助になりましたら幸いです。
 
 
小幸こゆきとみ(@koyuki_tomi)でした。
 
 
ブログ初心者におすすめ! 基本が一から学べます。

 
 
ブログにログインできない!? まさかセキュリティプラグインに自分がはじき出されるなんて……。

404 アイキャッチ
【これで解決】ワードプレスの管理画面にログインできない!【404エラー】ワードプレスの管理画面にログインできない! 404エラーって何? ーーSite Guardを使っているのなら、解決できます。...

【体験談】待てど暮らせどアドセンスの審査結果が来ない……。

Googleアドセンス 結果 来ない
アドセンスの審査結果が来ない! 17日待たされた私の体験談アドセンスに申請したはいいけど、2週間以上審査結果が来ない! 原因は? ーー3記事で申請した私が、申請時と通過時の状況を告白します。...

 
 
 

ABOUT ME
小幸とみ
結婚・出産してから一念発起し、FP2級の資格を取得。なにも分からなくて心細い気持ちはよくわかります。記事についてのご質問・ご相談・ご要望等ありましたら、お気軽にご連絡ください。このブログがあなたにとっての「結婚のしおり」となりますように。