さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【はてなブログ】プロフィールをカスタマイズ、簡単に大きくできます

f:id:sanrisesansan:20200811225152p:plain

はてなブログのサイドバーにあるプロフィール欄の画像を大きくしてカスタマイズしたいけど、HTMLコードとかよく分からないし簡単な方法ないかな?

 こんな疑問に答えます。

今回は、はてなブログでサイドバーにある「プロフィール」を大きくカスタマイズするやり方を紹介します。

まずは完成パターンです。

f:id:sanrisesansan:20200811213250j:plain

このようなプロフィールにすることができます。

HTMLなどがわからなくても「4ステップ」で簡単にできるますので、参考にしてみてください。

 


スポンサードリンク
 

プロフィール画像を大きく表示させたい!

はてなブログのプロフィール画面、なかなか、小さくないですか?

f:id:sanrisesansan:20200811213254j:plain

あまり目立ちませんし、しかもなにより、ワードプレスなどの記事と見比べると、

一発ではてなブログと分かってしまいます。

別にはてなブログで書いているので良いのですが、気になる人もいると思いますが。

 

また、大きくすることで、見た目をワードプレスのような感じのおしゃれなプロフィールにしたい願望もカスタマイズをしていくと出てくるかもしれません。

これ、僕がそうでした。

ということで早速調べて、良い方法を見つけて試したので、紹介していきます。

参考にさせていただいたサイト

今回、参考にさせていただいたサイトは下記になります。

panmeeee.hatenablog.com

 

この方法は記事編集画面の「新規作成」で下書きを作成して「HTML編集」でコピペしてサイドバーに貼り付けるだけです。やり方を覚えれば非常に簡単です。

【簡単4ステップ】「プロフィール」部分をを大きくカスタマイズ

やり方はこの手順です。

1.新規記事作成でフロフを書く

2.元のプロフをサイドバーから削除

3.サイドバー「html」から新規を作成

4.書いたプロフ記事の「html」をはりつける

詳しく見ていきます。

1.新規記事作成でプロフィールを書く

新規記事作成で、プロフィールを作成していきます。下に書くことをまとめてみました。あくまで見本なので、自由に書きたい内容にしてみてください。

プロフィール画像

・自身のはてなID

・説明文

・リンクページ(あれば)

・読者登録ボタンのコード

Twitterボタンのコード

で、完成したのはこんな感じです。

f:id:sanrisesansan:20200811213650j:plain


普通に記事を書く感じで作成ページに書いていけばOKです。

それでは項目別に詳しくみていきます。

 

プロフィール画像を作成

画像は画像加工サイトやパワーポイントなどで加工して別で作ります。

大きさは「300×300」で作りました。この大きさでスマホで確認してもはみ出たりすることはありません。

小さい画像がお好みなら「250×250」でも大丈夫だと思います。

自分に合ったサイズで調整してみてください。
下記記事で「Canva 画像編集ソフト(無料)」の使い方を解説してます。参考にまでに。

www.sunrise033.com

 

★自身のはてなIDを確認する方法

自身の記事のプロフィールに記述されてます。

f:id:sanrisesansan:20200811214437j:plain

この部分をコピペして記事作成画面に貼り付けます。

 

Twitterボタンのコードを確認してボタンを作成する

こちらはTwitter側でボタンを作成する必要があります。

【作成手順】

まずは、下記のURLにアクセス→TwitterアカウントURLを入力します。

Twitter Publish

f:id:sanrisesansan:20200811213223j:plain

TwitterアカウントURLは「https://twitter.com/」の後ろに@を抜かした自分のユーザーネームを入力します。僕の場合、@の後ろsunrise_033がそうです。

アクセスしたら下の画面になるので、

f:id:sanrisesansan:20200811213234j:plain

Twitter Buttons」を選択します。下の画面になったら、

f:id:sanrisesansan:20200811213241j:plain

「Follow Button」をクリックして→出てくるコードをコピペします。

f:id:sanrisesansan:20200811213237j:plain

このコードを記事に貼り付けます。

★読者登録ボタンのコードを確認して作成

管理画面→設定→詳細設定にある「読者になるボタン」のHTMLをコピペして記事に貼り付けます。

f:id:sanrisesansan:20200811215647j:plain

 

また、説明文は自由に書いていきます。リンクページはあれば、それも貼り付けます。

当サイトでは「プロフィール」と「おすすめ記事10選」を貼り付けています。完成したら「下書き」保存します。

2.元のプロフィールをサイドバーから削除

次にサイドバーに既にあるプロフィール画像を削除します。

管理画面から「デザイン」→「カスタマイズ」→サイドバーでプロフィールから削除します。

f:id:sanrisesansan:20200811213231j:plain

これで、サイドバーから一旦、削除されました。もう一度、戻したい場合は、

「モジュール追加」からプロフィールを選んで「適用」すれば戻ります。

3.サイドバー「html」に作成したプロフィールのHTMLを貼り付ける

次に、サイドバーから「モジュール追加」→「HTML」を選び、

f:id:sanrisesansan:20200811213228j:plain
f:id:sanrisesansan:20200811213225j:plain

枠内に先ほど作成したプロフィールのHTMLを貼り付けます。

作成記事の「HTML」は「HTML編集」で確認・コピペできます。

これで完成です。

 

このようになりました。画像背景をかえれば、

f:id:sanrisesansan:20200811213301j:plain
f:id:sanrisesansan:20200811213258j:plain


左がデフォルトで右が背景色を画像と合わせたバージョンです。

f:id:sanrisesansan:20200811213254j:plain
f:id:sanrisesansan:20200811213258j:plain

デフォルトのプロフィールと比べても画像が大きくなってなっていますよね。

ついでにリンクページやTwitterボタンも付けものグットです。

まとめ

以上がはてなブログでサイドバーのプロフィールを大きくしたい時に、簡単にできる方法になります。

デザインCSSなど使わないのでコードなどが分からなくてもだれでも簡単に作ることができるのが魅力です。

プロフィール画面は読者にどんな人が書いてるのかを知らせて、SNSなどの告知もできる大切な要素です。ぜひ、活用してみてください。

最後まで読んでいただき、ありがとうございます。

この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

 ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村