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

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

もともとプロフィールのアイコン画像をクリックすると、詳細ページに飛ぶようにはなっているんですがちょっと使いづらいんですよね。そこで自分で自己紹介ページを作ってサイドバーのプロフィール欄からリンクを貼ってしまおうというわけです。

スポンサーリンク
レクタングル大336×280

aboutページはカスタマイズが面倒

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

下の画像がそのaboutベージです。

f:id:bokurock:20170817224110p:plain

この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

今回のまとめ

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

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

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

スポンサーリンク
レクタングル大336×280
レクタングル大336×280

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. rocketman5th より:

    参考にしました!
    記事ありがとうございます。

  2. bokurock より:

    ロケットマンさん
    参考になってうれしいですっ!

  3. bokurock より:

    ちひろさん
    参考になって良かったです!