[Blogger] ガジェット追加だけの簡単シンプルなプロフィール作成方法

JetThemeでプロフィールガジェットを使用すると、リンクなどがない文字の羅列になってしまいます。

これだと実用性に欠けるため、HTML / JavaScriptガジェットを使用したオリジナルプロフィールを作成して対応しました。

この方法はJetTheme以外のどんなテーマでも使用可能です。

本記事ではHTML / JavaScriptガジェットだけを使用した簡単でシンプルなオリジナルプロフィールの作成方法を解説します！

プロフィール作成方法

こんな感じのプロフィールの作成方法です。

基本コード

基本のコードは以下の通りです。

これをレイアウトのHTML / JavaScriptガジェットに入力して使用します。

プロフィールURLの取得方法

先ずはプロフィールページを開きます。

Bloggerからは、設定の一番下にある【プロフィールを表示】でプロフィールページが開けます。

表示されたページのURLがプロフィールURLになります。

画像URL取得方法

先程表示したプロフィールページの画像下にある【フルサイズで表示】をクリックします。

表示された画像の上で右クリックをして【画像リンクをコピー】します。

画像リンクを取得したら、画像サイズを変更します。

取得されたURLは以下のような文字列になっています。

このs1600はフルサイズを意味しています。

この数値をs120くらいに変更します。（お好みの数値に変更してください。）

更に数値の後に-ccと付け加えることで、円形にできます。正方形が良ければ付け加えなくてOKです。

またs1600以降の文字列は不要なので削除します。

これが画像URLになります。

名前・プロフィール本文の入力

基本コードに取得したプロフィールURLと画像URLを差し替えたら、名前とプロフィール本文を入力しましょう。

「プロフィールにアクセス」という文言も変更可能です。

文字サイズや間隔の調整

最後にプレビューで確認して、文字の大きさや間隔を調整してください。

font-size

font-sizeで文字の大きさを変更できます。

上記ではremで指定していますが、px・em・%のようなサイズ指定でもOKです。

margin

marginで画像・名前・プロフィール本文・プロフィールにアクセスの間隔を変更できます。

5pxの値を大きくすれば、それぞれの上下の間隔が大きくなります。

その他

font-weight: boldは太字を意味しています。

太字が不要な場合は削除してください。

text-align: centerで中央寄せにしています。

中央寄せcenterを、左寄せleftや右寄せrightに変更することも可能です。

別ブログ使用例

別ブログバラを咲かせてばらびっと！では、少し応用したもの使用しています。

プロフィールURLへのアクセスを画像のみに変更しています。

「プロフィールにアクセス」は丸ごと削除しています。

transition: all .2s ease-in-out" onmouseenter="this.style.opacity='0.7'" onmouseleave="this.style.opacity='1'はホバー（マウスカーソルを合わせる）動作のアニメーションです。

ホバーで画像を半透明に（明るく白っぽく）なるようにしています。

シンプルなプロフィールにしていますが、こだわれば色々付け加えられると思います。

シンプルなプロフィールを使ってみよう！

Bloggerのテーマによってプロフィールのデザインは色々です。

気に入る場合もあれば、変更したい場合もあるかと思います。

シンプルなプロフィールが良い場合は、本記事で解説したHTML / JavaScriptガジェットだけを使用した簡単でシンプルなオリジナルプロフィールを試してみてくださいね！