BLUE HIP 尻の青いのブログ

尻の青い私ですが、青いなりにいろんなネタ書きます。旅行は断然ホテルから決める派です。

【はてなブログ】スマホアプリで画像リンクする方法

f:id:bluehip:20180212170524p:image

 

どうも青尻です。

みなさんは普段どのように記事を作成していますか?

自分の場合は出先で文章考えたりすることが多いですね。その時PCを持ち歩いていないことがほとんどなのでスマホのはてなブログアプリで基本文章作って下書き→家に帰宅後PCでHTML等修正→投稿。
という流れが多いです。

まあそうしている1番の理由は、アプリにできないことがあるからなんですよね。

アプリ自体は非常に便利なんですけど、あれもできれば、、なんてことが多々あります。

 

PCを持ってない人も中にはいるでしょうし。


今回はそんな中でもスマホで出来ちゃうじゃん!っていう機能をひとつ大発見したのでご紹介します。

 

コピペで利用できます!

 

 


それが画像にリンクをつけることですね。

 

スマホでやる方法って意外に知られていないんだなって自分で調べていて思いました。


実際今回の記事は全てアプリから書いてます。
なのでこの記事を書きながらのスクショで説明していきますね!

 

 

 

編集モード

まず編集モードは見たままモードです。

これは重要です。最初の書き出しが見たままモードでないと、今から説明することはできません。

 

最初はなにもわからず見たままモードでブログを書いていましたが、いろいろカスタマイズとか調べていくうちにコードもちょっとずつ見慣れてきて「はてな記法」を途中から使っていたのですが、画像リンクするためには筆者はコードができないんだって、はてな側に思わせる必要があるんです。

まあ実際できないんですけど。笑

 

 f:id:bluehip:20180212172858j:image

f:id:bluehip:20180212172902j:image

 

見たままモードは初心者でも簡単にブログが書けてhtmlってなんだよって人でも気軽に書けるのが素晴らしいですよね。

 

本当にコードとか見始めたのがこのブログを開設した1週間前くらいが初めての自分でもなんとなくわかるので大丈夫!

ただhtmlでするような行間指定などの、細かい指定はできないので人それぞれですね。

 

さてそれでは進めていきます。

 

画像の貼り付け

まずは画像の貼り付け方。これはわかる方が大半かもなので飛ばして頂いても結構です。

画像を記事に貼り付けます。

f:id:bluehip:20180212173228j:image
たった今スクショした画像です。
左側のカメラマークをタップして貼り付けたい画像をカメラロールよりいつも通り選択。

そうすると読み込んだ画像が表示されますね。

 

 画像の貼り付けはこれで完了です。

 

 

ブログを投稿

写真を貼り付けてブログ全体の文章も完成して、あとは画像にリンク付けするだけの状態になったら、
このまま下書きではなく、1度ブログを公開してしまうのです

そうするともちろん画像だけが投稿された状態ですね。
画像をタップしてももちろん飛ばしたい先には飛びません。まだ設定してないですからね。

 

リライトがキーポイント

リライトとは1度投稿したブログを編集することです。

 

なぜキーポイントなのかと言うと、リライト時にしかこの編集はできないのです。


先程投稿した自分の記事をアプリ起動のまま開きます。

f:id:bluehip:20180212210127j:image
そうすると【編集】が実は2つ出てくるんです。
このアプリの上部のタブではない方、記事中のタイトル右横に出てくる【編集】をタップします。


そうすると写真のような編集画面に変わります。
f:id:bluehip:20180212211453j:image

 

先程まで触っていた編集画面とは少し違うのがわかります。

ここではいつも家に帰ってからいじっていたPCのhtml編集モードと同じような画面になるんです!
簡易バージョンではありますが。

 

画像もHTMLタグのコードに自動で変換してくれています。

(これを「見たままモード」ではなく「はてな記法」で書いていると変換してくれません。)

 

ここにPCでの作業同様、リンクを付けたい画像にhtmlを挿入していきます!

なんか難しそうなコードが並んでいて、いじるのこわい。。ってなるかもですが、何度も言います。
自分もわかりません。笑
だけどいじる場所は一箇所だけなので落ち着いて作業しましょう。

 

 

画像にリンクをつける

今回は例として、青尻のロゴ画像にトップページをリンク付けしていきますね!

 

1枚目(リンクなし)

f:id:bluehip:20180212211713p:image

2枚目 (リンクあり)

f:id:bluehip:20180212211713p:image

 

違いがわかるように、

1枚目のロゴにはリンクは付けませんが、
2枚目のロゴにリンクを付けていきます!

 

見たままモード

f:id:bluehip:20180212211927j:image

 

1枚目と2枚目、見た目は全く同じですね。

 

では、リライト編集モードで同じ部分を見てみましょう。

 

 

リライト編集モード

f:id:bluehip:20180212215732j:image 

 

ここで青線で囲ったようなコードをコピペするだけなのです。 
画像を貼った位置には<img class〜>っていう画像コードが出ているのがわかります。

この画像コード全体を青い囲いと同じように下のコードで挟みます。

あとは黄色い蛍光線の部分を自分の飛ばしたいリンク先のURLを入れるだけ!

 

コピペに使ってください。

 


これでPCなしで画像リンクが完成します!
これくらいなら投稿して誰かが読む前の数分で作業も終了するのでなんの心配もなくスマホで全ての作業が済んじゃいます!

 

 

出先でどうしても!という時に是非試してみてください。

 


知識ゼロでもやっていけるはてなブログ。
頑張って続けていきましょう!