あつもり

視力回復や1日2食、音楽記事などを書いているブログです

はてなブログでサイドバーのプロフィールに自己紹介リンクを貼る方法

2017年6月25日更新

こんにちはあつもりです。 今回ははてなブログのサイドバーに、詳しい自己紹介ページへのリンクを貼る方法を紹介します。

もともとプロフィールのアイコン画像をクリックすると、詳細ページに飛ぶようにはなっているんですがちょっと使いづらいんですよね。

詳細ページにはブログ名、簡単なブログの説明、投稿数などが表示されています。このページの正式名はaboutページと言います。

このaboutページなんですがカスタマイズがとっても面倒なんですよね。それとアイコン画像をクリックすると詳細ページに飛ぶってわかりにくいと思うんですよね。

「詳細はこちら」とか「このブログについて」とか文字のリンクを貼ったほうが、ユーザー視点でわかりやすいと思います。

そんなこと考えているうちに、いっそのこと「自己紹介ページを自分で作ってちゃえばいいじゃん。そんでサイドバーのプロフィール欄からリンクを貼ればいいじゃん。」

って思い立ちました。これからその方法を解説していきます。

 

 サイドバーのプロフィールに自己紹介リンクを貼る方法 

 では早速オリジナルの自己紹介リンクを貼る方法を解説していきます。はてなブログ初心者のかたにもわかりやすいように画像を交えて説明していきます。

自己紹介用の記事を書く 

まずは自己紹介用の記事を書きます。これは普段記事を書く方法と同じです。   

f:id:bokurock:20170625144840p:plain

記事の一覧に自己紹介記事が表示されているのを確認します

画面上の「ブログを表示」をクリックします 

f:id:bokurock:20170625144856p:plain

 

自己紹介記事がトップ画面に表示されていると思います。タイトルをクリックします。。すると自己紹介記事のURLへジャンプします。

f:id:bokurock:20170625145002p:plain

 

ブラウザ上部のURLをコピーします。コピーしたURLをメモ帳などのテキストエディタに貼り付けておいてください。

f:id:bokurock:20170625145019p:plain

 

サイドバーのプロフィールを編集する 

画面左のメニュー一覧から「デザイン」をクリックします 

f:id:bokurock:20170625145046p:plain

「カスタマイズ」アイコン(六角レンチの絵)をクリックします 

f:id:bokurock:20170625145105p:plain

「サイドバー」をクリックするとさらにメニューが現れます

「編集」をクリックします 

f:id:bokurock:20170625145127p:plain

 

プロフィールの編集画面が表示されます。ここで編集した内容がサイドバーに表示されます。 

「プログの説明」のテキストボックスをクリックします。

既にブログの説明文が入っていると思いますので、以下の文を説明文に追記する形で貼り付けます。
<a href="http://www.atumori.biz/entry/2016/08/27/160539">詳しいプロフィールを見る</a> 

http://www.atumori.biz/entry/2016/08/27/160539の部分を先ほどコピーしたURLに差し替えて下さい。 

※「詳しいプロフィールを見る」という文言は自由に変更できます。「自己紹介ページ」とか「このブログについて」とかでも良いと思いますよ。 

適用ボタンをクリックします。

f:id:bokurock:20170625145152p:plain

変更を保存するボタンをクリックします。これをやらないと変更が反映されませんので注意してください。

f:id:bokurock:20170625145249p:plain

 

 

サイドバーのプロフィール欄に「詳しいプロフィールを見る」リンクが表示されました。 

f:id:bokurock:20170625145316p:plain

 

今回のまとめ 

今回やった内容をまとめるます。

  • 自己紹介用の記事を書く
  • サイドバーの編集画面を開く
  • 自己紹介用の記事へのリンクをサイドバーに貼る

お疲れさまでした~!以上で終わりです。それほど難しくないのでぜひチャレンジしてみてください。これで自由に自己紹介ページをカスタマイズできますね~。じゃんじゃん!