はてなブログのプロフィール欄をおしゃれにする方法【コピペＯＫ・スマホ用】

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

突然ですが

はてなブログのデザインは、ダサい！

そんな風に思っているブロガーさん、いらっしゃいませんか？

このように嘆くはてなブロガーさんに、私の意見をはっきり言わせてもらうと

うん

ほんとダサいよね

と思わず同調する他ないでしょう。

（おい）

下の記事でも書いたように最近では、はてなブログにもお洒落なテンプレートもあります。

なので、以前ほどユーザーが悩む機会は減ったのではないかと思います。

www.nekopajamas.net

けれども、ですよ。

やはり普段、ワードプレスのブログを目にする度に

（ちくしょう、こんなお洒落なブログほしい）

と悔しさを覚えるのも、また本音になります。

ということで、私と同じような思いを抱いているはてなブロガーさんのために、今回は

• はてなブログのプロフィール欄をお洒落にする方法

をまとめておきたいと思います。

• 完全コピペＯＫ

なので宜しければ参考にしてください。

ただしデザインのフッター編集が中心となりますので

• はてなPRO限定

です。

また私の場合、スマホから見たときのデザインは

• デフォルトのまま
• ＝レスポンシブルデザインではない
• 全部自分で勝手にカスタマイズ

になっています。

テンプレートは使用していない状態です。

▲はてなブログでよく見かけるこの状態からコードをごりごり入れて、今のブログの見た目にしています。

また私はただの素人ですので、カスタマイズは自己責任でお願いいたします。

※失敗や不備があってもサポートや保証はできませんので、予めご了承ください。

１、既存のはてなプロフィール欄を消す

さて、はてなブログには、最初からプロフィール欄が設けられています。

でも

• デザインがあまり美しくない
• カスタマイズしにくい
• プロフィール画像がぼやける

という欠点があります。

（特にプロフィール画像がぼやける点が致命的かと思われます）

そこで、このプロフィール欄は消去して、新しいプロフィール欄を自分で一から作成してしまいます。

ということでプロフィール欄を消してしまいましょう。

既存プロフィールの消し方は、下のコードを「デザイン」のスマホの「フッター」部分に貼るだけでＯＫです。

<style>
.hatena-module-profile,
.hatena-module.profile {
display:none;
}
.footer-action-wrapper{
display:none;
}
.touch-item-list {
display:none;
}

</style>

このコードを貼ると、デフォルトで付いているはてなのリンクも消えるはずです。

消すと一気にスタイリッシュになるので、おすすめです。

２、新しいプロフィール欄を作成する

既存のプロフィール欄を消した部分に、新しいプロフィール欄を加えましょう。

今回作成するのは当ブログで現在使用している、こちらのデザインのプロフィール欄になります。

「デザイン」のスマホの「フッター」部分に、以下のコードを貼ってください。

<div class=”profile-box”>
<img src=”画像URL”　width=”150″ height=”120″ >
<p class=”name”>名前</p>
＊
<p>茶とらの猫です。</p>
<p>昼寝が好きで、毎日幸せです。</p>
<p>他の猫に比べて、太りやすいので少し悩んでいます。</p>
＊
<p>【日本全域】多くの家庭で愛され中！</p>
<p><a href=”ブログ紹介記事のURL”>当ブログの詳しい紹介はこちら</a></p>
<p><a href =”お問い合わせページURL”>お問い合わせはこちら</a></p>
</div>

<style>
.name{
font-weight:bold;/* 名前は太字にしています*/
}
.profile-box{
border-top: solid 5px #5d627b;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
text-align:center;
font-size:14px;　/* 自己紹介文の文字色（好きなように変更可） */
padding: 1em 1em;
margin:2em 0em;
color: #5d627b;　/* 自己紹介文の文字色（好きなように変更可） */
}
.profile-box p {
margin: 0;
padding: 0;
}
.profile-box a {
color:#00cccc; /* リンクの文の色（好きなように変更可） */
font-size:14px;
line-height:30px;
}
</style>

 

文章や文字の大きさ、色など自由に変えていただいてＯＫです。

参考までにカラーチャートも載せておきます。

▶カラーチャート/Web Safeカラー 216色 – TAG index

（PROユーザーさんであればご存知かとは思いますが）

リンクのURLは該当ページを開いた際に、上部に出てるリンクをコピペして貼ればＯＫです。

３、画像URLの取得の仕方

一応、プロフィール画像のURLの取得方法についても解説しておきます。

（一度覚えると簡単ですが、最初はややこしいかも）

利用するのは

• はてなフォトライフ

というサービスです。

検索すれば、すぐに出てくると思います。

▶はてなフォトライフ – 無料・大容量、写真を共有できるウェブアルバム

このサービスでは、好きな画像をアップロードすることができるので、ブログの記事内に載せていない画像のURLも取得することができます。

手順は

1. 一番上の「アップロード」をクリック
2. ファイルを選択
3. プロフィール画像にしたい写真やイラストを選択
4. 右の「オプション」の「画像サイズ」のピクセルを空白にする
5. 「アップロード」をクリック

でＯＫです。

①アップロードをクリックします。

②ファイルを選択します。

③右横にあるオプションの「ピクセル」部分の数字を消します。

④アップロードをクリックして完了です。

ＵＲＬをコピペして貼る

以上の作業が終わったら「マイフォト」という部分をクリックしてください。

先ほど選択した画像がアップロードされてるはずです。

右クリックすると

• 「画像アドレスをコピー」

と出てくるので、選択します。

これでURLが取得できましたので、先ほど紹介したコードの

<div class=”profile-box”>
<img src=”画像URL“　width=”150″ height=”120” >
<p class=”name”>名前を入力</p>

の赤文字部分に貼ってもらえばＯＫです。

４、プロフィール画像を丸くする方法

ちなみにプロフィール画像をＳＮＳ風に丸く切り抜きたい方もいらっしゃるでしょう。

その場合は、下のサービスを利用します。

30秒くらいで、自分の選んだ画像を丸く切り取ってくれる無料サービスです。

画像丸抜きくん | 写真や画像を丸く切り抜くシンプルなツール。SNSのプロフィール写真などにどうぞ。

これで丸く切り取った画像を、先ほど紹介した手順ではてなフォトライフにアップロードして使用すればＯＫです。

５、プロフィール欄のデザインを変えたい

ちなみに私が紹介したプロフィール欄のボックスデザインが気に入らない場合は、以下のサイトを参考にして自分でカスタマイズするのも〇だと思います。

私は、ここで紹介されているbox11を利用しました。

saruwakakun.com

ただ多少HTMLやCSSの知識があった方が、いいと思います。

こちらのサイトで無料で基本を学べるので、ゲーム感覚で少し学んでみるのがおすすめです。

HTML&CSSの入門コースを3時間もやれば、一通りのことは学べるはずです。

prog-8.com

まとめ

ということで今回は

• はてなブログの既存プロフィールを抹消
• 一からすべて作り直しちゃえ♡

という記事内容でした。

プロフィールを写真にするかイラストにするか問題

ちなみに当ブログのプロフィール画像も、イラストから顔の見えない写真に変更しました。

僭越ながら以前、ANASTOREさんの企画に参加させていただくことになったのですが、その時に使用した写真です。

（旅グッズをとても沢山紹介されている企画で、旅行好きの方には参考になると思います。宣伝ですが、気になる方はぜひ足をお運びください）

▶｢本当に使える！｣こだわり旅アイテム大調査【Vol.13：サブバッグ編】 ｜ANA STORE

自分の写真は絶対に使用しないと決めていましたが、既に身バレ経験済みですし、この写真に関してはもうネットの海に放り込んでしまいましたので、開き直って使用することにしました。

www.nekopajamas.net

色々なブログを見てきましたが、プロフィールに関しては

• 写真である必要性はない
• 情報サイトなら写真の方が信頼性は高くなる
• サブカル系ならイラストの方が良いかも

と雑感ではありますが、感じるものがあります。

プロフィール写真に関しては

• 絵画（イラスト）風にする加工アプリなど

を利用するとイラストと写真の狭間になりますので、利用しやすいと思います。

イラストに関しては私の場合「ココナラ」さんで注文しました。

www.nekopajamas.net

やはりお金を払って書いてもらうイラストは違うなと感動するものがありました。

宜しければ参考にしてください。

それでは、当記事が同じはてなブロガーさんの参考になれば幸いです。

また以前書いたものにはなりますが、はてなブログのカスタマイズについては以下の記事でもまとめていますので、参考にしてくださいね。

www.nekopajamas.net

それでは最後まで読んで下さり、ありがとうございました！

ブログに関する他の記事

www.nekopajamas.net

www.nekopajamas.net