くもりーBlog's

貯金体質!お金と暮らしの巻

レビューとか画像入りの表を作ったら見やすい!はてなブログ編

こんにちは、くもりーです。

ダイソーに久しぶりに行きました。

異様に売れている、ふりかけ「あかり」がありました。「ゆかり」はご存じですよね。

私は「あかり・ピリ辛たらこ」を初めて見かけたので購入です。

f:id:kumori-pannda:20200207111610j:image

 

 

↓ところで・・・こんな感じで表にするのって見やすいですよね。ということで【ダイソーのあかりと、はてなブログで画像入りの表、コラボです】

  レビュー&作り方




f:id:kumori-pannda:20200206162658j:image



普通の白米にかける。ピリリとご飯がすすみます。見た目は寂しいけど間違いないやつです。





f:id:kumori-pannda:20200206162709j:image



【おにぎらず】にしてみます。

あかりとスライスチーズを乗せます。

※お塩をかけないのですがスライスチーズがいい味付けになります。





f:id:kumori-pannda:20200206162719j:image



カットしました。自分用なのでお米少なめです。薄くできちゃった💦

断面がちょっと失敗しました(*- -)

お米は両面に入れないとダメね・・・

 

この表は一度作ったら、編集見たままモードでの入力なので使いまわせますよね。

Googleスプレッドシートはこんな感じ

Googleでも表計算!Google スプレッドシート - オンラインでスプレッドシートを作成、編集できる無料サービス

 

 Googleでエクセルとほぼ同じものがありました。こちらを使ってみました。

エクセルを今まで使うことがなかったよ。という人にも気軽に使用できますね。

f:id:kumori-pannda:20200206194059j:image

①パーソナルとビジネスの画面がでます。

パーソナルをクリック!すると上の画面になります。

※Googleのアカウントとアドセンス利用と関係あるのかわかりませんが、URLがいきなりでました!

②URLクリックで下のシートになります。

f:id:kumori-pannda:20200206193742j:image
③はてなブログの編集見たままで打ち込むので、数字にしました。こんな感じで出来上がりです。

A1に斜線を入れたい方

❶挿入>図形描画❷↖の隣の・ー・がつながったのをクリック

❸スタイルシートの画面になります。

❹どこでも構いません。\斜線をドラックで作ります>保存して終了(右上)

❺元のシートに戻ります。後は、作った斜線をA1までドラックしてください。

(エクセルは斜線をポチで出来ます)


f:id:kumori-pannda:20200207113006j:image

HTMLに変換しましょう

これは便利!エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)


f:id:kumori-pannda:20200206193805j:image

①先ほど作ったシート部分を貼り付けます。

三段で作っていますが、お好みで!

※「A1の部分に斜線を入れるとうまくドラック出来ないわ」というときは、右上から(逆から)やってみてください。

②下の図です。CSSを出力しないにチェック>変換
f:id:kumori-pannda:20200206193814j:image
③サンプル画像がでて閉じるマーク❎をクリック。STEP3.HTMLタグに、HTMLが出てきます。ここをはてなブログのHTMLにコピーしてください。

※色々、試してみたのですが知識不足・・・シートのth部分に色が反映されず薄いグレーしかできませんでした💦

編集見たままでOK

f:id:kumori-pannda:20200207113543j:image

シンプルな表ができました。

後は、写真も文字もいつものように打ち込むだけです。

パソコン画面では、いい感じになっていましたが・・・

あれ??スマホだと画像部分が幅を取りすぎました💦

画像を小さくしてみよう

www.bannerkoubou.com

今回のおにぎらずの画像は、携帯のフォトで正方形にして、こちらの画像加工にて100×100にしております。

まとめ

画像は、PC画面で程よい大きさですが、スマホ画面は小さいですね。

そこが何ともなのですが・・・

私は説明が下手なのでたまに使ってみようと思います。

以上、ダイソーのあかりと、はてなブログで画像入り表のコラボでした~

「えっ?今ですか」

あかり・ピリ辛たらこonトーストを食べています!

f:id:kumori-pannda:20200207110439j:image

!( ̄- ̄)ゞ

 

【追記レシピ】あかりのかきあげです👍

f:id:kumori-pannda:20200303131034j:image

プライバシーポリシー