昨夜、気付いた。
Bloggerの詳細プロフィールページ、スマホでの表示がヒドい。Macでレスポンシブデザイン表示を確認したら、スマホだとPC表示のテーブルの左右の幅を狭めただけなので、非常に見苦しい。
Bloggerのオリジナルのテンプレートも確認してみたが、同じ状態。QooQでもこのページはいじってないという事かな。
そもそもMacで詳細プロフィールページを見ていても、テーブル内のパディングが無くて、文字がギチギチ、見栄えが悪いのは気になっていた。
行間がやたらに狭いとか、意味も無く広いとか、そういう可読性が悪いのは、嫌いだ。
美しく無い! で、スマホ用も含めて修正を試みる。
XML、嫌いだ。つーか、わからん。HTMLとcssなら良かったのに。Bloggerオリジナルのプロフィールの体裁を整えるのは、あきらめた。
この辺のページを参考に見るが、やはりみなさん、オリジナルを修正はしてない。新たに作ってる。
【blogger】プロフィール表示用「基本情報ガジェット」が使えなさすぎ!
Bloggerのサイドバーに表示するプロフィールカードをつくってみた
なお、以下はQooQのテンプレートを使用した場合だが、他のテンプレでも変わらんと思う。
もちろん、コードを見比べたり、直したりするのはコピペしたテキストエディターで。
1.新たに「ページ」を作る。
そこに、画像をupして、サイズはHTMLビューで表示サイズ調整。後は、自分の書きたいようにすればいい。オリジナルと同程度の物にした。
2.プレビューしてみると画像と文字がくっついてる。ので、画像の周囲に白のボーダーを入れる。下記の style= のとこね。
<img alt="代理" border="0" data-original-height="280" data-original-width="280" height="140" src="ここに画像のURLが入ってる" width="140" style="border:16px solid white;" />
3.ページタイトルは、とりあえず英文にしておいた方がいい。ページのURLはタイトルで決まってしまうので、日本語だとエンコードされて、後でわかりずらい。profileとかにしとく。
4.で、ページが完成したら公開する。これだけでは、まだ表示されない。
5.そして、レイアウト>好みの場所に「ページ」ガジェットを追加。
[ページリスト]の設定 で、タイトルは好きに付け、新しいアイテムを追加 をクリック or タップ。ページのURL を選択すると、自分が公開しているURLが出るから、先程のプロフィールページを選択する。ページリストのホームは、不要なら削除。そして保存。
最後に、レイアウト画面の右下の保存マークも忘れずに押して。すでに正規のプロフィールがあるのなら、そっちは削除しておく。
6.設定全部終わってから、最初にページで作ったプロフィール記事のタイトルだけ変えて更新すれば、いい。
最終的に、私のはこんなの。文字を太字にしたいので b タグ入れとく。
ネットの様々な記事は、非常に参考になる。ネットで受けた恩は、誰かに返したいと思う。この記事を有用と思われたなら、幸いである。
他者を傷つけるためでなく、人生を豊かにするためにネットはあるべきと思う。
/* ページの文字太さ */
#PageList2 a,#PageList3 a {font-weight: bold;}
/*ここまで */
さらに11月3日追記:
ブログのレイアウトを変え、上記のプロフィールがサイドバーから移動した。
とりあえず設置当時の画像を貼っておく。
まだ続く追記 11月12日:Googleアカウントでコメントした時
同じブロガラー(Blogger利用者)の方の改造記事にコメントで質問させていただき、的確なアドバイスを頂戴する。感謝の雨だが、それはそれで置いといて。
ブロガラーなんだから、コメントする際にGoogleアカウントを使い、名乗る。匿名ではコメントできない場合もあるし、そもそも教えを乞うのに匿名は無いだろう。
メインの趣味の方で教える事がある私は、そう思う。(運営も教えるのも、無給だ)
教わる、と言うのは、その人が今までに試行錯誤した経験を元にした知識を、いただく事なのだ。
(まぁ名乗ったとは言え、Googleアカウントとしてだから匿名には違いないけどね)
そのコメントのハンドルネームをクリックすれば、Bloggerのプロフィール欄に飛ぶ。
そこには、本人のプロフィールの他「マイブログ」として開設ブログが表示されるので、それをたどって、ブログにたどり着く。
コメントを受けた方だって「どんな人?」って、見るだろう。
だから上記のように「ページ機能」を使ってプロフィールを作っても、Bloggerのプロフィールは利用されているんだな。
と、気づいた昨日の深夜。
公開してたテストブログ。だって公開しとかないと、テスト結果が確認できないじゃん。
設定>権限 読者の範囲を、投稿者限定に直した(笑)
2 件のコメント:
こんばんは。先程は拙ブログへのコメントありがとうございました。
コメント投稿ページやプロフィールページ等、https://www.blogger.com~で始まるURLのページはユーザー側でHTMLやCSSを弄ることはできません。
私もガラケーでスマホは持っていないため実際の使用感はわからないのですが、見づらいんだろうなという想像は出来ます。
Bloggerさんは中々重い腰を上げてくれませんけど、改善要望のフィードバックを送ってみるのもいいかもしれません。
ふじやん様
すみません。自分のブログにコメントをいただくのが初めてなので、気づきませんでした。
さらに、表示するのにどうしたらいいのかも、わからなくて。
お手数をお掛けいたしました。大変ありがとうございます。
ふじやん様のブログは、カスタマイズが色々とあり、非常にためになりますので、のちほどリンクさせていただきます。あ、私のは、ほっといてください。オタクな内容ですので。
コメントを投稿