Ataeru design

与えるブログTips第2回〜自分の投稿に誰かのブログ記事をリンクさせたい時。アメブロver.

 

こんにちは。

webコーチの木野朝美です。

あなたの与える力を引き出す、をコンセプトに配信する”与えるブログ Tips”。

webをどう使ったらいいかわからない、PCがニガテ;;という起業女子へ。

webのわからなさを1からわかりやすく、お伝えします。

 

 

 

第2回目の今日のテーマは

ユーザビリティのお話に引き続き

ブログを読みやすくする為の技術的改善ポイントとして、

 

自分の投稿に誰かのブログ記事をリンクさせたい

 

 

といった時に

実際にどうやってリンクを貼るのか?

 

アメブロ(ブログサービスの一例としてピックアップ)

でのリンクの貼り方をご紹介します。

 

 

リンクを貼るとは?

 

起業してみたい、

もしくは、ブログで自分の想いなどを発信してみたい。

と思う方はとても増えてきていると思います。

 

 

私も実際に

「ブログを始めました」

と言う報告を聞かせていただくシーンも多くなってきたという実感もありますし、

そういったときによく

 

「初めてみたもののリンクの貼り方がわからないんです><」

「そもそもリンクって勝手に貼ってもいいんんですか??」

 

という質問を、複数の方から聞いていただいたりもしています。

 

 

この記事では一つ目の質問のアンサーを書いていきます。

 

 

まず、リンクとは

特定の記事へクリック一つで飛べるようにするもの です。

 

 

 

例えば、

木野あさみプロフィール・サイトコンセプトはこちら

 

この色の変わっている部分がリンクが効いている部分↑で、

そこにホバー(カーソルを合わせる)をし

クリックすると、指定してあるURLのwebページに飛ぶことができます。

 

 

 

普段当たり前に使っている機能だと思いますが、

この、指定したURLのwebページに飛ぶ、という部分。

 

リンクを貼るとは、

見えていない部分にURLを指定してあげることが必要なんですね。

 

 

 

無料ブログサービス(例:アメブロ)でのリンクの貼り方

 

まず、ブログを始めてみたい、と思った時には

無料のブログサービスはとても便利です。

気軽に作れて、気軽に更新できます。

ここではサイバーエージェント社が提供するアメーバブログを例に

解説していきます。

 

 

アメブロにログインして、

ブログを書くというところに入ると、

エディタと呼ばれる文字を打ち込む場所があります。

ameblolink00

 

 

こちらのエディタの本文上の部分には、

執筆するときに役に立つツールがアイコンで並んでいますね。

 

このリンクアイコンをクリックします。

 

 

ameblolinkicon

 

 

すると、このようにリンクタブが開くので

飛ばしたいページのURLを記入します。

 

ameblolink1

 

そうすると、こんな形にリンクが効いたURLが表示されます。

 

 

ameblolink2

 

これで、指定のサイトに飛ばすことはできました。

 

ただ飛ばすだけならこれでも良いのですが…

さらに

文字列にURLを効かせて、

用途によって使い分けれたらベストですよね。

 

 

文字にリンクを効かせるには以下の通りにします。

 

文字にリンクを効かせる方法

 

まず、リンクをつけたい文章を打ち、ドラッグします。

 

ameblolink3

 

 

 

このように、任意の文字をドラッグした状態で、

先ほど使用したリンクアイコンをクリックすると

 

ameblolink4

 

 

テキスト、という部分が追加され

ドラッグした任意の文章が現れています。

 

 

あとはこのまま先ほどと同じように、

下部の入力欄に、指定したいURLを打ち込みます。

 

 

 

 

 

表示させてみると

こんな感じです。

 

 

ameblolink5

 

 

任意の文章の下に、下線が引かれ、

リンクであることを視覚的にわかりやすくする為に、文字の色も変わっていますね。

 

 

 

実際にブログではどう見えるのかのプレビューも見てみましょう。

 

 

ameblolink6

 

 

このように、リンクをしっかり貼ることができました♪

 

 

 

 

ちなみに、この状態をHTML表記で確認してみるとこんな感じ。

 

ameblolink7

 

ブログを書いていく上で、必要な部分だけでもHTMLも覚えていくと

とても便利だと思います(^^)

 

 

 

 

 

今回はアメブロのエディタを使ったリンクの貼り方でした。

 

 

 

アプリからの更新、スマホからの更新の場合でも

同様にリンクを貼り付けることが可能です。

 

アメブロのアプリの場合は、文字をドラッグするのではなく

リンクアイコンをクリックした先に新たに入力するタイプになっていて(2016年10月現在)、

 

 

web上での更新と少し動作が違いますが、

 

根本的にリンクとは文字列とURLが結びつけられて成り立っている、

 

 

ということが理解できていれば、他のパターンに遭遇しても、すぐにやり方がのみ込めると思います(^^)

 

 

また、わからないことがあればコメント欄から気軽に問い合わせてください。

 

 

 

 

 

 

 

次回は、より与える目線で

ユーザビリティを意識したリンクの貼り方について書いていきたいと思います。

Two young beautiful girls

「次回は与える目線のリンクの貼り方ですって♡」

 

 

2016年10月3日 3:59 PM  カテゴリー: Give/あたえる, アメブロの使用方法, ブログ, 与えるブログTips

Now Loading