ブログは、自分の考えやアイデアを世界と共有するための強力な手段です。
ソーシャルメディアの台頭により、ブロガーは目立つための新たな方法を見つけ、読者の印象に残るようにする必要があります。
その方法のひとつが、ブログのプロフィール欄のデザインです。
この記事では、あなたのブランドを反映した、プロフェッショナルなBlogger用プロフィールボックスを作成する方法を探ります。
{tocify} $title={目次}
プロフィールボックスを貼り付ける方法
それでは、ブログ用のプロフィールボックスをデザインする方法を詳しく見ていきましょう。
Bloggerサイドバーの「テーマ」から「HTMLを編集」をクリックします。
]]></b:skin>
「]]></b:skin>」の前に以下のコードを貼り付けて下さい。
※Ctrl+Fで探したいコードをコピーして貼り付ければ（Ctrl+V）、簡単に探し出すことが出来ますよ。Macの場合は、Ctrlが「Command」となります。
.profile { text-align: center;} .profile-picture { border-radius: 50%; width: 100px; height: 100px; margin: 0 auto 20px;}
.profile-name { font-size: 24px; font-weight: bold; margin: 0 0 10px;}
.profile-description { font-size: 16px; line-height: 1.5; margin: 0 0 20px;}
.profile-links { margin: 0; padding: 0; display: flex; justify-content: center;}
.profile-links a { color: #fff; font-size: 16px; font-weight: bold; background: #333; padding: 10px 70px; border-radius: 6px; transition: .3s;}
.profile-links a:hover { background: #1087FF;}もし、「]]></b:skin>」の中にCSSコードを挿入してもうまくいかない場合は、代わりに<style>の直後にコードを挿入してみて下さい。
※当Bloggerブログでは、<style>タグの後にCSSコードを挿入しています。
アフィリエイトBOXのHTMLコード
Bloggerのダッシュボードにある「レイアウト」セクションに移動します。
サイドバーの「ガジェットを追加」をクリックします。
利用可能なガジェットの一覧から「HTML/JavaScript」を選択します。
追加したいコードをテキストボックスに貼り付けます。
<div class="profile"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwcSsDY1jrxGcML1hVQeJy3OOkY8cRXkwjj927yIczlA5enLpI_o1zs_JFb_zLL61L43emoSdwouRMi_2xUEzmstYmGcmM5_QM1Qy8B0vcVh-1u8_j-0RP1eFs46Q_owHUhC43CrKS6Uie_4YMUC65-GxYQlIu3RiQE0W14ya_Bw8YFzLoVaANK876ww/s320/kumiko.png" alt="Profile Picture" class="profile-picture" /> <h2 class="profile-name">Rara</h2> <p class="profile-description">10年以上のブログ運営と家庭教師の経験を持ち、1年間のウェブデザインの経験もあります。現在は「ウラ歴史」のブログを運営しており、テンプレート編集や記事作成などを行っています。有益かつ視覚的に魅力的な高品質のコンテンツの提供に力を入れています。</p> </div> <div class="profile-links"><a href="/p/about.html">もっと深く知りたい！</a></div>
「保存」をクリックすると、サイトに変更が反映されます。
プロフィール画像を追加する場合は、「img src」属性内のURLを任意の画像のURLで置き換えてください。
プロフィールにお名前や自己紹介を追加する場合は、「profile-name」や「profile-description」タグ内のテキストを更新して、ご自身の情報を反映させてください。
自分のプロフィールページへのリンクを貼りたい場合は、「profile-links 」タグの 「href 」属性に、自分のページのURLを入力してください。
また、「a」タグの間のテキストを更新することで、リンクのテキストをカスタマイズすることができます。
以上の作業で、カスタマイズしたプロフィール欄が完成しました！
これで、あなたのサイトでも使えるようになります。
ここでご覧いただいているHTML/CSSコードは、OpenAIが開発した、さまざまなコンテンツを作成できる強力な言語モデル「ChatGPT」で生成されたものです。
ChatGPTが得意とする分野のひとつが、クリエイティブなデザインです。
アイデアを具体的なデザインにするのが難しい場合もありますが、ChatGPTは適切な指導を受けることで、ユニークで視覚的に美しいデザインを短時間で作成することができます。
ウェブサイトやマーケティングキャンペーンのためのクリエイティブなデザインを思いつくのに苦労しているなら、迷わずChatGPTを試してみてください。
ChatGPTがあなただけのために作成する素晴らしいデザインに驚かれるかもしれません。
Bloggerブログの始め方と使い方【初心者完全ガイドブック】
Bloggerブログの始め方と使い方について、初心者でも分かりやすい完全ガイドブック！Bloggerブログの始め方と使い方を詳しく解説しています。Bloggerを使って、あなただけの成功するブログを作ろう！
成功するBloggerブログを始めたいなら、この完全ガイドを見逃す手はありません。
SEOを考慮したブログの設計から、データ分析を利用した魅力的なコンテンツの作成まで、成功に必要なすべてをご紹介しています。
今すぐ記事をチェック！
ブログ運営におすすめの便利グッズ
Bloggerのブログ運営において、長時間のパソコン作業が欠かせないことは言うまでもありません。
しかし、その作業が快適に進むためには、便利なツールが必要不可欠です。
そこで、私自身がブログ運営をしている中で便利だと思った商品を紹介します。
まずは、小さめのワイヤレスマウス。
コンパクトなサイズゆえに、どこでも持ち運びができるため、どこでも作業ができます。
また、クリック音が静かなものが多いので、周りの家族や同居人に迷惑をかけることもありません。
作業に集中したいブロガーには必須アイテムと言えるでしょう。
このデュアルモードマウスは、2.4GワイヤレスとBluetoothの両方の接続が可能で、七色バックライトも搭載。クリック音が静音で充電式バッテリーを内蔵しており、超薄型で人間工学に基づいたデザインが特徴的である。また、USBレシーバーはマウスの底に収納されている。
Amazonで今すぐ購入次に、ワイヤレスイヤホン。
ブログ運営中は音楽を聴きながら記事を書いたり、YouTube動画を視聴することが多いかもしれません。
しかし、イヤホンのワイヤが邪魔だったり、絡まったりすることがストレスになることもあります。
そこで、ワイヤレスイヤホンの使用がおすすめです。
また、ワイヤがないため、家事をしながらでも音楽を楽しむことができます。
Bluetooth5.3 EDRワイヤレスイヤホンは、消費電力が少なく、伝送容量、接続の安定性が向上している。ノイズキャンセリング機能も搭載され、ZOOMやビジネス会議で活躍できる。音質も良く、AAC/SBCに対応し、大容量バッテリーで最大60時間の音楽再生が可能。
Amazonで今すぐ購入最後に、バックパックリュックサック。
ブロガーは外出先でも記事を書いたり、撮影したりすることがあるため、荷物をまとめる必要があります。
バックパックリュックサックは、荷物をしっかりとまとめることができるだけでなく、背負っているだけで体への負担も軽減されます。
また、カジュアルなデザインなので、スタイリッシュに外出することができます。
このバッグは、機内持ち込み可能。防水性能があり、乾湿分離ポケットもある。外部USBポートと盗難防止の隠しポケットがあり、人間工学に基づいた肩ヒモとチェストベルトが装備されている。3WAY仕様で、通勤、出張、通学、旅行など様々なシーンに使える。
Amazonで今すぐ購入以上が私自身がブログ運営で役立ったと感じた商品の紹介です。
商品のデザインの好みもあると思うので、関連する商品を見て吟味するのもおすすめです。
これらのツールを使うことで、より快適に記事を作成することができるでしょう。