はてなブログ

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

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

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

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

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

 

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

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

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

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

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

『はてなブログ』のカスタマイズ!サイドバーに画像編 – wepli.2
他にもいろいろなブログで、サイドバーに画像付きリンクを貼る方法があったのですが、これが一番シンプルで、CSSなどをいじる必要がなかったし、5分でできたので参考になりました

新アップローダーでのやり方

まずは、はてなフォトライフに行きます。

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

2 アップロードをクリック

3 新しいアップローダーに画像をアップする

4 画像のアップが終わったら「フォルダを編集」をクリック

すると、昔ながらの画面に行くので、画像の左下をクリックして画像を選び、「ブログに貼り付ける」をクリック、HTMLタグをメモなどにコピペする

HTMLタグは下記の様になっているはずなので、赤文字の部分をリンク先のURLに変更し、青文字の部分を画像の説明に変更します。注)青文字部分はしてもしなくてもいいですが、画像検索からの流入を考えるとした方が良いです

<a href=”http://f.hatena.ne.jp/neyukix/20190708205018“><img src=”https://cdn-ak.f.st-hatena.com/images/fotolife/n/neyukix/20190808/20190808205018.jpg” alt=”20190807205018“></a>

変更例)

<a href=”https://www.gipsyjazznyumon.com/life/entry/how-to-customise-hatenablog“><img src=”https://cdn-ak.f.st-hatena.com/images/fotolife/n/neyukix/20190808/20190808205018.jpg” alt=”はてなブログのサイドバーに画像付きリンクを貼る“></a>

旧アップローダーでのやり方

ほぼ上記したものと一緒なのですが、こちらがいいって方もいるかと思うので、紹介します。

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

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

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

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

注)画像アップロードの仕様が変わっているので、「旧アップローダーはこちら」をクリックして進めて下さい。

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

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

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

はてなブログのサイドバーに画像付きリンクを貼る方法
あとは新アップローダーと同じで、リンク先のURLを変更し、alt部分を画像の説明に変更します。注)alt部分はしてもしなくてもいいですが、画像検索からの流入を考えるとした方が良いです

2 はてなブログの設定

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

はてなブログのサイドバーに画像付きリンクを設置する手順

次にリンク先が間違いないかチェックし、タイトルを入れましょう。

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

サイドバーを固定(追従)する方法

では今回作った画像付きリンクを常に表示させておきたい場合の方法も、紹介しますね。これは当然PCのみですが。(私はテーマがInnocentです。他のテーマでも出来るはずですが、もし動作しない場合はごめんなさい!)

読者が記事を読み進めて下の方に行くと、サイドバーって見えなくなりますよね?なので、モジュールを追従するように設定してあげます。

注)これはサイドバーの最後のモジュールを追従する方法なので、下図のように固定したいモジュールをサイドバーの最後に持ってきてください。画像付きリンクのみを固定する方法ではありません!

まずは「デザイン」→「カスタマイズ」→「サイドバー」に行き、好みの項目をサイドバーの最後に持っていきます。私は、必須アイテムはこ・・・というやつです。

はてなブログのサイドバーを固定する方法

次に以下を、フッタにコピペしてください。

<!–サイドバー固定–>
<script>
$(window).load(function() {
var sideLast = $(“.hatena-module”).filter(“:last”);
var sideLastTop = sideLast.offset().top + 450;
var sideLastWidth = sideLast.width();
var win = $(window);

win.scroll(function(){
if(win.scrollTop() > sideLastTop) {
sideLast.css(“position”,’fixed’);
sideLast.css(“top”,’20px’);
sideLast.css(“width”,sideLastWidth);
}else{
sideLast.css(“position”,’relative’);
};
});
});
</script>

まとめ

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

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

こちらも一緒にどうぞ

収益アップ!アドセンスのCTRを1,6%まで上げた2つの方法

PC・スマホで自分のアクセスをアナリティクスから除外する方法