【はてなブログ】プロフィールをCSSを使って自分好みに作成する方法

ブログの記事を読んでいると、サイドバーや記事下のプロフィールがとてもおしゃれで、自分も同じように好みのプロフィールにしてみたいと思うことってありませんか？

今回は、CSSを使ってプロフィールを自分好みにカスタマイズする方法をご紹介していきたいと思います。

はてなブログでのプロフィール編集のご紹介となりますが、記述する場所さえわかればその他のブログでも応用が利くので是非参考にしてみてください！

注意

• 今回は、はてなブログPROを使用している人を想定して作成されています。

まだ、「はてなブログPRO」を使用していない人は是非おすすめなので、「はてなブログpro」を検討してみて下さい

はてなブログproはこちらから！

ドメイン所得がまだの方で取得に迷っている方は是非こちらの記事も参考にしてみてください！

www.rablifes.com

【スポンサーリンク】

自分好みにのプロフィール作成方法

今回作成するプロフィールのレイアウトは以下のようになります。

作業の内容としては、以下の3ステップを行います。

3ステップ

• プロフィール画像の準備
• HTMLの記述
• CSSの記述

それでは順に説明していきますね！

画像の準備

まずはプロフィール作成に使用するプロフィール画像の準備を行います。
はてなのアカウントに使用している画像でもいいですし、新たに用意しても構いません。
両方統一しておくと、混乱が少ないと思うので特にこだわりがなければ統一することをおすすめします。
アップロードに必要な作業は2つあります。

• はてなフォトに画像をアップロード
• アップロードした画像のURLを取得する

特に難しくないので安心してくださいね！

まずは、はてなフォトライフを開きます。
画面端にある、アップロードをクリックします。

オプションにあるフォルダの設定をHatena Blogに変更します。
※わかりやすくフォルダを別にしても構いません。

「クリックしてファイルを選択するか、ここにファイルをドラックしてください」の場所から使いたい画像をアップロードします。

アップロードが完了すると上記のようになります。

次に今回使用する画像の"URL"を取得します。
取得方法は複数ありますが、今回は以下の方法で取得します。

• はてなブログで「編集見たまま」を出し、そこに画像を張り付けHTML編集を開きます。

赤枠の内容が画像の情報となるため、エディタやメモ帳に控えておきましょう

HTML記述内容

HTMLの編集は「デザイン＞カスタマイズ＞サイドバー＞モジュール追加＞HTML」の順で選択します。
タイトルを「プロフィール」と記述し、HTMLの記述をします。

<div class="profile">
	<div class="profile-img" style="text-align:center;">
		<span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/DwarfRabbit/20200423/20200423165933.jpg" alt="f:id:DwarfRabbit:20200423165933j:plain" title="f:id:DwarfRabbit:20200423165933j:plain" class="hatena-fotolife" itemprop="image" /></span>
	</div>

	<div class="id" style="text-align: center;">
		<a href="https://www.rablifes.com/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="DwarfRabbit">id:DwarfRabbit</span></a>
		<a href="http://blog.hatena.ne.jp/guide/pro" title="はてなブログPro"><i class="badge-type-pro">はてなブログPro</i></a>
	</div>

	<div class="profile-description" style="font-size:0.9em;text-align:center;">
		<p>ここは自己紹介文となります！</p>
		<p>内容はなるべく簡潔に好きなことをかくといいと思います！<br />
			頑張ってください！</p>
		<p>\\フォローはこちらから！//</p>
	</div>

	<div id="profile-follow">
		<a href="http://blog.hatena.ne.jp/はてなブログのID/自分のブログのURLを記述/subscribe" ><div class="profile-hatena">Hatena</div></a>
		<a href="https://twitter.com/intent/follow?screen_name=ツイッターIDを記載" target="_blank" ><div class="profile-twitter">Twitter</div></a>
		<a href="http://feedly.com/i/subscription/feed/自分のブログのURLを記述/feed" target="_blank"><div class="profile-feedly">Feedly</div></a>
	</div>
</div>

※こちらをコピーしてもそのままでは使えないため下の「HTML補足説明」を必ず読んでください

HTML補足説明

上記のソースコードを任意のテキストエディタにコピーをして作業をすると作業しやすいのでおすすめです。

最初の修正箇所は、上記HTMLの3行目の内容を修正します。
「＜span＞」で囲われている中に「＜img~」から始まる部分があると思います。

その場所に、今回使用する自分のプロフィール画像の情報を「＜img～"image" /＞」まで上書きしましょう。

次は、各種リンク先の設定を行います。
上記HTMLの「＜div id="profile-follow"＞」の記述内容は、はてなブログ・Twitter・feedlyのフォローを行うための各種リンクの記述となっています。

それぞれ、自分のURLへとリンクするように設定が必要になるためその設定を行います。

上記のHTMLには修正が必要な部分は日本語で記載してあるため、場所はわかると思いますが、記載をする際に以下のことに注意し記載してください。

• はてな：https/httpを抜いた自分のURLを記載（例）”www.rablifes.com”
• Twitter：＠を抜いた自分のアカウントIDを記載
  
• feedly：自分のURLを記載（例）”https://www.rablifes.com”

CSS記述内容

次はCSSの記述は以下の内容になります。

/*--------------------------------------
   プロフィール
--------------------------------------*/
/* タイトル位置 */
.hatena-module-title {
    text-align: center;
}
/* アイコン画像のサイズ設定*/
#box2 img {
    max-width: 50%;
}
/* アイコン画像を丸くする */
.profile img {
    border-radius: 150px;
    -moz-border-image: border-radius: 150px;
    -webkit-border-image: border-radius: 150px;
}
/*ニックネーム下線なし*/
.hatena-id-link,.comment-user-id{
    text-decoration:none;
}
.id a:hover {
    color: #00ACEE;
   
}

/*HTMLサイドバーフォローボタン枠*/
#profile-follow {
    font-size: 0;
    margin-bottom: 20px;
}
#profile-follow a {
    color: #454545;
}

.profile-hatena {
    border-right: 1px solid #dcdcdc;
    padding: 15px 0 13px;
    font-size: 15px;
    display: inline-block;
    width: calc(33%);
    text-align: center;
}

.profile-hatena::before {
    margin: -5px 0 0;
    font-size: 25px;
    content: "\f000";
    display: inline-block;
    font-family: blogicon;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 7px;
}
.profile-twitter {
    padding: 15px 0 13px;
    border-right: 1px solid #dcdcdc;
    font-size: 15px;
    display: inline-block;
    width: calc(33%);
    text-align: center;
}
.profile-twitter::before {
    margin: -5px 0 0;
    font-size: 25px;
    content: "\f035";
    display: inline-block;
    font-family: blogicon;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 7px;
}
.profile-feedly {
    padding: 15px 0 13px;
    font-size: 15px;
    display: inline-block;
    width: calc(32.5%);
    text-align: center;
}
.profile-feedly::before {
    margin: -5px 0 0;
    font-size: 25px;
    content: "\f04e";
    display: inline-block;
    font-family: blogicon;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 7px;
}

.profile-hatena:hover{
    color: #977d3b;
}
.profile-twitter:hover{
    color: #00ACEE;
}
.profile-feedly:hover{
    color: #70CA3B;
}

プレビュー

上記で表示したプロフィールレイアウトになり、各SNSのアイコンにホバーした際に色が変更されれば完成です！

今まで、はてなブログの既存のプロフィールを使用していたと思いますが、今回新しく作成したため既存のモジュールは削除してしまって大丈夫です。

お疲れさまでした！

反映されないときの対処法

cssやHTMLが反映うまく反映されない場合は、詳しくは私の過去の記事で紹介しているため、そちらをチェックしてみてください。

一緒に読みたい

• 【はてなブログ】CSSでボックスデザイン(囲い枠)の作成方法

SNSとうまくリンクが出来ない場合は、おそらく記載したURLがきちんと記載できていない場合があります。

今回の場合はhttps・httpの記載が必要な場合と必要ない場合があるため、注意して記載しましょう。

最後に

プロフィールはページに訪れてくれた多くの人の目に触れるため、自分の顔といっても過言ではありません。

プロフィールを自分好みにカスタマイズするだけで、さらに見栄えが良くなり、ちょっと先輩ブロガーのような気がしますよね（笑）

今回は、少し自分で修正する部分もあるため、少し難しく感じる人もいるかもしれませんが、ゆっくりカスタマイズすればそこまで難しい物でもないのでとてもおすすめです！

プロフィールをもっと充実させたい人や、どうやって修正するか悩んでいる人は是非参考にしてみてください！

一緒に読みたい

• 【はてなブログ】HTML・CSSを使って自分好みに簡単に編集する方法まとめ
• プログラミングを独学で身に着けるおすすめの手順
• ブログで稼ぐために必要な成約率を上げる考え方