Article page

by
  • Comment:8
  • Trackback:0

* 一部加筆しました *

ちょっと気になったもので記そうと思います
記事中でhtmlを扱われる方 加えて文字に装飾をされます方
記事を書きながらエディターの「大」(文字大きさ変更)や「B」(文章の強調) などを使っていませんか?
装飾の基本は「一番最後の最後に行う」です

これ何故かと言いますと html,CSSをご存知の方はわかると思います
エディターというのはつまるところが「html,CSS入力補助」ですから
エディターツールを使った時点でhtml構文・CSS構文を利用しているわけです

特に「文字に関するツール」を利用されますと 補助されるタグは以下の通り(文字サイズを大きくする場合)

<span style="font-size:x-large;">大きい文字</span>


こんな風にでてきますよね
span から始まって /span まで
これに挟まれた文字列のみが装飾対象になります
言い換えると これに挟まれた文字列は対象になってしまいます
最初の
<span>
を「開始タグ」最後の
</span>
を「終了タグ」と言います

この span というタグは「インライン要素」と呼ばれるもので 特徴としては

・ 他のものと横並びにできる
ブロックレベル要素を挟むことはできない
・ インライン要素を挟むことができる

こんなのがあります
ブロックレベル要素というのは「表」なんかがそうですね
特徴

・ 他のものと基本的には横並びにできない
・ インライン要素を挟むことができる
・ ブロックレベル要素を挟むことができる

----------

上で述べましたように「文字装飾」に利用されるタグは span というインライン要素です
普通はこうしますよね ↓
span開始タグと終了タグの間にある文章「大きい文字」を消去して
その部分を書きたい内容に置き換えて書いていく
そこでさて表を入れてみようと思う

ちょっと待って ストップ (´・ω・`)
表を作成する tableタグはブロックレベル要素ですから
そのまま書いてしまうと構文エラーですよ!
span終了タグを書いてからにしなければ!

でも大抵そのままやっちゃうんです
よくおわかりの方はちゃんと
</span>

の「外」に書くんですけどもね (´・ω・`)
うっかりってのももちろんありますよね
「表」の他にも「画像横テキスト回り込み(float)」なんかもブロックレベル要素を扱いますので注意が必要

というわけで これを避けるためには
エディターのツールを利用する装飾はすべての記事内容を書き終えてから」を徹底します
変更したい文章をドラッグ選択しておき その上で該当ツールをクリック
選択した部分だけが開始タグと終了タグに挟まれます

<div>内容</div>

<table>内容</table>


上記のような文字列があったならばそれはブロックレベル要素ですから
ドラッグ選択範囲に巻き込まないことが一番大事

これなにもFC2に限ったことでなく どこのブログサービスでも同じです
レイアウトが崩れる原因は記事の作成の仕方にも罠がありますよ
というTIPSでございました
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 8

なつき  

いつも丁寧な説明をありがとうございます。
本当にあきらさんは親切ですね(((o(*゚▽゚*)o)))
ブログをはじめた頃はこういうのが全然わからなくて苦労しましたw
装飾は一番最後に!ですね♪(v^_^)v
このテンプレートも素敵ですね〜☆♪

2015/09/24 (Thu) 22:45 | EDIT | REPLY |   
Akira  
To なつきさん

こちらこそいつもありがとうですe-257
わからないのが当たり前だと思います。
開始タグ?終了タグ?なんやそれ (´・ω・`)
な方の方が多いです。
知らなくちゃダメ!といった強い言い方ではなく、
知っておくと便利だよ。ぐらいで(笑)
作業を単なる流れ作業でなく、意味をわかって行うことで問題解決能力は飛躍的に向上しますよね。
理解して行うことで非効率から効率化へ、みたいなー (´・ω・`)

2015/09/25 (Fri) 12:28 | EDIT | REPLY |   
tak  

こんにちは。
今のテンプレにかえさせてもらってからPS3でブラウジングできなくなったとのコメントをいただきました。

http://sgourmet.blog94.fc2.com/blog-entry-2249.html#comment7176

なにか対処法をご教示ねがえませんでしょうか?

2015/09/28 (Mon) 15:36 | EDIT | REPLY |   
Akira  
To takさん

んー。たぶんこれですよね ↓

http://hamalog.tumblr.com/post/3462192043/ps3%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E7%89%B9%E5%BE%B4

HTML5技術は全て無視される = 未対応
複雑なJSも動かない = たぶんJqueryも無理

特にJS関係が弱いみたいですね (´・ω・`)
JSなし、HTML4規格のテンプレートに変更されるしか手は無さそうですけれど...。
前のテンプレはParadisoをお使いくださってましたよね。
あちらはHTML5ですけれど、スライダーなんかは導入していないのでJSはそんなに入れてないんです。
前のは閲覧できていたのかしら (´・ω・`)

2015/09/28 (Mon) 17:07 | EDIT | REPLY |   
Akira  
To takさん

たぶんJqueryも無理、もなにも、動かないって書いてあった(笑)
今のJSってJqueryが主流ですから、ちょっと厳しいんじゃないかなーe-351

せっかくご覧頂いてるんだから無下にはできないですよね。
PS3ブラウザは結局のところ、レンダリング能力としてはie8と同程度だと思うんです。
そもそも私はie8さえ切り捨てですので難しいです。 はい (´・ω・`)

2015/09/28 (Mon) 17:09 | EDIT | REPLY |   
tak  

ありがとうございます。
ちなみにAkiraさま製作でJSなし、HTML4規格のテンプレートはどれになりますか?
よろしくお願いいたします。

2015/09/28 (Mon) 17:25 | EDIT | REPLY |   
Akira  
To takさん

無いです!
すみません(笑)

そもそもFC2を開設したのは、ie強制互換が外されて5が使えるようになったからなんですよ (´・ω・`)

PS3ブラウザで見られるテンプレートというと、2013年辺りまでにリリースされてるいるもの…とかかな〜。
わからん ヾ(´・ω・`)
最近のものでもあるにはあるでしょうけれど、とにかくJSの無いもの…。
ページtopボタンなんかもJSですし、FBのボタン類もFC2がJS使って表示させてるんですよね。
うーん、厳しいと思われ (´・ω・`)
逆にどのテンプレートなら見れていたのでしょう。
それしかヒントになりそうもない ( ̄∀ ̄;)

これなんかも参考になるかな。

http://app-review.jp/news/156444

ただいくら紐解いたところで、見られないものは見られないわけですよ(笑)
現在・未来を取るか、過去を取るか。
難しい判断ですけどね。
公式のテンプレートは古いブラウザへの配慮がされている(と私は感じている)ので、JSも少なめですよ。
SNSボタン類はもう仕様なので仕方がないとして(ただその方がボタンを見られないだけのことだと思いますのでそんなに影響はないはず)
最近リリースされたレスポンシブデザインは除く、でございます (´・ω・`)
ちょっと古めの公式テンプレでお探しになると良いかもしれません。

2015/09/28 (Mon) 17:35 | EDIT | REPLY |   
Akira  
To takさん

一つだけ。
えっとですね、文献を読む限りでは
「フラッシュは結構いける」
みたいなこと書いてあります。
で、JSが無いと演出的には寂しくなるもんですから、フラッシュで補いたくなるかもしれません。
ところがフラッシュというのはスマホやタブレットからは一切見られません(古いAndroidをアップグレードせずにお使いになってる場合以外は)から、フラッシュを多用するというのはモバイルユーザーを捨てることにもなりかねません。
それだけご注意、ということで ( ゚Д゚)ノ

ザっと共有の方も拝見しまして、男性ですから女性的なものを省くと、
個人名出して良いものかアレですが、
サンエタさん(出しちゃった。すみません((((笑))の作品はJSなし、transitionalですね。
あとほとんどの公式はいけるんじゃないかしら。
(basic_whiteを含むそれ「以前」のリリースものならば)

2015/09/28 (Mon) 17:48 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い