どうも、ヤツです。
奴は特殊な場合を除き、ほぼ全ての記事をスマホで書いています。
なぜなら、グーグルがPCではなく、モバイル(スマホ、タブレット)で見やすい記事を評価するよ!と仰っているからです。
どの程度SEOに影響があるかは分かりかねますが、長期的目線で見れば、スマホでブログを書くことはSEO有利になる筈です。
勿論パソコンでモバイルファーストな見やすい記事を書く技術があればそれに越したことはないですが、中々上手くいきません。
例えばパソコンでは綺麗に写真を添付したはずなのに、スマホやタブレットでは写真の向きが変わっていて見にくい、改行の位置がおかしいなど、様々な問題があります。
パソコンからモバイルファーストな記事を書く技術がないのであれば、もうスマホやタブレットから記事を書いた方が良いのでは、と考えます。
スマホで書いた場合に、パソコンで記事の体裁が崩れていないか気になる場合はパソコンとスマホでダブルチェックするのも良いですが、結構めんどくさいですw
ヤツはパソコンの記事の体裁が多少崩れていても気にしないです。(パソコンからのアクセスは減るかもしれません)
実際、スマホで書いた記事を公開すると、妻から「パソコンで見たら写真の向きがおかしいで!」指摘が入ることがありますが、まぁいいですw
とにかく、モバイルファーストに記事を書くことに特化しよう!という考えで「ヤツの知恵ラボ」というブログを運営してます。
本記事は、パソコンから離れてスマホやタブレットで記事を書いてみよう!という方向けに、スマホやタブレットで書く技術について説明します。
【モバイルファースト】スマホでブログを書いてみよう!
基本的な書き方
どのテーマで書くかによって多少の違いはありますが、今回はワードプレス×STORKの条件を例に挙げます。
オープンケージが作成したSTORKはモバイルファーストを謳っているテーマで、非常にスマホとの親和性が高いのが特徴です。
書く手順を説明します。
ログイン
まずは、スマホまたはタブレットワードプレスのショートカットを作成します。
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/613B7879-7034-43D4-90ED-8FA850B058BC.jpeg)
ショートカットからログイン画面に入り、ユーザー名、パスワードを入力し、ログインします。
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/6AAA9740-31DD-4C82-9B37-4132649FBB2D.jpeg)
投稿
ログインすると投稿の画面またはホーム画面が表れます。投稿画面の右側に書いてある”新規追加を選択します。
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/EF96A616-03F0-4A0E-B009-090B8FA56914.jpeg)
タイトル
まずは、タイトルを打ち込みます。他のブロガーさんも言ってますが、タイトルはマジで大事です!
検索順位にもろ影響します。内容がどんなに優れた記事であってもタイトルが悪ければ、そもそも見てもらえません。
なぜならネットで検索しても、その記事がほとんど見てもらえない位置(10ページ目とか)に表示されるからです。
SEO対策の一つですが、タイトル決めは本当に大事です!100件以上記事を書いてみてアクセスが稼げる記事と稼げない記事の違いを実感しました…
アクセスが見込めるタイトルは大体”みんなは知らないけど、知ってる人は知っている”ことに関するキーワードを入れ込むことです。
上記を判断するのにGoodKeywordというツールが便利です。誰も調べていないキーワードや調べられ過ぎてて競合が沢山いるキーワードは避けたタイトル付けをすることが検索順位を上げるコツです。
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/EF51F1E2-A7D5-488A-A49D-108089202DE1-622x1024.jpeg)
見出し
ビジュアルモード
タイトルが書けたら次は見出しです。記事の流れを考えて見出しから決めていきます。見出しから決めることで記事全体に纏りが生まれます。
見出しはこんな感じ↓↓↓で書いていきます。
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/8AD3C842-90F6-44AE-BBB0-F398219598A4-624x1024.jpeg)
段落の付け方はまず見出しにしたい文字を選択し、段落アイコンをクリックすることで見出しにすることができます。
①見出しにしたい範囲を選択
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/E171EDC7-FBCB-41A3-A2DB-CEE5FE459955.jpeg)
②段落アイコンを押して見出しを選択
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/3FC5955E-597F-4D9A-8696-E9048FE6C075.jpeg)
テキストモード
ビジュアルモード以外にも、テキストモードで見出しを付けることができます。
ビジュアルモードと比べ、テキストモードは編集に手間がかかる一方、改行、フォント調整などで細かな調整ができます。
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/E420278C-F4C6-46C0-8415-60CD5809FE1D.jpeg)
<h2>見出し</h2>はビジュアルモードの見出し2に対応します。つまり、<hx>見出し</hx>はビジュアルモードな見出しxに対応します。
スマホでブログを書いてみて、ビジュアルモードで上手くいかないときはテキストモードで編集してみることをオススメします。
本文
本文自体はビジュアルモードでもテキストモードでも内容に変わりはありません。ただし改行の時に若干の違いがあります。
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/39B18100-4E57-4266-A061-3B91DD134447.jpeg)
“見出し”→”ビジュアルモードで編集”の改行はビジュアルモードで改行したものです。
“ビジュアルモードで編集”→”テキストモードで編集”はテキストモードで改行したものです。
ビジュアルモードで改行すると行間が一行空いてしまいます。一方、テキストモードで改行すると行間を空けずに改行することができます。
ケースバイケースですが、テキストモードの方が細かく改行調整ができます。行間を空けずに改行したい場合はテキストモードで改行することをオススメします。
応用編
タイトル、見出し、本文などブログを書くのに基本的な機能以外に”読みやすさ”を向上させるのも重要です。
スマホでブログを書くときにどうすれば着色やフォント調整を上手くやれるのか紹介します。
着色
ビジュアルモードで着色しましょう。テキストモードは文字の羅列なので視覚的に色が判別出来ず不向きです。
ビジュアルモードで赤文字に変えた場合↓↓↓
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/16ABEB62-323E-44E4-81EF-85719548199B.jpeg)
テキストモードで赤文字に変えた場合↓↓↓
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/1CD5E9FD-935B-46E2-81FD-6BAD258FB4B4.jpeg)
ビジュアルモードの場合、赤文字にしたい部分を選択して、色選択アイコンをクリックして、視覚的に好みの色に変更することができます。
一方、テキストモードの場合、<span style=”color: #好みの色;”>赤文字にしたい部分</span>を入力する必要があります。
視覚的に好みの色に変更できないので、ビジュアルモードで着色することをオススメします。
太字
太字はビジュアルモード、テキストモードのどちらで編集しても、手間は同じです。
ビジュアルモードで太字にした場合↓↓↓
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/B11577A0-3D8D-4B4F-A624-09F742AE6A83.jpeg)
テキストモードで太字にした場合↓↓↓
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/75224509-3599-4E14-B0BF-B70508724F8C.jpeg)
ビジュアルモードだと、太字にしたい文字の範囲を選択し、”B“アイコンをクリックすると太字になります。
一方、テキストモードでは太字にしたい文字の範囲を選択し、”b“アイコンをクリックすることで太字のコード(<strong>太字にしたい文字</strong>)が自動入力されます。
文字フォント変更
細かくフォントを設定したい場合はテキストモードの方が便利です。
ビジュアルモードで文字フォント変更した場合↓↓↓
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/85C8832A-1C0C-42DB-9DD3-0CA8D71D70B9.jpeg)
テキストモードで文字フォント変更した場合↓↓↓
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/99EC4999-8FA1-454F-9652-B528271BF7C7.jpeg)
ビジュアルモードではフォント変更したい文字の範囲を選択し、フォント変更アイコンをクリックすることでフォントサイズの変更ができますが、フォントが2pt単位でしか変更できません。
一方、テキストモードではフォント変更したい文字の範囲を選択し、<span style=”font-size: フォントpt;”>フォント変更したい文字</span>を入力しなければなりませんが、コンマ一桁単位での細かなフォント調整ができます。
写真添付
ビジュアルモードでもテキストモード一択でも、対して手間は変わりません。
ビジュアルモードで写真添付した場合↓↓↓
①”挿入”アイコンをクリック→Add Mediaを選択
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/F642A2A8-6DC2-4E34-AD24-63A32AC0A295.jpeg)
②”ファイルをアップロード”を選択→写真を選ぶ
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/06D99B4A-B498-41FA-98DF-711D7C2686E1.jpeg)
③”投稿に追加→”完了
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/66358173-A1E5-4DCA-B58E-D60F2931D2E4.jpeg)
テキストモードで写真添付した場合↓↓↓
①”メディアを追加”アイコンをクリック
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/34D04E32-EE8F-45C8-BDDA-796435FF9E78.jpeg)
後はビジュアルモードと同じ(②〜③)です。テキストモードのままだと、文字の羅列ですが、ビジュアルモードに切り替えるとちゃんと写真に変換されてます。
動画添付
ビジュアルモードからの貼り付け一択です。you tubeに動画をアップロードして、ブログに貼り付けるのが一番簡単です。ここではブログへの貼り付け方をメインに説明します。
スマホからの動画のアップロードについては、今回は割愛します。
①you tubeへログイン(アカウント無ければ作成)
ログイン後、画面右下の”ライブラリ”をクリック”
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/781D6496-68F3-4C19-9F1A-83221E3900F4-576x1024.png)
②アップロード動画を選択
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/37C4A158-00E7-40D7-AB38-C2FFE1576745-600x1024.jpeg)
③アップロードしたい動画をクリック
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/860F6E75-A0E1-40B7-82AD-8E90551B432A-659x1024.jpeg)
④共有アイコンをクリック→コピー
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/3F24F2C7-0D78-4C95-A27D-016125DD0046.jpeg)
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/1EDDA9C3-B92A-4DF7-9990-0AD92EBBE017.jpeg)
⑤ブログに戻って”挿入”アイコン→”メディア”を選択
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/EAD1F4E2-D084-4F46-A562-7F3E949C14A2.jpeg)
⑥ソースの部分に④でコピーしたyou tubeを貼り付け→出来上がり
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/50F91938-741F-485B-96DB-97389185FEAE.jpeg)
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/235FAD20-539C-4073-A214-145982D637B7.jpeg)
リンク作成
ビジュアルモードでリンク作成した方が楽です。下手するとテキストモードでリンク作成しようとするとバグります。
ビジュアルモードでリンク作成した場合↓↓↓
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/9B694BEE-F156-4AFC-81CD-48038FE0F3DC.jpeg)
リンクにしたい範囲を選択し、🔗アイコンをクリック、URLを入力することでリンクを作成できます。
*少し画面を上下にスワイプしてから貼り付けないとフリーズする可能性があります。
テキストモードでリンク作成した場合↓↓↓
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/EBD2A500-A689-4062-BF4E-EA2DEC8244A3-708x1024.jpeg)
“link”と書かれたアイコンをクリックするとURLを入力する画面に切り替わります。
が、、、URLを入力してもリンク作成できません。。。エンターアイコンが表示されないからです。
リンク作成はビジュアルモードから行いましょう。
段組
ビジュアルモードから段組した方が楽です。テキストモードから段組をするメリットは無いです。
テキストモードで段組すると文章の体裁がバグるまであるのでオススメしません。
ビジュアルモードから段組↓↓↓
①番号を付ける場合
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/E9436F19-60A5-4571-B729-8E03F6AB415D.jpeg)
左上の番号付段落アイコンをクリックすれば段組できます。
②番号を付けない場合
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/15014145-FEA2-4D04-8D58-EE96CD7397E5.jpeg)
右上の番号無段組アイコンをクリックすれば段組できます。
テキストモードから段組↓↓↓
①番号を付ける場合
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/2394ECC2-6E69-4945-B8EF-B805D44A3D4A.jpeg)
②番号を付けない場合
![](http://yatsu-no-chie-labo.com/wp-content/uploads/2019/02/5F694811-5B1A-43BD-8ECA-BD71E5D5C639.jpeg)
<ol>段組したい範囲</ol>が番号付段組を表し、<ul>段落したい範囲</ul>が番号無段組を表します。
おそらく<il>の部分は段組を指定していると思われますが、下手にここを弄ると文章の体裁が崩れます。
ビジュアルモードで段組作成することを是非オススメします。
まとめ
PCでブログを書くのとスマホやタブレットからブログを書くのでは勝手が大きく変わります。
ただ、スマホやタブレットからブログを書くことが容易になれば、通勤時間やちょっとした待ち時間を有効活用できるため、時間やわ有効活用できます。
コメントを残す