プロフィール画像を大きく表示させて、Aboutページにリンクさせる設定(はてなブログ初心者さん向け)

プロフィール画像を大きく表示させAboutページにリンクさせる設定

最近、プロフィールの画像を新しく作りました。せっかくなので、サイドバーのプロフィール画像も大きく表示できるように設定しました。

はてなブログの初期設定では、プロフィール画像をクリックするとAboutページを表示する設定になっていますが、自分の好みのサイズを表示させた場合、クリックできなくなるか、プロフィール画像が大きく表示される設定になります。

今回は、プロフィール画像を大きく表示させ、アイコンをクリックするとAboutページを表示させる設定をご紹介します。

いろいろやり方はあると思うので一例という事で。

私も初心者なので、次回忘れないために残します(汗)

はてなブログのデフォルトのプロフィールアイコンは小さい

プロフィール画像を大きく表示させる設定

はてなフォトライフに画像をアップロードする

プロフィール画像を作成したら、はてなフォトライフに画像をアップロードします。

はてなフォトライフは上部のメニューから表示できます。

プロフィール画像を大きく表示させる設定

  1. はてなフォトライフが表示されたら、右上のアップロードをクリックし、アップロード画面を表示させます。
  2. 参照をクリックして、プロフィール画像を選択します。
  3. 左下のアップロードをクリックして、フォトライフにプロフィール画像を表示させます。

プロフィール画像を大きく表示させる設定

画像のURLをコピーする

プロフィール画像を大きく表示させる設定

  1. アップロードされたプロフィール画像の、左下の選択ボックスにチェックを入れます。すでにフォトライフにアップロードされている画像を使う場合は、画面右上の「フォルダを編集」をクリックすると、選択のボックスが表示されます
  2. 「ブログに貼り付ける」をクリックします。

プロフィール画像を大きく表示させる設定

コピーしたタグを編集する

このタグのままでもプロフィール画像を大きくする設定はできますが、リンク先がフォトライフのプロフィール画像に設定されているので、プロフィール画像をクリックすると画像が大きく表示されるだけになってしまいます。

はてなブログを利用されている方はプロフィール画像がAboutページにつながっている事を知っているので、Aboutページを見たいユーザーさんにとっては「あれ、思っていたのと違う・・・」となるので、初期設定のように、Aboutページにリンクを貼りたいと思います。

 

コピーしたタグはこんな感じ(一部全角や0に変えてあります)

<a href=”http: // f.hatena.ne.jp / unohanna / 0000000”><img src=”https: // cdn-ak.f.st-hatena.com / images / fotolife / a / abcdefg / 0000000.png” alt=”000000000000″></a>

メモ帳などに一度貼り付けると、作業しやすいです。

真ん中の青い部分が、プロフィール画像のURLです。
Aboutページにリンクさせず、プロフィール画像のみを大きく表示させたい場合は、この青い部分のタグだけコピーします。

赤い部分が、画像をクリックすると表示されるページのURLが入っています。

このタグが、リンクを意味するHTMLタグです。

この「” “」の間にAboutページのURLを入れましょう。通常は、ブログのURL+/about です。

当ブログですと

<a href=”https: // www.hobowarai.com / about”>画像のURL< / a>

になります。

プロフィール画像のURLをリンクのタグで挟むと、プロフィール画像のクリックでAboutページが表示されるタグのできあがり。

当ブログだと

<a href=”https: // www.hobowarai.com / about”><img src=”https: // cdn-ak.f.st-hatena.com / images / fotolife / a / abcdefg / 0000000.png” alt=”000000000000″>< / a>

編集できたHTMLタグをコピーします。

「alt=”○○”」の○○には画像の説明を入れるとSEOで効果があるようです。すみません、この辺は勉強不足です(汗)

alt属性について知りたい方は、はてなブログのテーマストアで自作テーマを発表されている、しめひつさんの記事がわかりやすかったので、リンクを貼らせていただきました。

ait属性については記事後半に書かれています。

しめひつさんの記事はこちら🔻

alt属性は変更しなくても大きく表示できますし、リンクもできますが、私は画像の説明として、「プロフィール画像」と入れました。

サイドバーのプロフィールにコピーしたタグを貼り付ける

いよいよサイドバーのプロフィール欄にタグを貼り付けます。

ダッシュボード
 ↓
デザイン
 ↓
スパナマーク
 ↓
サイドバー
 ↓
プロフィールの編集

の順にクリックし、モジュールを編集の画面を開きます。

プロフィール画像を大きく表示させる設定

  1. プロフィール画像を表示するのチェックを外します。
  2. ブログの説明欄に、コピーしたプロフィール画像のURLか、リンク付きのプロフィール画像のURLを貼り付けます。説明文は、貼り付けたタグの下に入れた方が見やすいです。
  3. 「適用」をクリックして、ダッシュボードの「変更を保存する」をクリックすると、設定完了です!

プロフィール画像を大きく表示させる設定

アイコンを大きく表示して、Aboutページへのリンクも設定できました。リンクはAboutページ以外にも設定できます。

最後に

今は、はてなIDも一緒に表示させています。

以上が、はてなブログでプロフィール画像を大きく表示させて、Aboutページにリンクさせる設定です。

プロフィール画像のURLだけを張り付けると、サイドバーで大きく表示されるのみ(クリックできない)の設定となります。

文章で書くと長いですが、画像があれば簡単に設定できます。

よし、これで次回アイコン変えてもつまづかずに設定できる!!たぶん(汗)

はてなブログ初心者さん向けの内容ですが、お役に立てれば嬉しいです。

本日も最後まで読んでいただき、ありがとうございました。

WordPress初心者だからこそ
高機能レシポンシブ有料テーマ
THE THOR(ザ・トール)

\公式サイトで詳細をみる/

THE・THOR│公式サイト