モノしりブログ

~世の中の役立つ情報を発信~

はてなブログに表(エクセル・スプレッドシート)を挿入してみよう【画像大量・簡単3ステップ】

はてなブログに表を挿入したい。そんな方にやり方を画像大量で紹介します。

 

【ブログに表があるメリット】

・ブログがスッキリして見やすくなる。

・一覧表や比較表が作れて、アフィリエイト成果がアップしやすい

 

超初心者の私でも出来たので、本記事を参考に挑戦してみてください。

 

【本記事を見ればできる表】

各社 料金 期間 備考
1 ああああああああ いいいいいいいいい ううううううううう
ああああああああ いいいいいいいいい ううううううううう
ああああああああ いいいいいいいいい ううううううううう
ああああああああ いいいいいいいいい ううううううううう
ああああああああ いいいいいいいいい ううううううううう

私のブログで紹介するのは、最も簡単な表の作り方です。

※細かなデザイン等を求めている方の希望には添えないかもしれません。

 

それでは、3ステップで紹介します。

 

 

ステップ1:エクセル・スプレッドシートで表を作る

まずは、ブログに挿入したい表を作成しましょう。

f:id:around30year:20200320081227p:plain

私の場合は、スプレッドシートで作成しています。Officeを入れてないので、エクセルは使えません。

自分の作成したい表を任意に作成してください。

 

ステップ2:変換サイトを使用する

ステップ1のシートをそのままブログに貼り付けることはできません。

スプレッドシートで作った表をHTMLに変換する必要があります。

そこで、ここのサイトを使用します。

styleme.jp

f:id:around30year:20200320081930p:plain

ブログに貼りたい表をコピーしてください

f:id:around30year:20200320082057p:plain

変換サイトのSTEP1の部分にコピーしたシートをそのまま貼り付ける

f:id:around30year:20200320082241p:plain

STEP2の変換をクリック

※オプションは特に変更しておりません。

f:id:around30year:20200320082401p:plain

STEP3にHTMLが表示されれば変換成功です。

このHTMLを全てコピーしてください。

 

ステップ3:ブログにHTMLを貼り付ける

f:id:around30year:20200320082730p:plain

ブログのHTML編集から、先ほどコピーしたHTMLを貼り付けてください。

これで、作業完了です。シートに色を付けたい部分は、color:#000000の部分を自分の好きな色番号に変えてください。

 

色を変えたい場合の参考サイト

www.colordic.org

 

完成

↓プレビュー画面です。ちゃんと表が貼り付けられていますね。

 これで完成です。

f:id:around30year:20200320083321p:plain

 

応用

表から、各社のHPのアフィリエイトリンク飛ばしたい方法を紹介します。

f:id:around30year:20200320083725p:plain

任意の提携サイトの広告リンクをコピーしてください

※私の場合はA8ネットを使用しています。

f:id:around30year:20200320083957p:plain

はてなブログのHTML編集画面に戻り、リンクを挿入したい部分を探します。

f:id:around30year:20200320084232p:plain

先ほどにアフィリエイトリンクのHTMLコードをコピペする

各社 料金 期間 備考
お名前.com ああああああああ いいいいいいいいい ううううううううう
ああああああああ いいいいいいいいい ううううううううう
ああああああああ いいいいいいいいい ううううううううう
ああああああああ いいいいいいいいい ううううううううう
ああああああああ いいいいいいいいい ううううううううう

各社の覧の “1”→”お名前.com”に変更しましたね。

これでクリックすれば、任意のHPに飛ばすことができます。

 

はてなブログに表を挿入したい方がぜひ試してみてくださいね。