vanillaice (Akira)

vanillaice (Akira)

端的に結論から言いますと

私のテンプレートでは FC2エディターの『表作成ツール』は使えません

----- 追記

一部使えるようにしておきましたが あくまでもブラウザの後方互換サポート任せです

----- 追記ここまで 以下本文


申し訳なーい (´・ω・`)
理由なんですけども
一口に「HTML5で作成されたテンプレートです」と言っても
大別して2通りあります

・ HTML5を使えるようにはなっているが HTML5新要素が全く使用されていないもの
・ HTML5が使えるようになっており 実際に5規格の要素で構成されているもの

私の場合は後者です


前者というのは「とりあえず5にしておかないと」な場合ですね
head情報チョロっと直すだけなので簡単です

じゃあ前者の場合は5でコードを書く技術が無いのか?
というと その場合ももちろんありますけれど 多くの場合は
古いブラウザを利用しているユーザーへの配慮
だと思ってください
私はその配慮を全くしていません(ニコ)

5になって廃止された要素というのがたくさんあります
みなさんが見慣れたタグも多く含まれているかと思います

cellspacing, cellpadding, border, align, valign, center, font など

FC2エディターの表(table と言います)作成ツールは
cellspacing, cellpadding, borderなどを含んでいます
よって私のテンプレートでは機能しない というわけです (´・ω・`)

記事中で表を多くお使いになる方は この機会に正しい(新規格に準じている という意味です)コードを覚えるか
あるいは ひとつ前のHTMLバージョンである 4で作成されたテンプレートをお探しになるか
二択でございます

ただ廃止が決定している要素というのは順次排除されていきますので
新しいものを覚える方が良いんじゃないかなーーー!

--------

新しいなんて言っても実際は新しくもなんともない
要は装飾はCSSでやれ というのが総本山W3Cのお達しです
だからここではインラインCSSの書き方を記そうと思います

装飾 というのは
位置合わせを左以外に変更する
文字の色を指定する
表にボーダーをつける
表の背景に色をつける
これ全部「装飾」です 位置合わせも「装飾」に入ります

属性="値" ← これがHTML
プロパティ: 値; ← これがCSS

細かく説明してもアレですので ここハウツーブログじゃないですし(((笑)
以下は雛形としてコピーでお持ちください

<table style="margin: 0 auto; border-spacing: 0; border-collapse: collapse; border: 1px solid black; background-color: white; max-width: 100%;">

<tr>
<td style="padding: 5px; border: 1px solid black; background-color: silver;">1</td>
<td style="padding: 5px; border: 1px solid black; background-color: silver;">2</td>
<td style="padding: 5px; border: 1px solid black; background-color: silver;">3</td>
</tr>

<tr>
<td style="padding: 5px; border: 1px solid black;">1</td>
<td style="padding: 5px; border: 1px solid black;">2</td>
<td style="padding: 5px; border: 1px solid black;">3</td>
</tr>

<tr>
<td style="padding: 5px; border: 1px solid black;">4</td>
<td style="padding: 5px; border: 1px solid black;">5</td>
<td style="padding: 5px; border: 1px solid black;">6</td>
</tr>

</table>



意味はなんとなくおわかり頂けるのではないかと思います
表というのは最初に「行数」「列数」を決めておく必要があります
tr から /tr までが「列」「段落」
td から /td までが「行」「セル」です
なんか行やら列やら日本語がよくわからん

---------

作成手順
ちょっとクセありますが FC2の仕様と絡めてのご説明

① 通常の状態「簡易モードオフ」で雛形ソースを貼り付ける ↓

sample


ずいぶんと下の方にありますよね これはいけませんね


② ここ押します (高機能エディター) ↓

sample


これで上に陣取るワケワカメな空白をdeleteできます
「改行の扱いをHTMLタグのみ」に変更すると一瞬で空白はなくなりますが
文章の改行時にいちいち br を書くはめになりますし 視覚的に作業しやすいのは高機能エディターを使う方法です





あとはもうカーソルを合わせて入力していくだけ
背景色をどこにつけるのか セルをどうやって増やすのか等
雛形ソースをご覧頂ければわかると思いますのでとりあえず割愛しますが
わからん!!!
な方はお申し付けくださいemoji

--------------- 追記 2015.12.15

上記記事内容ですが 視覚的な作業に重点を置いています
「見たまま編集」つまりセル内に直接文字を書き込むことができるパターンです
というわけで初級者の方向け

中級者の方へ向けては
ソース内容とリアルタイムプレビューを見比べながら作業ができる というのを前提として
tableタグの改行を全て取り払い 横一列(一繋ぎ)でソースコードを書いてください
そうすれば最初に現れる余分な空白は出てこなくなります
ただし横一列になることで しっかり目視確認しながら作業をしないと
非常に混乱することもあるかと思います

<table style="margin: 0 auto; border-spacing: 0; border-collapse: collapse; border: 1px solid black; background-color: white; max-width: 100%;"><tr><td style="padding: 5px; border: 1px solid black; background-color: silver;">1</td><td style="padding: 5px; border: 1px solid black; background-color: silver;">2</td><td style="padding: 5px; border: 1px solid black; background-color: silver;">3</td</tr><tr><td style="padding: 5px; border: 1px solid black;">1</td><td style="padding: 5px; border: 1px solid black;">2</td><td style="padding: 5px; border: 1px solid black;">3</td></tr><tr><td style="padding: 5px; border: 1px solid black;">4</td><td style="padding: 5px; border: 1px solid black;">5</td><td style="padding: 5px; border: 1px solid black;">6</td</tr></table>


こんな感じです
わかりにくいですよね(笑)

-----

そしてもうひとつ
上級者向けの方法
こちらの作業は最初の改行つきコードを使ってもOKです
その代わり記事作成前にこういった処理が必要(クリックで拡大) ↓

sample

記事作成画面の下の方にありますよね
通常 記事作成時には enter/ return キーを押すだけで改行が反映されますが
『HTMLタグのみ』にチェックを入れると ユーザーが意図的に
<br>
と記入しない限り改行は行われません
この状態で記事を作成するには
table自体は一番上にある改行つきソースコードを使って作成します

そしてそのtableで作成した「表の」前後にある文章に於いて
任意改行したい文章末尾に逐一
<br>
を記入する必要が生じます
以下はそれぞれのスクリーンショット

例) 自動改行の場合 = enter/ return キーで改行されている

sample

例) HTMLタグのみ に設定し
<br>
を書いていない場合 = enter/ return キーを押しても改行がされていない

sample

例) HTMLタグのみ に設定し 改行したい箇所に
<br>
を書いた場合 = 指定箇所で改行されている

sample


任意改行の
<br>
は全ての文章に対して行わなければいけません
ですから人によっては非常に「手間」だと感じることもあるかと思います
書き忘れた部分は当然改行が行われません

---------

まとめ

改行つきtableソース(見やすい方)を利用する場合は記事作成2パターン
① 高機能エディターを利用した視覚操作を重視した方法 --- 初級
② 改行を「HTMLタグのみ」に設定した任意改行を行う方法 --- 上級

改行なしtableソース(見辛い方)を利用する場合は1パターン
③ ソース内で編集すべき箇所をしっかり探しながら作業


どれが自分にとって一番都合が良いのかを考えて作業されてくださいませ (●'ω')ノ

最後に 私ちょっと書き忘れがあったのですが

★ table全体の位置合わせ

table全体はセンタリングするソースコードになってます
左寄せにしたい方は最初の
margin: 0 auto;
を削除してください(後ろの半角スペースも削除) こうです ↓

<table style="border-spacing: 0; 〜省略〜>


右寄せにしたい場合は margin: 0 auto; を以下の通り修正してこう ↓

<table style="margin: 0 0 0 auto; border-spacing: 0; 〜省略〜>



★ tableのサイズ(横幅)

雛形では最初のtableタグの部分に max-width: 100%; と指定があります
この意味するところは
「横幅は不定だが 記事画面の横幅100%よりも大きくはならない」
という意味です
不定 というのはつまり セル(td)の中身に全体サイズが左右されるということです
中身が少ない時には横幅は小さく 中身が大きければ横幅は大きく(マックス 100%)になります


tableというのは中身のサイズが最も重要で 横幅を外周りの要素(つまり記事画面横幅)に合わせようとはしません
(shrink to fit とい言います)
レスポンシブデザインのテンプレートの場合よくよく考えてwidth指定を行わないとレイアウトに失敗します

① width を未指定にした場合

tableは自身が置かれている場所(範囲)を基準にしません
これがdivと大きく異なる点です
とにかく中身が重要ですから そのセルの中身総横サイズが記事の幅を超過しても
強引にセルを並べてしまいますので
結果 記事画面からtableがはみ出てしまうことになります

② width を px で指定した際にも同じことが起こります

例えば自分が見ている画面で記事の横幅が600pxだとします
ならばtableを500pxにしておこう ということでそのまま実直にwidth: 500px; と記載してしまうとですね
レスポンシブのテンプレートというのは 画面幅に応じてレイアウトが変化しますよね
つまり記事の横幅が変化する ということです
ブラウザの横幅を拡大/ 縮小して確認してみましょう

で 上記の通り500px を指定したtable
記事幅が500px以上あるとき ↓

sample

ブラウザ幅が変化して 記事画面が500pxを下回ってしまったとき ↓

sample


平気ではみ出します(笑)
ですから

レスポンシブテンプレートでは迂闊にpxでの幅指定は行わない

というのが大切
じゃあどうするか

%指定とmax-width そして table-layout: fixed;を上手に使う(併用する)

上記サンプルの失敗レイアウトの横幅を以下の通り修正してみます

width: 500px; を
↓↓
width: 100%; max-width: 500px; table-layout: fixed; に変更

・セルの中身の総横幅が500pxに満たない場合でも全体像は500pxに

sample

・セルの中身の総横幅が500pxを超えると自動で折り返し
記事幅が500px以下になった時にはtable全体が記事幅に収まるよう縮小

sample


これで超過を防ぐことができます
table-layout: fixed; を指定すると セルが等分になる というのも覚えておくと良いですね

具体的なpxという数値を設けない場合には
max-width: 100%; だけで大丈夫です
(その代わり table全体像はセルの中身のサイズに依存します)
px指定を使いたいときだけ
width: 具体的数値px; max-width: 100%; table-layout: fixed;
ということです

サイズは常に一定にしておきたい
という場合にはレスポンシブデザインを避けるべきです
デバイス幅に合わせる
というのが一番の目的であり そのためのレスポンシブです
パソコンの画面とスマホの画面は極端に異なりますが
そのサイズにキッチリ合わせることができて初めてレスポンシブ (o'ω')ノ

関連記事

Comments 18

There are no comments yet.
Akira  

必要最小限のタグで構成しています。
<tbody>やらなんやかんやは取っ払って簡素にしてあります。
最低でも必要なのは
<table>
<tr>
<td>
ですので、もっとちゃんとしたtableを書きたい という場合はLet's googling around

2015/09/19 (Sat) 05:19 | EDIT | REPLY |   
ひろし  
おはようございます!

来てみました。
ひろしですwww
あきらさんどこでもキャラ同じですね(笑)
FBもそろそろ更新しましょう(笑)
エロ外人は無視でwwwww

2015/09/19 (Sat) 06:20 | EDIT | REPLY |   
chiemi  
ありがとうございます

早速挑戦してみます。

頑張る!!!!!

2015/09/19 (Sat) 09:04 | EDIT | REPLY |   
chiemi  
めっちゃ簡単.......

にできるように....丁寧にありがとうございます。

何故、自分で行った時も、この空白が出たのか.....
良く理解できました。

ここを何とかするのに、わけわかめで^^

テンプレを変える気は毛頭ないので、
同じ方法で、最初は頑張ってみたのですが


頭の中がヒートしてしまって
前半で書いてくださった理由から
一つ一つ追っていくと、そういうことか.......と。

もう少し弄って^^勉強します。
お忙しい処、ありがとうございました。

あ、でも....なにかありましたら....
(おいっ....→済みません、ないように頑張ります)

2015/09/19 (Sat) 09:19 | EDIT | REPLY |   
chiemi  
追記

わたしがしたのは、線が消えてしまうんです。

教えて戴いたのと比べ
なぜ、そうなったのか勉強してみます。

お花の、最新、コスモス処にて、勉強中。
もし....

2015/09/19 (Sat) 09:39 | EDIT | REPLY |   
Akira  
To chiemiさん

とりあえず貼り付けはできたようで良かったですe-454
あとはそれぞれのパーツをカスタムするだけ。
borderの色を変えてみたり、背景色を変えたり、背景色を背景画像に変えてみたり。

-------

練習されたtableも拝見しましたよ。
tableのポイントとしては

border-collapse: collapse;

この指定があるかどうか。
collapse = 折りたたみ という英単語の意味ですよね。
仮にそれぞれの<td>にborderがつけてあった場合、通常では線がダブルになります。
1pxの指定がそれぞれにあるのなら、ぴったりくっついて2px。
collapse を指定するとその1pxの線同士が重なって、サイズの大きい線に吸収されますので、両者1pxの場合には 1pxになります。

逆にこの「重なり」を解除するには
border-collapse: separate;
を指定します。
この指定では線同士が重なりませんので、隣接td(セル)へのborder指定が2pxと3pxならば合計で5pxの線になるわけです。
collapseの場合には3px。

2015/09/19 (Sat) 10:08 | EDIT | REPLY |   
Akira  
To chiemiさん

んでもって、borderは各セルへの指定が必要です。
大外のborderについては<table>への指定。
各セルの周りにborderが必要であれば、それぞれのセルに td style="border: 〜略〜;" の指定です。

ついでに、tableのセルを均等にするには
<table style="table-layout: fixed;"
を指定します。

-----

単位について。

基本的にweb上で使う単位は px または em または rem または % のいずれかです。
%はレスポンシブの際に活躍しますね。
具体的数値を設けずに、パーセンテージで割り出すやり方。
pxは画面解像度の相対数値で、これが最も一般的です。
emはその「親」になる要素の文字の大きさ一文字分が1em。
半文字ならば .5em。
remは新しい単位で私はまだ使用を控えていますが、emとpxの良いとこどりみたいな単位です。

で、mm や pt というのは使わない方が良いです。
mm というには「絶対単位」ですよね。
パソコン画面上であっても紙面上であっても、その大きさは絶対的に変化しません。
pxは先に述べたように「相対単位」です。
ptというのは印刷時に利用される単位で、webページ上では基本的に指定しない、と思っておくと良いと思います。

2015/09/19 (Sat) 10:15 | EDIT | REPLY |   
Akira  
To chiemiさん

vertical-align について。

これはセル内部で文字を垂直上合わせにするために書いたものだと思います。
これはですね、tdの内容(セル内の文字)を改行してソース書いてしまうと下に下がってしまうんです(笑)
単にそれだけのことです。
<table>はちょっと<br>が絡んでくるんですよね。
だから貼り付け時にガーっと上に空白ができるんです。
同様にセル内の改行も影響しますので、セル内の上合わせをしたいのであれば


<td>内容</td>

×
<td>
内容
</td>

こうですー。

2015/09/19 (Sat) 10:19 | EDIT | REPLY |   
Akira  
To ひろしさん

ぴろりん (´・ω・`)
いらっしゃいませ((((笑)
ひろし ってなんなの。
あなたひろしじゃないじゃないのさっ(笑)

FBのエロ外人どもが生きているやら居ないやら。
わからん(笑)
メッセンジャーはインストールしない、っつってんのに毎日メッセ送ってくるおバカ (´・ω・`)
スルーで((((笑)

2015/09/19 (Sat) 10:22 | EDIT | REPLY |   
chiemi  
丁寧に教えてくださって嬉しいです

勉強になります。

やっと仕事から帰ってきました。
参考に、再度頑張ります。

ありがとうございます。

2015/09/19 (Sat) 17:57 | EDIT | REPLY |   
Akira  
To chiemiさん

お仕事お疲れ様ですe-454
tableは部品が存在するだけにややこしいですよねe-351
最初はtable覚えるのに随分と泣かされました ( ̄∀ ̄;)

またいつでもどうぞe-257

2015/09/20 (Sun) 09:00 | EDIT | REPLY |   
chiemi  
無事終了致しました

あぁ...すっごく勉強になりましたし
すっごく、楽しかったです。

丁寧に教えてくださったお陰です。
ありがとうございます。

2015/09/20 (Sun) 09:02 | EDIT | REPLY |   
Akira  
To chiemiさん

「楽しい」と感じられることは良いですよね。
興味や楽しみはものすごいエネルギーだと思います。
「めんどくさい。やってらんねー。」
よりも、
「めんどくさい。でもなんか楽しい。」
の方が良いに決まってる(笑)

お疲れ様でしたe-454

2015/09/20 (Sun) 09:20 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/09/22 (Tue) 09:51 | EDIT | REPLY |   
Akira  
To 廃止要素の件 内緒さん

こんにちは。ありがとうございますe-257

他ブログのことはちょっとわかんないです。
Yahooはちょっとだけわかります。
ごめんなさい (*_ _)
どこでもボチボチとそういった害が出ているのですね (´・ω・`)
html5勧告は海外ではかなり盛り上がって、イベントなども開催されていたのですが。
日本はちょっと追いついてないかもしれない ^^;
いずれ使えなくなることがわかっているので、今のうちに慣れておいた方が良いでしょうね (´・ω・`)
FC2などはまだ良い方だと思いますよ。
YahooなんてXPやIE6やら7やら8やらでブログがまともに表示されなくなったのはYahooのせい、って本気で信じて勝手に怒ってる人いるもん((((笑)
いまだにガチtableとか alpha opacity使いたいために「互換設定を入れてご覧ください」とか言ってる方が当たり前にいらっしゃいます。
びっくりする ( ̄∀ ̄;)

2015/09/22 (Tue) 15:24 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/09/24 (Thu) 11:45 | EDIT | REPLY |   
Akira  
To HTML5の件 内緒さん

こんにちは。嬉しいですーe-454

前者と後者の見分け方なんですけども、ソース内容を理解しろというのはちょっと難しいですよね (´・ω・`)
Google chromeをお使いでしたら、拡張機能がありますよ。

https://chrome.google.com/webstore/detail/html5-markup-detector/bfpdjioikkdalecnekdmimjmfpcbdjmo

検索バー横に⑤のマークが表示されます。
前者だと赤色に。後者だと緑色になりますのですぐに判別できます。
赤だからといって別に悪いわけではないです。
理由は記事内容にある通り。
ですがいずれ書き換えの必要は出てくるでしょうね (´・ω・`)
(テンプレート単位での書き換えという意味です。記事単位ではなく。)

-----

スマホの広告ウザいですよね ( ̄∀ ̄;)
今久々にスマホ版見ました。
タイトル上に広告なんて一番やってほしくない(笑)
レスポンシブでのPC版でも、スクロールしてる間非表示になってくれるのは良いとして。
上行ったり下行ったりするのやめて欲しい。
お前はそこから動くな!ずっとそこにおれ!誤タップへ誘うな ●`з´●
って思います(笑)

2015/09/24 (Thu) 13:07 | EDIT | REPLY |   
Akira  
To HTML5の件② 内緒さん

そうですかね (´・ω・`)
私のテンプレは重たい方だと思います(笑)
ページ遷移のところ外すと速い。
いつも1ページ5記事、画像5件で800〜1000ミリ秒台で作ってます。
その後エフェクト入れてる (´・ω・`)
今設定中のものはエフェクト入れてませんので速いんだと思います(笑)
んで、スライダーなんかの画像が一瞬ガバっと全面表示になるというのはですね...。
んー。製作者の書き方、としか言えない ^^;
ちょっとその辺ノーコメントで。すみません (*_ _)

テーブルがたくさんあるページは表示が遅いですよ。
テーブルの描画特性でもあります。
tableって「部品」がありますよね。
divは解釈できたらすぐに描画されるんだけども、tableの場合には部品全ての解釈が終わるまで描画が始まりませんので、結果遅くなるという特性。
あと、FC2はSNSのボタンの表示/非表示が選べるようになってますよね。
非表示が選択できる = 表示させるときはJavacsriptを使う
ってことなので、テンプレ内容全て読み込んでから描画が始まります。
SNSボタンは基本的にとっても重たいです (´・ω・`)
だから本当はテンプレソース内に直接記述した方が良いんですけどもね。
(私は入れてますが)
これはFC2の仕様ですから仕方ないことであります ( ゚Д゚)

2015/09/24 (Thu) 13:19 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ