amecareのポップアップの「ツール」ページにある「表(テーブル)の作成」を使うと、HTMLで表(テーブル)を作成して、そのタグをアメブロの記事エディタに貼り付けることができます。
目次
基本操作
アメブロの記事エディタに表を貼り付ける基本操作は以下のとおりです。
行数と列数を設定
「行×列」の欄の入力項目に、作成したい表の行数と列数を設定します。
「全体」には、見出しとデータを合わせた全体の行列数、「見出」には全体のうち、上から何行と左から何列を見出しにするかを設定して下さい。
セルの内容は、見出し部分は「見出し」、データ部分は空欄となります。
記事エディタに貼り付け
表ができたら、それをアメブロの記事エディタに貼り付けます。
貼り付け方法は、
- 記事エディタを開いて表を貼り付けたい位置にカーソルを移動する
- amecareのポップアップを開く
- 別ページが開いた場合は本ツールに移動する
- 作成した表がプレビュー表示されていることを確認して、ページ下部中央付近にある「貼り付け」ボタンをクリックする
となります。
これで、表の枠部分が記事エディタに貼り付けられます。
もし、記事エディタの「HTML表示」モードで貼付け位置を精密に決めたい場合は、「コピー」ボタンをクリックするとクリップボードを経由してタグをコピー＆ペースト(コピペ)することが可能です。
セルの内容を入力
表の枠部分を貼り付けできたら、アメブロの記事エディタで各セルの内容を入力して完了です。
各種調整
表の外観に関して、記事エディタへの貼り付け前に、好みに応じてある程度の調整が可能です。
枠線の設定
表のどの部分に枠線を表示するかを、以下の4種類から選択できます。
- 無し
- 枠線は表示されません。
- 外枠のみ
- 表の外枠のみ枠線が表示されます。
- 外枠と横
- 表の外枠と各行の上下に枠線が表示されます。
- 全て
- デフォルトです。全てのセルの上下左右に枠線が表示されます。
また、枠線の色を変更することも可能です。
文字色・背景色の設定
セル内の文字色と背景色を以下の単位で設定できます。
- 見出し
- 見出し部分の文字色と背景色です。
- 奇数行
- 見出し行を含まない、データ部分の奇数番目の行の文字色と背景色です。
- 偶数行
- 見出し行を含まない、データ部分の偶数番目の行の文字色と背景色です。
貼り付ける前にセル内のデータを入力
「データ」ボタンをクリックして表の内容をTAB区切りテキストで入力することで、事前にセル内のデータを入力した状態でアメブロの記事エディタに貼り付けることができます。
TAB区切りテキストはあまり馴染みのない方も多いと思いますが、例えば、WebページやExcelの表をコピーしてここに貼り付けると、通常は自動的にTAB区切りテキストになります。
データ入力欄は「データ」ボタンをもう一度クリックすると閉じます。
入力した内容がプレビューに反映されます。
リセット
ページ左下の「リセット」ボタンをクリックすると、作成中の表をクリアして初期状態に戻すことができます。
Excelからコピペしてアメブロの記事に表を貼り付ける
例として、Excelのデータをコピーして表を作り、アメブロの記事エディタに貼り付ける方法をご紹介します。
現状、単純な行列の表のみで、セル結合などには対応できませんが、アメブロの記事エディタだけで表を作るよりは遥かに楽にできます。
Excelで貼り付けたい表をコピー
まず、Excelを開いて、表として貼り付けたい範囲を選択してクリップボードにコピーして下さい。
表作成ツールの「データ」をクリック
amecareの「表(テーブル)作成」ツールを開き、右下の方にある「データ」ボタンをクリックします。
貼り付け
データ入力用のテキストエリアが開くので、そこにExcelでコピーしたデータを貼り付けます。
データを閉じる
データはTAB区切りのテキストとして貼り付けられますので、内容を確認して再度「データ」ボタンをクリックし、データ入力を閉じます。
表の行・列を調整
貼り付けたデータの内容がプレビューに反映されていると思いますので、それを見ながら表の行数・列数などを調整して下さい。
調整完了＆記事に貼り付け
行数・列数の調整が完了した状態です。
画像では、6行6列で1行目が見出し行になっています。
更に、文字やセル背景の色などを変更することもできます。
出来上がった表を記事に貼り付けるには、記事エディタを開いて表を貼り付けたい位置にカーソルを移動してから、再度amecareのポップアップを開いて「貼り付け」ボタンをクリックして下さい。
貼り付け完了
これで貼り付け完了です。
更に、記事エディタの機能を使って、セル毎に表示を中央揃えや右寄せにすることも可能です。
動画で
ご紹介したExcelのデータをアメブロに貼り付ける手順を動画にしてみましたので、よろしければご覧ください。