過ぎし子育ての日々はほぼ笑い話

空を見るのが好きな、アラフォーシングルマザーの子育て雑記ブログです。

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

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

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

今回は、プロフィール画像を大きく表示させ、アイコンをクリックするとAboutページを表示させる設定をご紹介します。
いろいろやり方はあると思うので一例という事で。

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

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

広告
 

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

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

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

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

はてなフォトライフが表示されたら、右上のアップロードをクリックし、アップロード画面を表示させます。

②参照をクリックして、プロフィール画像を選択します。

③左下のアップロードをクリックして、フォトライフプロフィール画像を表示させます。

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

画像のURLをコピーする

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

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

②「ブログに貼り付ける」をクリックします。

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

HTMLタグが表示されるので、すべてコピーします

広告
 

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

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

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

 

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

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

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


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

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

このタグが、リンクを意味するHTMLタグです。
<a href=" "></a>

この「" "」の間にAboutページのURLを入れましょう。
通常は、ブログのURL+/about です。
当ブログですと 
a href="https:www.hobowarai.comabout"a になります。

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

当ブログだと
<a href="https:www.hobowarai.comabout">
img src="https:cdn-ak.f.st-hatena.comimagesfotolife*********00000000000000.png" alt="プロフィール画像"></a>

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


「alt="○○"」の○○には画像の説明を入れるとSEOで効果があるようです。
すみません、この辺は勉強不足です。
alt属性について知りたい方は、はてなブログのテーマストアで自作テーマを発表されている、しめひつさんの記事がわかりやすかったので、リンクを貼らせていただきました。
ait属性については記事後半に書かれています。
しめひつさんの記事はこちら🔻

www.okigaru-migaru.net

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

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

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

ダッシュボード
 ↓
デザイン
 ↓
パナマーク
 ↓
サイドバー
 ↓
プロフィールの編集の順にクリックし、モジュールを編集の画面を開きます。

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

プロフィール画像を表示するのチェックを外します。

②ブログの説明欄に、コピーしたプロフィール画像のURLか、リンク付きのプロフィール画像のURLを貼り付けます。
説明文は、貼り付けたタグの下に入れた方が見やすいです。

③「適用」をクリックして、ダッシュボードの「変更を保存する」をクリックすると、設定完了です!

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

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

最後に

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

以上が、はてなブログプロフィール画像を大きく表示させて、Aboutページにリンクさせる設定です。
プロフィール画像のURLだけを張り付けると、サイドバーで大きく表示されるのみ(クリックできない)の設定となります。

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

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

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

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

広告