【blogger】プロフィール表示用「基本情報ガジェット」が使えなさすぎて泣けた

2017/11/10

【blogger】プロフィール表示用「基本情報ガジェット」が使えなさすぎて泣けた



自分のブログにプロフィールを表示させようとして大惨事になったので、解決方法をご紹介します。



「基本情報」ガジェット

bloggerには、プロフィール表示用の「基本情報」というガジェットがあります。


「基本情報」を開いたところ。


プロフィールは「ユーザー設定」画面で、Google+かblogger用のどちらかを選択できます。

このガジェットを使うと、プロフ写真、名前、紹介文のみ表示されます。

詳細は、Google+なら個人のトップページ、bloggerならブログ作成画面で記入したページにリンクが張られています。

詳細プロフィールページのカスタマイズ性の低さも大きな問題なのですが、一番は何と言っても画像です!



まさかのクオリティ

どうです、この一昔前、いや、二昔前の解像度!

酷すぎます。

当ブログは、北海道のきれいな風景や野鳥を皆さんに見ていただきたい、という思いで作られております。

それなのに、これは…絶対に許されないレベルです。


ちなみにこの解像度は、「基本情報ガジェット」に限ったことではありません。
「イメージガジェット」という、写真をブログのサイドバー等に貼り付けるためのものですら、同じような画質です。


bloggerを利用されている方々のプロフ写真が、おしなべて小さいのはこの解像度が原因なのです。

まぁ、小さくしたところで見るに堪えない画質に変わりはないのですが。





で、解決策。



こっちが正解!

「テキストガジェット」を使いましょう!


「え、でもテキスト用なんでしょ?画質のハナシはどこ行った?」
と思われそうですが、ご安心ください。


「レイアウト」でプロフィールを表示させたい場所の「ガジェットを追加」ボタンをクリックします。

「テキストガジェット」を選択します。

非常にシンプルな編集画面。なんせテキスト用ですから。

こちらが、テキストガジェットの「リッチテキスト編集画面」です。

ご覧のとおり、テキストの装飾(太字、斜体)、色、リンク、引用のボタンはありますが、画像の挿入ボタンはありません。


そこで通常の記事投稿用画面を開き、新規投稿を選択します。


記事を書く要領で画像を挿入し、HTMLを表示します

プロフィール画像を挿入して、HTML編集に切り替えます。
画像のサイズは、「元のサイズ」でOKです。

<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(幅)。



訳の分からない記号の羅列のほとんどが、「画像の名前」です。

オレンジとブルーの部分だけ見れば良いのです。

そうすると、スッキリしてきますね。


位置の調整は、オレンジの数字を変更してください。

サイズの調整は、ブルーの数字を変更すればOKです。

画像の「左寄せ、中央揃え、右寄せ」を変更したい場合は、

<div class="separator" style="text-align: center; clear: both;">

画像の手前にあるこの部分をいじります。


私の場合、デフォルトが「center(中央揃え)」ですが、「left(左寄せ)」に変更しています。

また、デスクトップではちょうど良いサイズなのに、スマホやタブレットだと画像が大きすぎる、という場合があります。

レスポンシブルデザインのテンプレートで、レイアウトが可変かつ、画像を枠いっぱいに表示する仕様だと、このような現象が起こります。


そんなときは、下のHTMLをコピーして、後半の<img ~ の後ろにペーストしましょう。


style="border: currentColor; width: 255px; height: 255px; overflow: hidden;" 


こんな感じで、調整完了♪

※数字はご自分のブログに合うよう、調整してくださいね!





いかがでしたか?


プロフィールに個性を出したい方にもオススメの方法です。

画像の調整方法は、トーマスイッチさんが詳しく解説しておられるので、そちらもぜひ参考になさってください。