【Bloggerコピペ】HTMLウィジットでプロフィールを作ろう

Bloggerにはプロフィールウィジットがあり、これをレイアウトに追加するだけでプロフィールを表示できます。

ですがプロフィールウィジットを使う場合、複数のブログでプロフィールを使い分けることができません。

また、プロフィール内にTwitterやほしい物リストなどのリンクを自由に貼ることもできません。

そこでHTMLウィジットを使ったオリジナルのプロフィールをいくつか作ってみました。
おしゃれなプロフィールを用意したなび！
使用は自由ですが、Bloggerの場合はテーマによって元の設定が異なるため、そのまま貼り付けてもうまく表示されない場合があります。

あくまで参考にしてください。

Orange ZELO、Prime ZELOをご使用の場合はそのまま貼り付ければうまく表示されます。

Orange ZELOについて詳しくはこちらをご覧ください。

>>Blogger最強テーマ【Orange ZELO】の機能・特徴を紹介します

準備

まず準備として、プロフィール画像に使いたい画像をBloggerにアップロードします。

Bloggerの管理画面→「ページ」へ移動し、写真アップロード用のページを作ります。
ページは下書きのままでもOK！
ここにプロフィール写真にしたい画像を追加して、アップロードしましょう。


追加、アップロードした写真を選択して、画像アドレスをコピーしましょう。

コピーした画像アドレスはあとで必要になるので、メモしておきます。

プロフィールパターン1

パターン1では、次のようなプロフィールを作成していきます。


まずHTMLウィジットを追加した後、ウィジットタイトルに「自己紹介」と入力します。


そして、次のhtmlをコピーして貼り付けましょう。

<div style="padding: 15px">
<div style="clear: both; text-align: center; margin: 0 0 15px; font-weight: bold;">
<img src="画像のURL" width="80px" height="80px" style="border: 3px solid #c0c0c0; border-radius: 50%;"/>
<br/>
なまえ
</div>
<div style="font-size: 14px; color: #888;">
プロフィール本文
</div>
<br/>
<a href="リンク先URL" rel="nofollow" target="_blank">リンクテキスト</a>
</div>

緑の部分に、それぞれ表示したいものを記入します。

「画像のURL」には、冒頭の準備でアップロードした画像のURLを貼り付けてください。

「なまえ」はプロフィールに記入する名前です。すこし太字で表示されます。

リンクを作成する場合はリンク先URL、リンクテキストをそれぞれ入力してください。

この<a>タグで囲まれた部分をいくつかつくることによって、複数のリンクを作ることも可能です。

リンクの数を増やす時には前の</a>のあとに<br/>というタグを加えて改行しましょう。

パターン1は、こちらのブログでも使用しています。

>> Movelog

プロフィールパターン2

パターン2では、次のようなプロフィールを作成します。


パターン1と同じようにHTMLウィジットを作成し、ウィジットタイトルを入力します。

そして次のHTMLをコピーして貼り付けましょう。

<div style="padding: 15px">
<div style="display: flex;">
<div style="display: block; clear: both; text-align: center; margin-right: 5%; font-weight: bold; width: 30%;">
<img src="画像のURL" width="80px" height="80px" style="border: 2px solid #c0c0c0;"/>
</div>
<div style="font-size: 14px; color: #888; display: inline-block; width: 65%;">
<p style="font-weight: bold; color: #333">なまえ</p>
プロフィール本文
</div>
</div>
<br/>
<a href="リンク先URL" rel="nofollow" target="_blank">リンクテキスト</a>
</div>
あとはパターン1と同じように、緑の部分をそれぞれ記入してください。

まとめ

Bloggerのプロフィールウィジットがあまり気に入らなかったので、オリジナルで作ってみました。

コピペだけでかんたんにプロフィールが作れるので、ぜひご活用ください。
Twitterのリンクも貼れるなび！
記事中の画像につける枠・ボーダーのデザインもあるので、こちらもご覧ください。

>>画像につける枠・ボーダーのCSSデザインまとめ【コピペOK】

コメント