おハナマルのつぶやき日記

元気や勇気を与えたい!今日がハッピーになるように

『カテゴリ画像リンク』を作ってみた!- 【スマホ画面用】

少しずつリライトもしてます!

f:id:ohanamaru25:20180309232918j:plain

どうも、おハナマルです。

最近、また少しずつアクセスが増えてきて嬉しく感じています♪

ブクマやシェア、ありがとうございます!

 

 

せっかく読んでくださる方が増えてきているので、せっかくならどんなページがあるのかしっかりわかってもらいたい。そう思って、今まではなかったスマホの『カテゴリ画像リンク』を作り始めました。

 

自分で作業してみて、【今まで知らなかったこと】【苦戦したところ】をわかりやすくまとめてみました。

 

 

 

目次

1、『画像リンク』の作り方

2、『画像サイズ』の変え方

3、画像を横並びにする方法

 

 

 

1、『画像リンク』の作り方

まずは、基本の『画像リンク』の作り方です。

 

基本作業

【HTML】

<a href="リンク先"><img src="画像パス"></a>

 

①リンク先のアドレスをコピーしてきて"リンク先"に貼り付ける

②使いたい画像のアドレス※を"画像パス"に入れる

 

※画像アドレス取得の方法は、パソコンによって違うこともありますが、「右クリック→プロパティ」で表示させることもできるようです。

 

基本はこれで終わりです。

次に『はてなブログ』での私のやり方も説明しておきます。

 

はてなブログでのやり方

①リンク先のアドレスをコピーしてきて"リンク先"に貼り付ける

 

②画像パスの入れ方

(1)下書きページに【写真を投稿】から写真を貼り付けます。

(2)【HTML編集】を開き、「<img class="」より先を「" />」までをコピーします。("から"までの間をコピーです)

(3)そのコピーを"画像パス"に張り付けます。

 

これで完了です。

このようになります↓

f:id:ohanamaru25:20180308201523p:plain

 

 

 

2、『画像サイズ』の変え方

上のままでは画像サイズが大きすぎるので、サイズを縮小させます。

 

HTML

width="50%" height="50%"

 

これを「 />」の前に入力します。( ~width="50%" height="50%" />)

【50%】だと、スペースを入れて横に2つ並べられないので、私は【48%】にしています。これはお好みでいいと思います。

 

1つで表示するとこんな感じです↓

 f:id:ohanamaru25:20180308201523p:plain

 ※これは【50%】です。

 ※画像例なのでリンクは貼ってません。

 

 

3、画像を横並びにする方法

【HTML編集】で</p><p>を間に挟んだ状態だと、画像は上下に並んでしまいます。

 ( ~height="48%" /></a></p>

<p><a href= ~)

 

こうなる↓

 f:id:ohanamaru25:20180308201523p:plain

 f:id:ohanamaru25:20180308170541p:plain

※画像例なのでリンクは貼ってません。 

 

 2つの画像を横並びにしたい場合は、『1』『2』で作ったHTMLを単純にくっつけて配置しましょう。(スペースは可能です。)

(~ height="48%" /></a> <a href=~) 

 

くっつけると、横に並びます↓

 f:id:ohanamaru25:20180308201523p:plain f:id:ohanamaru25:20180308170541p:plain

 ※半角スペースを間に入れています

 

 

 

<まとめ>

始めてしまえば、なんてことない作業だったのですが、初めて『画像リンクを作る』『画像を横並びにさせる』となると、調べないとならないので手間取りました。

 

自分でも忘れないように、わかりやすくまとめられたと思うので、自分で『画像リンク』を作ってみたい方は、参考にしてみてください。

 

では。

 

 

 

ブログに役立つ記事はこちら↓

 

 

 


hatena-fotolife hatena-fotolife


hatena-fotolife