ひびこれSTUDY

Wakkoの雑記ブログ。 毎日学んだこと、思ったことのアウトプットの場として運営しています。

はてなブログで使える!表の作り方

スポンサーリンク

こんにちは!Wakkoです(・∀・)

はてなブログ歴2週間!イエイ!

 

他のサービス使ったことないけどはてなブログ楽しいですねー

始めたのがここでよかったです!

強いて言えばcssカスタマイズがもうちょいやりやすいと嬉しいのにな!

勉強中です。このブログ見て。わかるでしょ。勉強中です。

 

今回ははてなブログで表を作る方法を

備忘録として残しておきます。誰のため?私のためです。

 

はてなブログに表を貼る方法

グーグルスプレッドシート

このアイコンを探そう

 

かの高名なグーグルスプレッドシートです。

こちらのページから上記のアイコンを探しましょう。

 

Wakko

せいべつ
HP 165/264
   
こうげき 27
ぼうぎょ 24
とくこう 27
とくぼう 29
すばやさ 31

 こんな表が作れます。ポケモンやりたい。 

 

グーグルスプレッドシートの表の作り方

かなり感覚的に使えるようになっていますので、いじくって覚えていただくのが一番かと思いますが、僭越ながら簡単に表の作り方をレクチャーさせていただきます。

 

スプレッドシートを開く

 

グーグルスプレッドシート

「空白」をクリック
 表を作成する

 

グーグルスプレッドシート

思うがままに表をつくる

Excelを使ったことのある人なら全部ノリで作れます。

スプレッドシートの詳しい使い方は後日まとめますね。

 

 コピーする

 

グーグルスプレッドシート

コピーしたい箇所を選択して右クリック

Macならcommand⌘+C

WindowsCtrl+Cでもコピーできますよ。 

 

 はてなブログの記事編集で「貼り付け」する

はてなブログ記事編集ページ

見たまま編集で「貼り付け」する

「見たまま編集モード」に貼り付けしてください。

「ペーストしてスタイルを合わせる」だと表にならないのでご注意。

 

Macならcommand⌘+V

WindowsCtrl+Vで貼り付けできます。

 

今までショートカットキー使ってこなかったという人はぜひこの2種類を覚えてください。

 

Wakko
せいべつ
HP 165/264
   
こうげき 27
ぼうぎょ 24
とくこう 27
とくぼう 29
すばやさ 31

 できた!

 

尚、HPの列を10pxに設定しているのですが

なんでか21pxで表示されてしまいます。誰か対処法教えて

対処法がわかり次第更新します…不甲斐ない…

 

はてなブログ記事編集ページ

HTML編集もできる

多分

<tr style="height: 10px;">←高さを10pxに設定
<td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; background-color: #00ff00;" colspan="5" rowspan="1">.</td>←この「.」
<td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; background-color: #666666;" colspan="3" rowspan="1">.</td>←この「.」
</tr>

 

はてな独自の空白にいる「.」がなんか邪魔してるんじゃないかと思うけどすみませんわかりません。勉強します…。

 

 

Excelで作った表も同じように使えるので、ソフトをお持ちで操作に慣れてる方は

同じように貼り付けて使ってくださいね!

私は持ってないのでスプレッドシートで作成です!

このツール、使いこなせるとまじで最高にすごいので知らなかった人はぜひ覚えて帰ってください。

 

手持ちの技術が増える

 表が使えると表現の手法が広がりますねッ 。

これでわかりやすい記事を執筆していきましょう( ^ω^ )