ジプシージャズ入門

ジプシージャズやドイツでの育児について

<2018年最新>はてなブログのサイドバーに画像付きリンクを貼る方法

Sponsored Link

f:id:neyukix:20181023222815j:plain

今回ようやく記事数が60を超えたので、ご褒美としてブログのカスタマイズにちょっと時間を割こうといろいろやっていると、サイドバーに画像付きのリンクを貼る方法がかなり簡単だったので、ご紹介します。

はてなブログのカスタマイズを検索すると、いろいろなものが出てきますよね?

かなり昔の記事で、仕様が変わっていて分かりにくかったり、なんか面倒臭い感じだったりと。HTMLの知識があれば別ですけど、私は全然わからないので苦労しています。

 今回ご紹介する方法は、簡単、早い、知識いらずで、出来ますので皆さんもやってみて下さい。

 目次

 

サイドバーに画像を貼ると 

はてなブログのサイドバーに画像付きリンクを貼る方法

 上記写真のようになり、画像をクリックすると指定したリンクに飛びます。

 画像付きだと、ちょっとオシャレになりますね。

参考にしたブログはこちらです。

他にもいろいろなブログで、サイドバーに画像付きリンクを貼る方法があったのですが、これが一番シンプルで、CSSなどをいじる必要がなかったし、5分でできたので参考になりました

1  はてなフォトライフに画像アップ

画面右上のこのマークをクリックし、はてなフォトライフをクリック。

はてなブログのサイドバーに画像付きリンクを貼る方法

画面右上のアップロードをクリック

はてなブログのサイドバーに画像付きリンクを貼る方法

ファイルを選択して、左下にあるアップロードをクリック

はてなブログのサイドバーに画像付きリンクを貼る方法

アップロード後、写真を選択して、ブログに貼り付けるをクリックし、HTMLタグをコピー

はてなブログのサイドバーに画像付きリンクを貼る方法

 HTMLタグはこんな感じになっているので、赤文字の部分にリンク先のURLをコピペし、青文字部分に画像の説明を入れる

はてなブログのサイドバーに画像付きリンクを貼る方法

2 はてなブログにいく

次に、はてなの管理画面からデザイン→カスタマイズ(レンチマーク)→サイドバー→モジュールを追加 

はてなブログのサイドバーに画像付きリンクを貼る方法

 最後に適用をクリックし、変更を保存するをクリックで完了です

まとめ

いかがでしたか?簡単だったでしょ?

私は今は記事を増やすことに集中しているため、あまりカスタマイズに時間をかけないので、この方法はすごくよかったです。

 <こちら<はてなブログ>トップページにアドセンスのインフィード広告を入れる方法 もどうぞ>