【blogger】プロフィール表示用「基本情報ガジェット」が使えなさすぎ！
自分のブログにプロフィールを表示させようとして大惨事になったので、解決方法をご紹介します。
＜2018.9月 追記＞
現在使っているプロフィールは、「HTML/Javascriptガジェット」で作成したものです。
レイアウトに「HTML/Javascriptガジェット」を追加し、以下のHTMLをコピペ。赤字部分は修正してください。
HTML
<div class="box">
<div class="profilebox">
<div class="profileimg">
<img src="プロフィール画像URL" width="120" height="120" alt="画像タイトル" />
</div>
<div class="profileintro">
<span style="font-size:180%;line-height:200%;"><b>自分の名前</b></span><br/>
<a href="ツイッターのアドレス" target="_blank"><span style="color: #55acee;"><ツイッターのアイコンフォント> <u>Twitter</u></span></a><br />
<a href="インスタのアドレス" target="_blank"><span style="color: #262626;"><インスタアイコンフォント> <u>Instagram</u></span></a><br />
<a href="Youtubeのアドレス" target="_blank"><span style="color: #c12025;"><Youtubeのアイコンフォント><u>YouTube</u></span></a><br />
</div>
<div class="clear"></div>
<div class="profiletx">
自己紹介文
<!-- /profiletx -->
</div>
<!-- /profilebox -->
</div>
<!-- box -->
</div></div>
<div class="profilebox">
<div class="profileimg">
<img src="プロフィール画像URL" width="120" height="120" alt="画像タイトル" />
</div>
<div class="profileintro">
<span style="font-size:180%;line-height:200%;"><b>自分の名前</b></span><br/>
<a href="ツイッターのアドレス" target="_blank"><span style="color: #55acee;"><ツイッターのアイコンフォント> <u>Twitter</u></span></a><br />
<a href="インスタのアドレス" target="_blank"><span style="color: #262626;"><インスタアイコンフォント> <u>Instagram</u></span></a><br />
<a href="Youtubeのアドレス" target="_blank"><span style="color: #c12025;"><Youtubeのアイコンフォント><u>YouTube</u></span></a><br />
</div>
<div class="clear"></div>
<div class="profiletx">
自己紹介文
<!-- /profiletx -->
</div>
<!-- /profilebox -->
</div>
<!-- box -->
</div></div>
「テーマ」→「カスタマイズ」→「上級者向け」を開き、以下のCSSをコピペ。
CSS
/* profile */
.box{
margin-bottom:20px;
border:1px solid #ddd;
width: 100%;
}
.profilebox{
width: 100%;
padding:15px 5px 5px 5px;
overflow:hidden;
background-color:#fff;
}
.profileimg{
width:40%;
margin-top:5px;
margin-left:10px;
float:left;
}
.profileintro{
width:40%px;
font-size:10px!important;
color:#333;
float:right;
line-height:150%;
margin-right:10px;
}
.clear{
clear:both;
}
.profiletx{
margin-top:20px;
padding:10px 5px 10px 10px;
font-size:14px;
color:#333;
line-height:160%;
width:100%;
padding-top:5px;
}
/* profile ここまで */
/* レスポンシブカスタマイズ */
/* タブレット横画面用*/
@media screen and (max-width:1024px) {
.box{
width:280px;
height:auto;
}
}
/* スマホ用*/
@media screen and (max-width:480px) {
.box{
width:100%;
height:auto;
}
.profilebox{
width:100%;
height:auto;
}
.profileimg{
margin-left:15px;
}
.profileintro{
margin-right:10px;
}
.profiletx{
width:100%;
height:auto;
padding:10px;
}
}
/* レスポンシブカスタマイズここまで */
.box{
margin-bottom:20px;
border:1px solid #ddd;
width: 100%;
}
.profilebox{
width: 100%;
padding:15px 5px 5px 5px;
overflow:hidden;
background-color:#fff;
}
.profileimg{
width:40%;
margin-top:5px;
margin-left:10px;
float:left;
}
.profileintro{
width:40%px;
font-size:10px!important;
color:#333;
float:right;
line-height:150%;
margin-right:10px;
}
.clear{
clear:both;
}
.profiletx{
margin-top:20px;
padding:10px 5px 10px 10px;
font-size:14px;
color:#333;
line-height:160%;
width:100%;
padding-top:5px;
}
/* profile ここまで */
/* レスポンシブカスタマイズ */
/* タブレット横画面用*/
@media screen and (max-width:1024px) {
.box{
width:280px;
height:auto;
}
}
/* スマホ用*/
@media screen and (max-width:480px) {
.box{
width:100%;
height:auto;
}
.profilebox{
width:100%;
height:auto;
}
.profileimg{
margin-left:15px;
}
.profileintro{
margin-right:10px;
}
.profiletx{
width:100%;
height:auto;
padding:10px;
}
}
/* レスポンシブカスタマイズここまで */
出来上がりイメージは当blogの「プロフィール」でご確認を。
数値、画像データ、アイコンフォントはお使いのテンプレートに合わせてカスタマイズしてください。
※私のテンプレートはなぜかFontAwesomeが使えないので、Twitterアイコン等はSVGファイルで代用しています。
＜追記ここまで＞
 |
| 「基本情報」ガジェット |
bloggerには、プロフィール表示用の「基本情報」というガジェットがあります。
 |
| 「基本情報」を開いたところ。 |
プロフィールは「ユーザー設定」画面で、Google+かblogger用のどちらかを選択できます。
このガジェットを使うと、プロフ写真、名前、紹介文のみ表示されます。
詳細は、Google+なら個人のトップページ、bloggerならブログ作成画面で記入したページにリンクが張られています。
詳細プロフィールページのカスタマイズ性の低さも大きな問題なのですが、一番は何と言っても画像です！
 |
| まさかのクオリティ |
どうです、この一昔前、いや、二昔前の解像度！
酷すぎます。
当ブログは、北海道のきれいな風景や野鳥を皆さんに見ていただきたい、という思いで作られております。
それなのに、これは…絶対に許されないレベルです。
ちなみにこの解像度は、「基本情報ガジェット」に限ったことではありません。
「イメージガジェット」という、写真をブログのサイドバー等に貼り付けるためのものですら、同じような画質です。
で、解決策。
 |
| こっちが正解！ |
「テキストガジェット」を使いましょう！
「え、でもテキスト用なんでしょ？画質のハナシはどこ行った？」
と思われそうですが、ご安心ください。
「レイアウト」でプロフィールを表示させたい場所の「ガジェットを追加」ボタンをクリックします。
「テキストガジェット」を選択します。
 |
| 非常にシンプルな編集画面。なんせテキスト用ですから。 |
こちらが、テキストガジェットの「リッチテキスト編集画面」です。
ご覧のとおり、テキストの装飾（太字、斜体）、色、リンク、引用のボタンはありますが、画像の挿入ボタンはありません。
そこで通常の記事投稿用画面を開き、新規投稿を選択します。
 |
| 記事を書く要領で画像を挿入し、HTMLを表示します |
プロフィール画像を挿入して、HTML編集に切り替えます。
画像のサイズは、「元のサイズ」でＯＫです。
<div class= ～ </div> を、まるっとコピーします。
 |
| テキストガジェットにコピペ！ |
テキストガジェットを「HTML編集画面」にして、ペーストします。
「リッチテキスト形式」に戻すと、画像が挿入されているはずです。
画像の下に紹介文を記入して完成です。
私は「about us」という詳細ページを作成し、そちらへのリンクも貼ってあります。
 |
| 画質が全然違いますね！ |
画像のサイズ、位置調整
出来上がったプロフィールを、プレビューで確認してみます。
思った通りのサイズ、位置ならば、作業はここで終了です。
もしも、
「なんか左に寄りすぎてる」
とか、
「ipadで見た時に画像が大きすぎて違和感が…」
など、気になる点があるようでしたら、HTMLに修正を加えます。
「HTMLはわけの分からない記号の羅列にしか見えない！」と拒絶反応を示したそこのあなた。
私もそうでした。
でも、ご安心を。
HTMLは必要な情報のみで構成されています。それ以上でも以下でもありません。
画像データのHTMLは大きく二つの< >に分かれております。
 |
| オレンジとブルーに注目。クリックすると拡大します。 |
前半の<a href= ～> は画像のリンク元です。左右の余白情報も入っています。
後半の<img border= ～> は画像のサイズ情報です。
黄色＝画像の名前（保存場所）
オレンジ＝左右の余白。
margin-left（左）margin-right（右）。
ブルー＝画像のサイズ。
data-original-height（高さ）
data-original-width（幅）。
訳の分からない記号の羅列のほとんどが、「画像の名前」です。
オレンジとブルーの部分だけ見れば良いのです。
そうすると、スッキリしてきますね。
位置の調整は、オレンジの数字を変更してください。
サイズの調整は、ブルーの数字を変更すればＯＫです。
画像の「左寄せ、中央揃え、右寄せ」を変更したい場合は、
<div class="separator" style="text-align: center; clear: both;">
画像の手前にあるこの部分をいじります。
私の場合、デフォルトが「center（中央揃え）」ですが、「left（左寄せ）」に変更しています。
また、デスクトップではちょうど良いサイズなのに、スマホやタブレットだと画像が大きすぎる、という場合があります。
レスポンシブルデザインのテンプレートで、レイアウトが可変かつ、画像を枠いっぱいに表示する仕様だと、このような現象が起こります。
そんなときは、下のHTMLをコピーして、後半の<img ～ の後ろにペーストしましょう。
style="border: currentColor; width: 255px; height: 255px; overflow: hidden;"
 |
| こんな感じで、調整完了♪ |
※数字はご自分のブログに合うよう、調整してくださいね！
いかがでしたか？
プロフィールに個性を出したい方にもオススメの方法です。
画像の調整方法は、トーマスイッチさんが詳しく解説しておられるので、そちらもぜひ参考になさってください。
ポチっとよろしく♪
0 コメント :