50のてならい

50のてならい

50になってからネットについて色々と検証していくブログです。

はてなブログのプロフィールのカスタマイズ

f:id:jr0704japan:20170613103448j:plain

はてなブログのデェフォルトのプロフィール欄は、たいていはサイドバーにあって小さなアイコンと、数行の説明が書ける程度となってますよね。

これでは、初めて訪れてくれた人がこのブログを書いている人は、どんな人なのか、このブログは何について書かれているのか、数行では中々わからないですよね。

そこで、プロフィール欄のカスタマイズについてメモ記事として紹介です。

カスタマイズの参考サイト

はてなブログユーザーでも、プロフィール欄に満足してない人は沢山いるようで、今回参考にさせて貰ったのはみっきーさんのサイトです。

本人のプロフィールを引用してます。

早稲田大学在学中。フィリピン留学してました就職活動を終え、入社を控えています。いろいろな人のブログを漁るのが大好き

 

panmeeee.hatenablog.com

すごいですねえ~。早稲田大学とはカッコイイですね!

 

簡単な方法に感動

こちらの記事で凄く感心したのは、下書きで書いた文章をHTML表示させて、そのまま貼り付けて、表示する。

私らシロウトにはとてつもなく、わかりやすい方法だったので、良いなと思いました。

 

普通は、画像をアップロードして、その画像のURLをコピーして、それをHTMLの中で指定して、  ああああっ~  もうわからん。 

 

と、いうことがなくて助かりました。

作成時間は、画像の加工だけが10分くらいで、食後にサラサラで出来ました。

 

ブロフィールの標準設定は

プロフィール欄をカスタマイズしようと思ったら

管理画面→デザイン→カスタマイズ→サイドバー→プロフィールとクリック

f:id:jr0704japan:20170613104627j:plain

 標準の設定ではプロフィール欄は、これくらいが設定項目となってます。

  • ブログの説明
  • 最終更新
  • 読者になるボタン
  • ツイッターのフォローボタン
  • facebookフォローボタン

これに、ブログアイコンがあれば小さいのが表示されますね。

今回は、これを目立たせようと言うわけです。

 

プロフィール作成手順

手順を簡単に説明すると

  1. 下書きを書く  画像も一緒に貼り付けしておきます
  2. 下書きをHTML編集に切り替える
  3. HTMLをコピーする
  4. 管理画面
  5. デザイン
  6. カスタマイズ
  7. サイドバー
  8. モジュールを追加をクリック
  9. HTMLをクリック
  10. タイトルをつけて、3でコピーしたHTMLを貼り付け
  11. 適用で終わり

 

表示したい画像は先に見つけておいて下さいね!

奇麗な画像でもいいし、イラストでもOKです。

私は下記のVisual Huntからいつも見つけてます。

chan-biku.club

 

画像の準備

画像の大きさは、300×300なら真四角ですね。

私の画像は、300×550くらいあります。そんな長細い画像のっけている人がいないのでやってみました^^;  

画像に影をつけるとかをカスタマイズですると時間かかるのでPhotShopで簡単に!(^^)!

 

ブログって、平面での表現なのでいかに立体的にみせるか、動きを見せたりするのが見てくれる人への配慮になりますよね。次は動きも検証です!

 

プロフィール作成手順 1  実際の下書き

書いている人:chan  (→ツイッターとかしてる人はID書いたりしたらいいかも)

人生50年。と、言われてもねえ~ すでに越えてしまった。 昔ならもうとっくにあの世で幸せに暮らしているはず(@_@) 人生に挫折しかかっている、リストラ候補ナンバーワンのおっさんがネットの世界で何が出来るのか 実際に検証をしてみるブログです。

f:id:jr0704japan:20170612213549j:plain

 

見たまんまやん。と、思うかもしれませんがほんと下書きはこれだけです。

これなら気軽に書き替え出来ますね!

読者ボタンの設置とかは後で追加します。

 

プロフィール作成手順 2  HTML編集に切替

 編集見たままモードからHTML編集に切替

f:id:jr0704japan:20170613113544j:plain

 

 プロフィール作成手順 3  HTML編集をコビー

 HTMLをコピー

f:id:jr0704japan:20170613115512j:plain

 

   プロフィール作成手順 4・5・6・7・8・9  管理画面からHTMLをクリックまで

  管理画面→デザイン→詳細をクリック

② モジュールを追加クリック

③ HTMLをクリック

f:id:jr0704japan:20170613112819j:plain

 

プロフィール作成手順 10 タイトルをつけて、コピーしたHTMLを貼り付け

 タイトルをつけてください

② プロフィール作成手順 3 のHTML編集でコビーした物を貼り付けして下さい

③ 適用をクリック

f:id:jr0704japan:20170613153151j:plain

 

読者ボタンの追加

なんかさびしいなあということで読者ボタンのHTMLを追加します。

どこにあるかというと

管理画面→設定→詳細の下のほうにあります。

 

 コピーして下さい。

f:id:jr0704japan:20170613153645j:plain

 

HTMLモジュール編集に追加

さきほど作成したモジュールの編集に追加します。

 貼り付けます。

② 適用をクリック

f:id:jr0704japan:20170613155132j:plain

 

元のプロフィール欄は削除

元々のプロフィール欄は、サイドバーから削除して下さい。

設置する位置はドラックで変更出来るのでお好みの場所に設置すると良いと思います。

  

まとめ 

今回のプロフィールのカスタマイズは簡単なので、プロフィール欄がいまいちだなあと思っている方はカスタマイズしてみると楽しいと思いますよ。

読者ボタンとか、カスタマイズできそうですしね!

 

ほかには、ツイッターFacebookなどやられているかたは、ボタンの設置とかすると良いと思います。

私はアカウントは持っているのですがほんんど更新しないので、設置する意味がないのでつけてません(笑)

先人の方たちが沢山記事を書いているので、ボタン関係についてはそちらを参考にしてカスタマイズしてみてください。