こんばんは。
ひろパパです。


TwitterでExcel管理表のブログへのUP方法の話題がありましたので、記事にしてみます。


ザーっと一気に書いたので説明が抜けていたり、分かりにくいかもしれません・・・
分からなかったら聞いてくださいm(__)m




我が家も何度か紹介させて頂いていますが、管理表はExcelで作成し管理しています。
2019管理表
 

Excelって自分で好きなように作れますし、集計も楽なので便利ですよね(*´▽｀*)
マクロまでは使えませんが、関数だけでもものすごく便利です♪


Excelで作成したものをこのブログにupしています。


我が家もそこまで知識が深いわけではありませんが、Excelが苦手な方もいると思いますので簡単に紹介します(^-^)




まずはWEBにUPするための準備です。

1


こんな感じでExcelにて管理表を作成されていると思いますので、UPしたい範囲を指定し(印刷範囲設定されている方は印刷範囲でも可能です)、左上『ファイル』をクリックします。

＊エクセルのバージョンにより多少画面が違うかもしれませんが



①『名前を付けて保存』をクリック
②任意の保存場所を指定
③すると、ファイル名とファイル種類の選択画面が出ると思います。
　任意のファイル名を入力。
　(ファイル名は日本語を入れるとうまく行かない場合があるので英数字がいいと思います。)
　ファイルの種類から『WEBページ』を選択
　
　『保存』

2



範囲が『セルの範囲』になっているか確認後、『発行』
3


すると、先ほど指定した保存場所にhtmファイルが作成されていると思います。


4
この時点で開くことが出来ますので、開いてうまく保存できているか？確認するといいと思います。

5




ココからですが、我が家はLivedoorブログですのでLivedoorブログ画面で紹介します。


Livedoorブログ管理画面に『画像/ファイル』の項目があると思いますのでクリック
6


すると、『アップロード』が出てきますのでクリックし、先ほど保存したhtmファイルを選択し『開く』
7


アップロードされたファイルを開いてみると、うまくUPされていると思います。
ここで開いた管理表のURLをコピーし、リンク設定すれば色々と使えます。
LivedoorブログではPDFもアップロードすることが出来ます。


8


我が家の全ボトル写真などはPDFに変換しUPして使っています(*´▽｀*)



FC2ブログでも『ファイルアップロード』から行えます。
10


ココまでで、とりあえずの『ブログにデータをUP』までは完了です。




ここからは、WEBページにUPしたhtmファイルの使用方法。

Livedoorブログでは『フリーエリア』というブログパーツが用意してありますので、我が家はこれを使用してカラムにアップしています。
＊FC２ブログにもフリーエリアはありますので、公式プラグインから追加してください。

9




フリーエリアに書く内容は、LivedoorブログでもFC2ブログも同じです。

htmlを記述していきます。



リンクさせたい時
<a   href="ここに先ほどコピーしたhtmファイルのURLを貼り付け" >リンク表示させる文字</a>

基本的にはこれでOKだと思います。



リンク先ページを新しい画面(外窓)で表示させたい場合は『 target="_blank"』を追加してください。
target="_blank"の前に半角スペースが必要です。
<a   href="ここに先ほどコピーしたhtmファイルのURLを貼り付け" target="_blank">リンク表示させる文字</a>




例えば・・・


【系統図・飼育データ】
<br/>
<a   href="htmファイルのURL" target="_blank">2017 能勢ＹＧ</a>
<br/>
<a   href="htmファイルのURL" target="_blank">2018 能勢ＹＧ</a>
<br/>
<br/>
<a   href="htmファイルのURL" target="_blank">2017 その他</a>
<br/>
<a   href="htmファイルのURL" target="_blank">2018 その他</a>



と、入力すると以下のように表示されます。
11


<br/＞は改行をさせるタグです。


FC2ブログでも同様にフリーエリアに記述します。
12




記事本文中にもリンクとして使えますのでやってみてください♪



以下htmlタグをコピーして使ってみてください(*´▽｀*)

・改行する
<br/>

・リンクさせる
<a href="URL">文字</a>

・別窓でリンクさせる
<a href="URL" target="_blank">文字</a>

・画像を表示させる
<img src="画像のファイル名">または<img src="画像のURL">


長くなるので細かい所までは書ききれませんが、htmlで文字の大きさや色、画像リンクなども簡単にできます(*´▽｀*)
もっと詳しい方がいると思いますが簡単に・・・


と、思ってこの記事を書いていたらUPしたhtmファイルは画像が表示されないことが判明・・・
もうちょっと勉強してきます(;´Д｀)
とりあえず・・・


線・文字は問題なく表示されますので参考になればm(__)m