• TOP
• ブログ

＜ZELOカスタマイズ記⑪＞サイドバープロフィール欄のデザインを変更したはなし

2019-12-20T00:00:00+09:00 2019-12-29T05:43:45Z Blogger ZELO カスタマイズ ブログ

どんどん片付けていかないと間に合わないことに気づき焦っています。
Wordpress　→　Blogger　へのお引っ越し記録。

（新しいエリアと上位職が解放されたMMORPGにかまけているばやいではなかった。。。）

今日は、

• サイドバーのプロフィールをオリジナルデザインに変更しよう！

です。

作者さんの記事どおりに、レッツカスタマイズ☆

ビフォーアフター

（参考）ワードプレス時のサイドバープロフィール欄はこちら

ビフォー

アフター

ZELOのプロフィール欄をカスタマイズ

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

①プロフィール欄に使用するアイコンをアップロード

写真アップロード用の「ページ」を作成し、そこにプロフィール用の画像をアップロードします。

ページ

　→　［新しいページ］

　→　ページタイトルを「画像アップロード用」などと設定

　→　本文のところに画像をアップロードする（記事作成時と同じ要領）

　→　［保存］※「ページ」の保存は下書きの意味であって、自動では公開されないので安心してください☆

　→　画像の上で右クリックして、「画像アドレスをコピー」をクリック

②HTMLウィジェットを追加

レイアウト

　→　sidebar-section　で　「＋　ガジェットを追加」

　→　「HTML/JavaScript」を追加

• タイトル　：　任意のもの（わたしは空欄）
• コンテンツ　：　下記のコードをコピペ

<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>

※黄色い部分を任意のものに変更

とうきび。の設定

わたしは「リンク先」の部分にホームボタンと、ツイッターボタンを表示させてみました。
（参考）Font Awesomeで楽々アイコン表示　その使い方

• アイコンの周囲のボーダーカラーを白にして、
• プロフィール本文のフォントカラーを変更、
• リンク先は「FontAwesome」でアイコンボタンに変更した上
• それぞれのフォントカラーを設定し
• ボタンだけ中央寄せにした

結果、最終的なコードは以下のようになりました。

<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 #ffffff; border-radius: 50%;"/>
<br/>
なまえ
</div>
<div style="font-size: 14px; color: #757575;">
プロフィール本文
</p></div>
<br/>
<div align="center">
<a href="https://10kibi.com" rel="nofollow" target="_blank"><span class="fa-stack fa-lg"><span style="color:#757575;">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fas fa-home fa-stack-1x fa-inverse"></i>
</span></span></a>
<a href="https://twitter.com/10kibi_" rel="nofollow" target="_blank"><span class="fa-stack fa-lg"><span style="color:#55acee;">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span></span></a>
</div>
</div>

プロフィールページへのリンクボタンは、また後日考えようと思います！

今日はここまで～ﾉｼ