ホームページ改善アドバイザー 日向 凛のg.o.a.tブログ

g.o.a.tの使い方 ブログ記事の書き方と編集方法

by 日向凛
このエントリーをはてなブックマークに追加 LINE it!

アカウントを作成し、ブログタイトルやプロフィールを編集したら、いよいよブログ記事を書いていきます。ダッシュボードの右上「記事を書く」ボタンをクリックします。

なお、g.o.a.tでは、作成中の記事は随時自動保存され、画面左上に「保存中」「保存済」など小さく表示されます。

また、すでに公開した記事には「公開中」という表示が画面左上に出ますが、その横に「!」マークが表示されている場合は、公開中の記事と編集画面の記事に相違があることを示しています。画面右上の「更新する」ボタンをクリックして、編集内容を公開中のページに反映するようにしましょう。

目次

※アンカーで飛ぶようにしたかったのですが、コードをうまく設定できませんでした。

タイトルを入力する

「タイトル」をクリックして、ブログの記事タイトルになるテキストを直接入力します。

また、背景の色が薄いブルーになっていますが、ピンクやグリーンなることもあり、どうやらランダムに変わるようです。画面右端の画像アイコンをクリックすると、背景画像を設定することができます。手持ちの画像がなくても、Pexels・PAKUTASO・Aicoccoのフリー画像素材を利用することで、見栄えがぐっと良くなりますから、ぜひ気に入った画像を探して設定するようにしましょう。

テキストを入力する

「Start Freestyling」と書かれているあたりをクリックすると、テキストを入力できるようになります。

g.o.a.tでのテキスト入力がどのように行われるかを動画にしましたのでご参考ください。とても簡単です。

テキストを装飾する

入力したテキストの行にマウスオーバーすると、メニューが出てきます。

h1にする

「h1」をクリックすると、大見出しにすることができます。ページで最も重要な見出しです。以前はページ内に1つだけと言われてきましたが、最近のルールではページ内にいくつあっても間違いではありません。ただし、SEOの観点からいうと、ページ内のh1は1つにしたほうが好ましい結果が出ることが多いです。

h2にする

「h2」をクリックすると、h1の下層に使われる中見出しになります。h2はページ内にいくつあっても構いません。

h3にする

「h3」をクリックすると、h2の見出しに含まれるコンテンツの中でさらに見出しをつけたい場合の小見出しになります。

箇条書きのリストにする

「番号付きリスト」「番号なしリスト」のアイコンをクリックすると、箇条書きにすることができます。改行して書いたテキストを後からリスト化するのは難しいので、先にリストアイコンをクリックして、箇条書きにできる状態にしてからテキストを入力しましょう。

引用文を入力する

「引用」アイコンをクリックすることで、テキスト入力スペースに他のブログなどからの引用文を書くことができるようになります。引用文を入力したら、右下の「引用元」をクリックして、引用元のブログ名やURLも忘れず入力するようにします。

コードを入力する

「コード」アイコンをクリックすると、HTMLコードを入力することができます。

しかし、YouTubeの埋め込みコードや、Amazonのアフィリエイト埋め込みコード、Google Adsenseのコードはうまく表示されません。A8.netのタグによるアフィリエイトバナーはなんとか表示されました。

もしかすると、単にHTMLコードを表示したい場合に使うのかもしれません。後述する「埋め込み」とどう違うのか?が疑問点です。

<iframe width="420" height="315" src="https://www.youtube.com/embed/JFfHxAIHjxw" frameborder="0" allowfullscreen></iframe>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=exway758-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4802610564&linkId=f57e2983a638798f1beda157adb3fc54"></iframe>

A8.netのアフィリエイトの埋め込みコードは、このような空の行とバナーが表示されます。空の行を削除することはできますが、アフィリエイトのカウントが正常にされるのかどうかは疑問です。


テキストに太字・斜体・打ち消し線・リンク・色を設定する

入力したテキストをドラッグすると、メニューのアイコンが表示されるので、クリックして設定を行います。左から「太字・斜体・打ち消し線・リンク・色」を設定することができます。

削除をする

右端の赤い「ゴミ箱」アイコンをクリックすると、入力したコンテンツを削除することができます。

画像・動画・会話・埋め込み・地図・表・シェアボタンを挿入する

「+」のアイコンをクリックして、画像・動画・会話・埋め込み・地図・表・シェアボタンのメニューアイコンを表示させます。

画像を挿入する

「画像」アイコンをクリックします。

「+」をクリックして画像をアップロードするか、「Pexels」「PAKUTASO」「Aicocco」のタブをクリックしてフリー画像素材の中から使いたい画像を探すなどして選択します。

「海」キーワードで検索して出てきた画像を選択しました。画像にマウスオーバーすると、メニューアイコンが表示されます。真ん中にあるアイコンでは画像とテキストのレイアウトを設定することができます。また、右端にあるアイコンでは、複数の画像をまとめてギャラリーのように表示したり、画像に効果を加えることができます。

通常のレイアウトでは、画像に続いて下にテキストが表示されます。

画像をブラウザ幅いっぱいに広げる

左から2つ目のアイコンをクリックすると、画像をブラウザ幅いっぱいに広げることができます。

画像を左寄せにする

右から2つ目のアイコンをクリックすると、画像を左寄せにしてテキストを右に回り込ませることができます。

画像を右寄せにする

右端のアイコンをクリックすると、画像を右寄せにしてテキストを左に回り込ませることができます。

複数の画像をまとめて表示する

図のアイコンをクリックすると、複数の画像をまとめてギャラリーのように表示させることができます。ただし、6枚目以降の画像は「MORE」で省略されてしまいます。

画像の順番は、ドラッグして入れ替えることができます。見せたい画像は5枚目までに配置するようにしましょう。

画像を加工する

図のアイコンをクリックすると、画像にフィルタ効果や切り抜きなどの加工を行うことができます。

画像の説明文を入力する

画像を加工する画面にある「画像の説明を追加」に画像の説明文を入力すると、画像のタイトルとして画像の下にテキストが表示されます。

注意したいのは、いわゆる「alt=""」ではないということ。「title=""」への適用となります。

動画を挿入する

「動画」アイコンをクリックします。

動画のURLを入力して「挿入」をクリックすると、動画が表示されます。

会話を挿入する

「会話」アイコンをクリックします。

「名前」と吹き出しにテキストを入力します。Enterキーを押すと、相手側に移りますので、相手の名前と吹き出しにテキストを入力します。

アイコンに画像を設定することもできます。一度設定しておくと、以降の会話には自動的に画像付きのアイコンで会話が続いていきます。

埋め込みをする

「埋め込み」アイコンをクリックします。

埋め込みコードの入力欄が表示されますが、Google Adsense、Facebook、A8.netアフィリエイトの埋め込みのいずれもエラーになってしまいました。今後の改善に期待しましょう。

地図を挿入する

「地図」アイコンをクリックします。

Google Mapの埋め込みコードを入力し、「挿入」をクリックします。

Google Mapが表示されました。

表を挿入する

「表」アイコンをクリックします。

自動的に表が挿入されますので、セルをマウスオーバーして現れる「歯車」アイコンをクリックして、表示されたメニューから表の行・列の追加や削除、テキストの左寄せ・中央寄せ・右寄せを行います。

なお、「見出し」にチェックをつけたセルは薄いグレーになります。

シェアボタンをつける

「シェア」アイコンをクリックします。

自動的にシェアボタンが挿入されますので、セルをマウスオーバーして現れる「歯車」アイコンをクリックして、表示されたメニューからSNSボタンの追加・削除を行います。

まとめ

サクサクと美しいビジュアルのブログを作るには良さそうです。

ただし、アンカーによるページ内リンクや、アフィリエイトバナーの表示、コードの埋め込み、altによる代替テキストの設定ができないなど、いくつか残念な部分があります。

g.o.a.tの今後の展開に注視したいところです!

「ウチのホームページ、なんとかして!」「どうしたらいいのかわからない」

そんなホームページ運用のご相談や、大阪のホームページ制作業者をお探しなら、ホームページ改善アドバイザー 日向 凛までご相談ください。あらゆるネットワークでご対応いたします。