れのんのん

セカンド童貞が送る等身大の雑記ブログ。

【はてなブログカスタマイズ】プロフィール画像を目立たせる方法

f:id:le9240:20180528230625p:plain

 

どうも、ブログカスタマイズにハマってますれのんです。

 

今日は、ブログのサイドバーにあるプロフィール画像をでっかくして目立たせちゃう方法をご紹介します。

はてなブログで用意されているプロフィールだと、ちっちゃくて目立たないんですよね。。。

あと、URLを入れてリンクさせてあげたりも出来ないのでちょっと不便。

 

カスタマイズ方法は、下記のみっきーさんの記事を参考(パクリ)にしました。

ありがとうございます!

panmeeee.hatenablog.com

 

正直言うと、みっきーさんの記事を参考に同じ事やっただけなんだけどね、うん。

(ついでにプロフィールもパクってすいません)

少し迷った所とか違うやり方した部分があったので、参考になれば良いなと思って書いてます。

ご本家さんの記事は勿論見に行ってほしいけど、僕のも見てけって!!

 

ビフォーアフター

  • Before

f:id:le9240:20180527221702p:plain

  •  After

f:id:le9240:20180527223204p:plain

 

だいぶ自己主張出来るようになりました。

文字も読みやすいですね。

 

プロフィール画像を用意する

まずは、画像を用意しないと始まりませんね。

既にプロフィール画像がある方は、特に何もしなくても良いかもしれません。

 

みっきーさんも書かれていますが、プロフィール画像を作るならココナラがオススメです!

僕も500円で作ってもらいました。

関連記事:ブログ・SNS用のアイコン作成はココナラがオススメ!!

 

画像のサイズは、「300px × 300px」が良いみたいなので、それを真似しました。

ただし僕のプロフィール画像の場合は背景が透過だったので、画像の境界がなんとも分かりづらい。

 

「PowerPointで付けると楽」と書かれていましたが、マイPCにはOfficeが入っていない・・・。

という事で僕はCanvaを使って枠を付けました!

Canvaは無料でデザインを作成出来るサービスです。

無料なので、使った事無い方は使ってみると良いですよ。

サムネイルなんかを作るのにも便利です( ´ ▽ ` )ノ

Canvaの使用はこちらから!

 

Canvaで画像に枠を付ける手順

※この手順は、画像に枠を付けたい方以外は飛ばしていただいて大丈夫です!

 

まずは、Canvaにログインし右上の「画像サイズを指定」を選択します。

f:id:le9240:20180527224423p:plain

 

「300px × 300px」を指定し、デザインするをクリックします。

f:id:le9240:20180527224551p:plain

 

すると、新しいデザイン作成のタブを開きます。

 

まずは、画像に付けたい枠を作ります。

左のメニューから「背景」を選択し、付けたい枠の色を「デフォルトパレット」で選択します。

f:id:le9240:20180527224916p:plain

▲もし好みの色がない場合は、上の「使用中のカラー」から細かい色を指定する事ができます。

 

すると背景が一面選択した色になります。

f:id:le9240:20180527225155p:plain

 

この背景の上にプロフィール画像を載せていきます。

左のメニューから「アップロード」を選択し、「画像をアップロード」をクリック。

f:id:le9240:20180527225535p:plain

アップロードが完了したら、下に画像を並ぶので画像をクリックして選択します。

 

すると、画像が背景の上に載った状態になります。

f:id:le9240:20180527225910p:plain

「300px × 300px」で画像を挿入しているのに、何故かデザインいっぱいになりません(笑)

画像のサイズはちょっと小さくなるみたいですね、これ。

 

そのままだと枠が少しが大きいので、画像四隅をドラッグしサイズを調整して完成です!

f:id:le9240:20180527230230p:plain

 

完成したら、右上の「ダウンロード」から画像をダウンロードできます。

画像の種類は、推奨の「PNG」のままで良いと思います。

 

説明しておきながら思ったけど、絶対もっと簡単な方法ある笑

まぁあくまで一つのやり方として、参考にしてください。

 

プロフィールを作成する

画像を用意出来たら、プロフィールを作成します。

ダッシュボードから、「デザイン」⇛「カスタマイズ」⇛「サイドバー」→「モジュールを追加」⇛「HTML」を選択します。

 

下記のような画面になるので、ここにHTMLを設定していきます。

f:id:le9240:20180527231110p:plain

 

HTMLの作成方法

自分でHTMLを作成出来るって方は思いまま作っていただくだけで大丈夫ですが、そうでない方がほとんどだと思います。

みっきーさんのやられてた方法が画期的過ぎるので、真似しましょう笑

 

新しく記事を作成します。

作成した記事の本文に、自分の好きなようにプロフィールを書き殴ります。

画像は用意したプロフィール画像を挿入します。

こんな感じです。

f:id:le9240:20180527232148p:plain

 

リンクにしたい部分は、いつも記事を書く時の感じでリンクを挿入すればOK。

 

書き終えたら、記事を「HTML編集」に切り替えます。

すると、HTMLが出来ているではありませんか!!

f:id:le9240:20180527232427p:plain

 

「読者になる」ボタンは、初期のものを使用する場合は「設定」⇛「詳細設定」⇛「読者になるボタン」のHTMLコードを貼り付ければOKです。

 f:id:le9240:20180528001643p:plain

SNSのフォローボタンなどを付けたい方は、別途HTMLに書き足して下さい。

 

あとは、これを「モジュールを追加」の部分に貼り付けて「適用」すればOKです。

f:id:le9240:20180527235023p:plain

 

なんて簡単なんだ。

これなら誰でも出来る、革命じゃ!!

 

コピペで使いたい方向けにコード
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/le9240/20180526/20180526225316.png" alt="れのんブログ" /></p>
<p>書いている人:<strong><a href="http://www.lenonnon.com/about"><span style="border-bottom: double 3px #ff0000;">れのん(id:le9240)</span></a></strong></p>
<p>兵庫県出身の20代男子。セカンド童貞。</p>
<p>本業はシステムエンジニアです。</p>
<p>女の子に対し疑心暗鬼なセカンド童貞が感じたこと、役立つことを書いてます。</p>
<p>好きなことは「モテること」、嫌いなことは「既読スルー」。<br /> <iframe src="https://blog.hatena.ne.jp/le9240/le9240.hatenablog.com/subscribe/iframe" width="150" height="28" frameborder="0" scrolling="no"></iframe></p>

 

1つ注意点ですが、読者になるボタンのソース(src = の部分)は下記のような構成になっています。

<iframe src="https://blog.hatena.ne.jp/はてなID/ブログURL/subscribe/iframe"

上記のブログURLですが、独自ドメインを設定していてそのままブログのURLを設定すると上手くいきません。

「設定」⇛「基本設定」に書いてあるURLを設定しましょう。

f:id:le9240:20180528002839p:plain

 

さいごに

画像がデカくなった事で、今まで目立たなかったプロフィールがアピール出来るようになりました。

初期のプロフィールよりは断然良い感じになり、満足しています。

みっきーさんありがとうございます。

 

変えてみて思いましたが、プロフィールってやっぱ大事ですね。

ブログを訪れた際に1番か2番目に見る所だと思いますので、やはり力を入れておきたい所。

 

僕なんてプロフィールが面白かったら、特に記事書いて無くても読者登録しちゃうからね!笑

そう思うと自分も面白いプロフィールを考えなきゃて思ってきた。

 

皆さんもインパクトのあるプロフィールにしてみると、読んだ人の目に止まる可能性が高くなるかもしれませんので、適当に書かず考えて設定してみて下さい。