Bloggerは、ブログ記事を作成し、オンラインで公開できる人気のブログプラットフォームです。
ブログ記事のビジュアルアピールを強化する多くの方法の1つは、テーブルを追加することです。
表は、比較表や情報のリストなど、データを整理して読みやすく表示するために使用することができます。
BloggerサイトにCSSコードを貼り付ける方法がわからない場合は、
BloggerブログのCSSデザインのカスタマイズ方法を徹底解説！
Bloggerは、ブログの見た目やレイアウトを柔軟にカスタマイズできる優れたプラットフォームですが、CSSを使用することでより高度なカスタマイズを実現できます。この記事では、Bloggerブログの外観をカスタマイズする方法を解説しています。
こちらの記事を参考にしながら進めてください。
この解説では、HTMLでシンプルかつスタイリッシュな表を作成し、Bloggerの投稿に追加する方法をご紹介します。
それでは、はじめましょう！
{tocify} $title={目次}
おしゃれシンプルなテーブルの例
| 姓 | 名 | 年齢 |
|---|---|---|
| ジョン | トム | 25 |
| ジェーン | スミス | 30 |
| ボブ | ジョンソン | 40 |
おしゃれシンプルなテーブルのCSSコード
Bloggerサイドバーの「テーマ」から「HTMLを編集」をクリックします。
]]></b:skin>
「]]></b:skin>」の前に以下のコードを貼り付けて下さい。
※Ctrl+Fで探したいコードをコピーして貼り付ければ（Ctrl+V）、簡単に探し出すことが出来ますよ。Macの場合は、Ctrlが「Command」となります。
table {
border-collapse: collapse;
width: 100%;
margin: 20px auto;
margin-top: 20px;
font-size: 17px;
}
thead {
background-color: #f5f5f5;
}
th, td {
padding: 10px;
text-align: left;
}
th {
font-weight: 700;
color: #333;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #eee;
}
もし、「]]></b:skin>」の中にCSSコードを挿入してもうまくいかない場合は、代わりに<style>の直後にコードを挿入してみて下さい。
※当Bloggerブログでは、<style>タグの後にCSSコードを挿入しています。
なお、BloggerテンプレートにテーブルのCSSコードがすでに含まれている場合は、HTML編集で既存の「table」キーワードを検索し、新しいテーブルコードを上書きして下さい。
おしゃれシンプルなテーブルのHTMLコード
Bloggerの投稿編集画面のHTML編集などにこのコードを貼り付けましょう。
<table>
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<tr>
<td>ジョン</td>
<td>トム</td>
<td>25</td>
</tr>
<tr>
<td>ジェーン</td>
<td>スミス</td>
<td>30</td>
</tr>
<tr>
<td>ボブ</td>
<td>ジョンソン</td>
<td>40</td>
</tr>
</tbody>
</table>
この例では、テーブルには3つのカラムが含まれています。
姓、名、そして年齢です。
テーブルにはヘッダー行と3つのデータ行があります。
- テーブル：<table>
- ヘッダー行：<thead>
- データ行：<tbody>
といった要素でそれぞれ囲まれています。
列の見出しは<th>要素で定義され、実際のデータ値は<td>要素で定義されます。
今回のこのHTML/CSSコードはChatGPTにより作成されました。
ChatGPTは、OpenAIが開発した強力な言語モデルで、さまざまなコンテンツを生成する能力を備えています。
今のブロガーブログのテーブルのデザインに満足していない方は、今日ご紹介したテーブルのデザインを気軽に試してみてください。
Bloggerブログの始め方と使い方【初心者完全ガイドブック】
Bloggerブログの始め方と使い方について、初心者でも分かりやすい完全ガイドブック！Bloggerブログの始め方と使い方を詳しく解説しています。Bloggerを使って、あなただけの成功するブログを作ろう！
成功するBloggerブログを始めたいなら、この完全ガイドを見逃す手はありません。
SEOを考慮したブログの設計から、データ分析を利用した魅力的なコンテンツの作成まで、成功に必要なすべてをご紹介しています。
今すぐ記事をチェック！
ブログ運営におすすめの便利グッズ
Bloggerのブログ運営において、長時間のパソコン作業が欠かせないことは言うまでもありません。
しかし、その作業が快適に進むためには、便利なツールが必要不可欠です。
そこで、私自身がブログ運営をしている中で便利だと思った商品を紹介します。
まずは、小さめのワイヤレスマウス。
コンパクトなサイズゆえに、どこでも持ち運びができるため、どこでも作業ができます。
また、クリック音が静かなものが多いので、周りの家族や同居人に迷惑をかけることもありません。
作業に集中したいブロガーには必須アイテムと言えるでしょう。
このデュアルモードマウスは、2.4GワイヤレスとBluetoothの両方の接続が可能で、七色バックライトも搭載。クリック音が静音で充電式バッテリーを内蔵しており、超薄型で人間工学に基づいたデザインが特徴的である。また、USBレシーバーはマウスの底に収納されている。
Amazonで今すぐ購入次に、ワイヤレスイヤホン。
ブログ運営中は音楽を聴きながら記事を書いたり、YouTube動画を視聴することが多いかもしれません。
しかし、イヤホンのワイヤが邪魔だったり、絡まったりすることがストレスになることもあります。
そこで、ワイヤレスイヤホンの使用がおすすめです。
また、ワイヤがないため、家事をしながらでも音楽を楽しむことができます。
Bluetooth5.3 EDRワイヤレスイヤホンは、消費電力が少なく、伝送容量、接続の安定性が向上している。ノイズキャンセリング機能も搭載され、ZOOMやビジネス会議で活躍できる。音質も良く、AAC/SBCに対応し、大容量バッテリーで最大60時間の音楽再生が可能。
Amazonで今すぐ購入最後に、バックパックリュックサック。
ブロガーは外出先でも記事を書いたり、撮影したりすることがあるため、荷物をまとめる必要があります。
バックパックリュックサックは、荷物をしっかりとまとめることができるだけでなく、背負っているだけで体への負担も軽減されます。
また、カジュアルなデザインなので、スタイリッシュに外出することができます。
このバッグは、機内持ち込み可能。防水性能があり、乾湿分離ポケットもある。外部USBポートと盗難防止の隠しポケットがあり、人間工学に基づいた肩ヒモとチェストベルトが装備されている。3WAY仕様で、通勤、出張、通学、旅行など様々なシーンに使える。
Amazonで今すぐ購入以上が私自身がブログ運営で役立ったと感じた商品の紹介です。
商品のデザインの好みもあると思うので、関連する商品を見て吟味するのもおすすめです。
これらのツールを使うことで、より快適に記事を作成することができるでしょう。