Bloggerのプロフィール、変える

2021/10/07   2

Bloggerのカスタマイズ

 昨夜、気付いた。
 Bloggerの詳細プロフィールページ、スマホでの表示がヒドい。Macでレスポンシブデザイン表示を確認したら、スマホだとPC表示のテーブルの左右の幅を狭めただけなので、非常に見苦しい。

(私はガラケーとタブレットの2台持ちである)

ひどいスマホ表示

 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 タグ入れとく。

ページリストの設定

 ネットの様々な記事は、非常に参考になる。ネットで受けた恩は、誰かに返したいと思う。この記事を有用と思われたなら、幸いである。
 他者を傷つけるためでなく、人生を豊かにするためにネットはあるべきと思う。

10月15日追記:
 先に、文字をボールド(太字)にしたいため、bタグを入れた。しかし最初はボールドになったが後になると戻ってしまった。ダメらしい。
 で、CSSを追加する。
テーマ>カスタマイズ>詳細設定> 最初の「文字の色」をクリックして「CSSを追加」を選択。下記のコードを入れて、保存。Bloggerの「ページ」は、トップページのURLがPageList1になっていて、それ以降は2、3と番号が振られて行く。私は2つ作っているから、2と3になる。
 このCSS追加は、一度追加して保存すると、そのコードはHTMLに書き加えられて後でどこや!と探すのが面倒なので、コメントアウトも入れておく。
/* ページの文字太さ */
#PageList2 a,#PageList3 a  {font-weight: bold;}
/*ここまで */

さらに11月3日追記:
 ブログのレイアウトを変え、上記のプロフィールがサイドバーから移動した。
とりあえず設置当時の画像を貼っておく。

サイドバーにあった頃

まだ続く追記 11月12日:Googleアカウントでコメントした時
 同じブロガラー(Blogger利用者)の方の改造記事にコメントで質問させていただき、的確なアドバイスを頂戴する。感謝の雨だが、それはそれで置いといて。
 ブロガラーなんだから、コメントする際にGoogleアカウントを使い、名乗る。匿名ではコメントできない場合もあるし、そもそも教えを乞うのに匿名は無いだろう。
 メインの趣味の方で教える事がある私は、そう思う。(運営も教えるのも、無給だ)
 教わる、と言うのは、その人が今までに試行錯誤した経験を元にした知識を、いただく事なのだ。
(まぁ名乗ったとは言え、Googleアカウントとしてだから匿名には違いないけどね)

 そのコメントのハンドルネームをクリックすれば、Bloggerのプロフィール欄に飛ぶ。
 そこには、本人のプロフィールの他「マイブログ」として開設ブログが表示されるので、それをたどって、ブログにたどり着く。
 コメントを受けた方だって「どんな人?」って、見るだろう。
 だから上記のように「ページ機能」を使ってプロフィールを作っても、Bloggerのプロフィールは利用されているんだな。
 と、気づいた昨日の深夜。

 公開してたテストブログ。だって公開しとかないと、テスト結果が確認できないじゃん。
設定>権限 読者の範囲を、投稿者限定に直した(笑)

しつこすぎるけど追記 11月16日:
また気づいたよ。
設定>ユーザー プロフィール>ブログを表示  表示するブログを選択
で、プロフィールに表示するブログ、選べるんだね。テストブログを外した。
小説の匣

カテゴリ

ブログ アーカイブ

My Accounts

Twitter     pixiv

protected by DMCA

SSL標準装備の無料メールフォーム作成・管理ツール|フォームメーラー

QooQ