はてなブログのプロフィール欄等をカスタマイズする方法

本ページには、プロモーションが含まれています。

f:id:TomoG:20190106214119j:plain

今回は、はてなブログのプロフィール欄等のサイドバーにある項目を自由にカスタマイズする方法をご紹介していきます。

はてなブログのプロフィール欄で、画像のサイズが気に入らなかったり、他に色々設定したい等、使えるところはたくさんあると思います。

 

もしはてなブログを始めたばかりの人や初心者の方は、まずこちらの記事からお読みください。

方法まとめ

今回の記事でご説明していることを簡単にまとめると

1.書きたい内容を記事に書いて

2.そのHTMLをコピーして

3.サイドバーのHTMLで使う

たったこれだけです。

 

以降の記事は、それらを詳しく説明した内容ですので、分からない場所があれば上部にある目次からご参照ください。

カスタマイズ方法

HTMLを作成

まずはサイドバーに使用するため書きたい内容のHTMLを用意する必要があります。

そのため、はてなブログで新しい記事を作って下書きで保存してください。

f:id:TomoG:20190106140629p:plain

このように普段書くようにサイドバーに追加したい内容を書いてください。

上図はプロフィール欄の一例です。画像や文字にリンクを埋め込むことも忘れないでください。

HTML化

f:id:TomoG:20190106141137p:plain

書きたい内容を書き終わったら、HTML編集に移行してください。

そうすると、今書いた内容のHTMLが全てあると思います。

これをコピーしてください。

HTMLを貼りつける

f:id:TomoG:20190106141526p:plain

次に上図のように、はてなブログの【デザイン】のサイドバーからモジュール追加を選んでください。

 

そのモジュールの中からHTMLを選んでください。

f:id:TomoG:20190106141754p:plain

上図のような画面になるので、タイトルには追加したいサイドバーの名前を入力してください。

そして、下の<p>...</p>のところに、先ほどHTML化したものを貼り付けてください。

それを追加すると、サイドバーに追加は完了です。

後は調整ですが、このHTMLを直接変更するか、先ほどのHTML化する記事を変更して、またコピーして貼り付けるかしてください。

その他

 プロフィール項目以外での使用方法

f:id:TomoG:20190106142444p:plain

実際にメインブログで使用している方法です。

はてなブログで関連リンクに画像等を使いたい場合は、この方法を使うことで画像リンクにすることができます。

 

その他にもフォローボタンにも使用できます。

f:id:TomoG:20190106143128p:plain

www.yukihy.com

プロフィール欄の画像に枠

これはどうするのかと私も調べましたが、とても簡単な方法でした。

自分で枠を書くというものでした。

面倒かもしれませんが、プロフィール画像に使いたい画像に、外部ツールを使って自分で枠を追加してください。


今回はプロフィール欄等のカスタマイズ方法についての記事は以上となります。

 

サイドバーはほぼ全ページに表示される項目なので、是非ともカスタマイズして下さい。

それでは今回の記事は終わりとなります。お疲れ様でした。