はてなブログカスタマイズ!プロフィールを目立たせてアピール!
はてなブログのサイドバーのプロフィール欄をカスタマイズしました。デフォルトだと小さくて目立たないんですよね。プロフィールはブログの顔ということで、画像を大きくして目立つように。調べたら意外とでてこなかったので、まとめてみました。HTMLとCSSの知識はほとんどいらず、簡単です!参考にしてみてください!
- デフォルトのサイドバーのプロフィール欄
- カスタマイズしたプロフィール欄
- まずはプロフィール画像を決めよう
- SNSのリンクや読者になるボタン
- プロフィールの作り方
- 実際のコード例
- プロフィール欄は定期的に見直しを!
- まとめ
デフォルトのサイドバーのプロフィール欄
はてなブログではサイドバーにデフォルトでプロフィールが設定されています。これが下のコチラ。
画像が小さい丸で目立ちません。設定できる要素もそんなにないんです。
タイトル
プロフィール画像を表示
はてなIDを表示
ブログの説明
読者になるボタンを表示
Facebookの友達になる、フィード購読ボタンを表示
Twitterのフォローボタンの表示
デフォルトで設定できるのこれしかありません。ここにHTMLを書いたり、新たにリンクを追加したりできないんですよね。これはなかなかに不便です。
ここで、いじれないなら新たに作っちゃおうぜ!!
カスタマイズしたプロフィール欄
こちらが新たに作ったプロフィールです。画像をとにかく目立つように。SNSのフォローや読者になるボタン、お問い合わせなど最低限のものをつけています。HTMLほぼほぼ書けないぼくが作ったので、SNSのボタンもっとかっこよくしたい!っていう人は先人のブロガーのみなさんのブログを参考にしてみてください。
まずはプロフィール画像を決めよう
まずは自分にあったプロフィール画像を決めます。ぼくのプロフィール画像は友達に書いてもらいました!ありがとう!デザイナーの友達なんていないよっていう人にはこちらがオススメ。
ココナラ - あなたの得意でハッピーが広がるワンコインマーケット
500 円で自分が気になった作風の画像でアイコンを作ってもらえます。
▼こちらのブログでわかりやすくまとまっています。
たったの500円で似顔絵を描いてもらえる????お得なサービス「ココナラ」の使い方徹底紹介!! | サラシボ。
画像のサイズは300px×300px
画像のサイズはだいたい300px×300pxを目安にするといいでしょう。ぼくのプロフィール欄の画像は270×270です。参考までに。
画像に枠をつけて目立たせる
プロフィール画像にうっすら線をつけて目立たせています。HTMLやCSSが書ける人ならばちょちょいのちょいでしょうが、書けない人でもご安心を!
パワーポイントで画像に枠をつければいいんです!←天才
画像に文字を入れたり、ちょっとした編集ならパワーポイントがめっちゃ便利です。ほんの数十秒で枠をつけれちゃいます。
SNSのリンクや読者になるボタン
やっぱり最低限はプロフィール欄に乗せたいですよね。既存の形でオッケーという人はコードのコピペをすることで簡単にできます。読者になるボタンは 設定→詳細設定→読者になるボタンとあるのでHTMLをコピペして貼り付けるだけ!
プロフィールの作り方
デザイン→カスタマイズ→サイドバー→モジュールを追加→HTML。まずここまで選択しHTMLを実際に入力します。既存のプロフィールを作り変えるのでタイトルをプロフィールと入力します。
ここにベタ打ちで入力していくのですが、コツがあります。ブログの下書き画面で書きたいことや載せたい内容を書きなぐりましょう。リンクも貼りましょう。
△こんな感じ
次にHTML編集に切り替えましょう。これをただたださっきのサードバーの欄にコピペするだけ。
△コピーして
△貼り付けて
△はい完成!
実際のコード例
<img src="http://img.f.hatena.ne.jp/images/fotolife/p/panme421/20160112/20160112162230.png" alt="ミキブログ"></a>
<P>書いている人:<b><a href="http://panmeeee.hatenablog.com/about"><span style="border-bottom:double 3px #ff0000;">みっきー(id:panme421)</span></P></a></b><p>早稲田大学在学中。
フィリピン留学、おすすめアプリなどなどをマイペースに更新していきます。</p><p><strong><a href="http://panmeeee.hatenablog.com/entry/2016/01/01/000000">お問い合わせはこちら</a></strong></p>
<iframe src="http://blog.hatena.ne.jp/panme421/panmeeee.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>
<div class="hatena-follow-button-box btn-twitter">
<a href="https://twitter.com/Matarih1878" class="twitter-follow-button" data-show-count="false" data-lang="ja">
@Matarih1878をフォロー
</a>
</div><a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fpanmeeee.hatenablog.com%2Frss' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png' alt='follow us in feedly' width='131' height='56'></a>
プロフィール欄は定期的に見直しを!
一度作ったからといって安心せず、プロフィール欄は日々更新していきましょう。ほかのブロガーのプロフィール欄をみるのも面白いし、参考になりますよ。
まとめ
今回はなにがなにやらわからないっていう人向けの内容です。でも自分のプロフィールが目立つと楽しいですね。なにもいじってないよって人はぜひ試してみてください。