健康と日々の徒然~Anのひとりごと

心と体の健康を大切にしたい方へ贈るひとりごと

複雑な表を簡単コピペではてなブログに挿入する方法~ WPのプラグイン

はてなブログを始めた頃はわからないことばかりでしたが、少しずつできることが増えてきました。表の挿入もしかり。色々失敗しながらたどり着いた方法は、ワードプレスの利用。手間ひまかけて考えた(笑)方法も聞いてくださいませ。

f:id:lady-jhones:20161010212123p:plain

コピペ一発!複雑な表も簡単にできるツール

複雑な表でも、わざわざWPを編集しなくてもできちゃいます!こちらのツールです。現在はこちらを利用しています。 take-chanさんが、教えて下さいました。

テーブルタグジェネレーター です。

CSSも表示されているので、編集をすると、さらに細かい指定が出来ますが、「CSSって何?」という方でも、HTMLのソースコードをコピペするだけでも、WPで作った後述の表と同じものが簡単に出来ました!

(CSSがないと、行の横線だけ表示されました。列の縦線がありません)超便利!ありがとうございますヽ(^。^)ノ  追記

 

以下はこのツールを知る前に利用していた表の作成方法です。記録として残しておきます。

 

はてなブログの記事になるほど!

ねこさとさんが、「ブログで簡単に表を作る方法」を教えてくださっています。便利なツールがあるのですね。

ptskunx.hatenablog.com

なるほどです。ありがとうございます。テーブルタグ作成ツールも便利そうです。

 

さらに、lacucarachaさんが、ブコメでエクセルで作った表をhtmlに変換できるツールを教えてくださっています!こちらです

http://tech-unlimited.com/exceltable.html

早速試してみました。うん、簡単!便利なものが色々あるのですねえ。もっと早く知りたかったです!

実は、初めの頃、似たようなツールを見つけて使っていたのですが、出来上がった表がなんともしょぼくて…

 

これから普通の表はエクセルで作成し、lacucarachaさんが教えてくださったツールで変換してみようかな。ありがとうございます。

このツールでは枠線がなかった(と思う)ので、もし、枠線が欲しい場合は、

<table> にborder="1"を付け加えて<table border="1">

と書き換えると、1ピクセルの枠が出現します。

1年前は、こんなこと知りませんでした!

 

(WPサイトをこれから作ってみたい方、WPの表の作り方がわからない方は、以下の手順をぜひ保存しておいてくださいね) 

 

簡単コピペWpのプラグイン TinyMce Advanced

はてなブログは見たままモードを利用しています。表はhtmlで打ち込めないことも無い(今は、です)のですが、表示されるイメージがつかめないので、裏技(と言うより、わざわざ手間をかけているのかもですが)でワードプレスを利用し作成しています。

ワードプレスに、TinyMce Advanced と言うプラグインをインストールすると、テーブルが簡単に作れます。

眠っているワードプレスサイトがあるので、表はそれを利用して作成、完成したらテキストモードに切り替えてhtmlをコピーし、はてなブログのHTML編集画面で貼り付けるだけです。

*ちなみにプラグインのインストールに関しては、検索して調べてください。とっても簡単です。

 

ワードプレスのサイトがある方からは、「はてなブログでも簡単に表を挿入できるの知らなかったの。何を今更」と笑われそうですが、私のように苦労する方も中にはいらっしゃるかなあ、と思いますので、手順を簡単にまとめました。

※そもそもワードプレスなんて使えないゾ!という方。機会があったらぜひ触ってみてください。基本的なことは簡単です。ただし、サーバーやドメインが必要なので、新たに始めるとなるとお金はかかります。

さくらサーバーはワードプレスのインストールは、ちょっと難しいですが、エックスサーバーなら、自動インストールできますので簡単です。私でもできましたから!

 

ビジュアルモードで表を作成する手順

ワードプレスの編集画面はHTMLをコピーしたら削除し、そのページは保存していません。まあ、ブログにとってはゴミみたいなものですからね。身軽であることにこしたことはありません。

 

プラグイン設定画面

f:id:lady-jhones:20161010220041p:plain

f:id:lady-jhones:20161010221223p:plain

 

新規投稿を追加、ビジュアル画面でテーブルのアイコンをクリック 

f:id:lady-jhones:20161010221251p:plain

デフォルトでは、10列、10行まで一度に作成できます。それ以上の場合は、「行を{上/下}に追加、列を{右/左}に追加することで増やせます。

 

f:id:lady-jhones:20161010221328p:plain

例えば3列5行のテーブルを作りたい場合は、「テーブルを挿入」をクリックし、でてきたマス目で必要な部分を選択すればOKです。上の画像では、10列3行の表ができます。

 

f:id:lady-jhones:20161010221343p:plain
セルを選択すると、見出しの設定やセルの結合などができます。 

 

f:id:lady-jhones:20161010221400p:plain

セルのプロパティで、ヘッダーセルを選択すると、見出しとなります。

 

f:id:lady-jhones:20161010221434p:plain

セルの結合を選択し、結合したいセルを選択すると青く反転し、1つのセルに結合されます。

 

f:id:lady-jhones:20161010221448p:plain

表に枠線を入れたい場合は、表のプロパティをクリックし、枠線に1(1ピクセルの場合)と入れます。

ポイント

注意: 幅、高さは基本的に指定しないほうが無難です。固定値を指定すると、ブラウザによっては表示が崩れ、スマホの場合は残念な見え方になりますので。

 

複雑な表も作りやすい

エクセルでセルの結合を使った表を作って、上記ツールで変換してみましたが、結合した部分の表示はされませんでした。(やり方はあるのかもしれません)

ワードプレスのプラグインを利用すると、複雑な表も作成できます。例えば以下のようなテーブルも作成できます。(中身は適当に単語を入れただけで、意味はまったくありません)

  項目1 項目2 項目3


はてなブログ

読者登録 idコール スターコメント
コメント カテゴリー

暮らし
はてなブックマーク 新着エントリ- 学び
人気エントリー スター

 

表が完成したら、テキストからビジュアルにモードを変更し、表示されたソースコードを全選択(Shift +A)しコピー(Shift +C)、はてなブログのHTML編集画面に貼り付けて(Shift +V)終わりです。

f:id:lady-jhones:20161010222241p:plain

 

枠線を点線にしたり、背景色や文字色、フォントを変えたりすることも可能ですが、基本的な表ができれば問題ないと思います。

ねこさとさんのエントリーで、また一つ覚えました。吹き出し会話のコード、ナビゲーション、見出しの装飾、などなど皆さんのブログから、色々な事を教えていただいてきて、もうすぐ1年になります。

ブログを始めた頃と比べると、ブログの体裁も随分変わりました。失敗を繰り返しながらもだんだんデキることが増えてくると、それはそれでまた面白いですね。挑戦したいことリストも色々ありますが、それがデキるようになるのはまだまだ先のようです。

 

まとめ~たくさんの経験で成長する

ネットのあれやこれやを一つづつ、経験しながら覚えていくことは、仕事を覚えていくことと共通するものが多いです。何事も日々の積み重ねが大事。ですね。

看護師は人が相手の仕事です。経験値は多ければ多いほど、色々な場面に遭遇しても対応できる力がついていくのだろうな、と思います。

1年目の新人看護師さんも、たくさんの経験をして成長していきます。もう少しすると先輩にもなります。辞めたい、と思ったときは自分のことを客観的に見て、「こんなことも出来るようになったんだ」と自信を持ってくださいね。

「Anのひとりごと」~今日も1ページ