Article page

by
  • Comment:0
  • Trackback:0

sample自動処理 というと語弊があるかもしれませんが
記事作成時に記述すべき内容を最小限に抑える = 一定スタイルをCSSで操作
こちらの方法ですー (´・ω・`)
リクエストがありましたので記しますが
個人的にはあまりおすすめしません(笑)
理由は後述

float (ふろーと) というのは一般的に「文字の回り込み」と表現されますが
個人的に違和感を感じますので ここでは単純に float という名称そのままで説明していこうと思います

float とはどんなものか こんなものです ↓

float sampleLorem ipsum dolor sit amet, mutat novum dictas vel at. Mea discere contentiones et, ea inani dissentias eam. Congue nostrum efficiantur ad vim, pri ea urbanitas posidonium, vel libris elaboraret ea. Mel principes scribentur cu, nisl oratio perpetua quo ex, nam odio veri eu. Sea suas tantas in, alterum reformidans conclusionemque vix ne. Nec ad augue civibus.
Ut pri quot ludus. Te volumus sapientem usu, mea phaedrum concludaturque id. At quem elit malorum vix, paulo civibus in qui, has regione suscipit an. Nam no novum dictas appellantur, insolens constituam ei usu. Has putent tractatos persecuti ex. Tation vituperata mea et, tollit partiendo salutandi ea quo.


(画像の下にテキストが繰り越さない という方はブラウザの横幅を縮小してご覧ください)

これを実現するための最小限のソースは以下の通り

<img src="画像アドレス" alt="代替テキスト" style="float: left; margin-right: 15px; width: 表示希望横サイズpx; height: auto;">テキスト内容
<div style="clear: both;"></div>


上記はホントに必要最小限のコードです
画像への
<a>
タグ(* アンカータグ = 通常用途はページ遷移させるためのhtml要素)も外してあります
FC2のエディター icon (← これ) から貼り付けた場合には
<a>
タグが付いていますが
意図的に画像を元画像あるいはアルバムへリンクさせたい という希望が無い場合には外しても良いと思います
というよりも外した方が良いと思います(笑)
画像を別タブで表示させる意味というのは 表示サイズが著しく異なるので元サイズで見て欲しい ですとか
アルバムへ誘導したい ですとか
そういった個々の事情によりますけれど
全く同じサイズの画像が別タブで表示されても 見る側としては
「は? (´・ω・`)」
って感じるだけですよね
マウスカーソルが指のマークになれば押したくなるのが人間の心情(笑)

話しが逸れました (・ω・)ゞ
<img>
要素に最低限必要なのは

・画像のアドレス
・alt属性 (* 何らかの理由で画像が読み込めなかった際に表示されるテキスト, 画像を端的に説明する短文テキスト)

この2つです
alt属性は入れておいた方が良いですね
これが抜けているとW3C validation(だぶりゅ すりー しー ばりでーしょん) でエラーの判定を受けます
FC2のサムネイルや絵文字にはこのaltがついてくれませんので 毎回エラー食らって泣きたくなります (´・ω・`)
せめて記事内のものだけは上手にユーザーがコントロール (*´・ω・)ノ ・゜:*:゜

緑色の部分は画像の縦横サイズですが 元画像のままで構わないのであれば省いてもOKです
ただ サイズは明記した方がレンダリングは速いです
元サイズと違う表示サイズにするには 縦横いずれかの希望サイズを記入
もう一方は auto を指定すれば縦横比を維持できますので計算不要です

width="横幅"
height="縦幅"

FC2エディターはこの方式を採用していますが こちらはhtml内容です
上記黒背景の中のソースはCSS内容
html5テンプレートの場合にはCSSで行うのがベスト


紫の部分 これが大変重要です
これが無いとテンプレート全体の構図が狂ってしまいます
ですから必ず書きます

でも忘れるんですよねー (´・ω・`)
というわけで作業の簡略化 れっつごー


毎回記述できる!
という方はそのままで良いですよ
clear: both; ってなんなん そんなの覚えられんしemoji
な方だけ行えば良いと思います
そしてここからの方式は注意が必要です(後述)

テンプレートCSSソース末尾に以下の内容を追加

コード①

.for-float:before, .cf:after {
content: "";
display: table;
}

.for-float:after{
clear: both;
}

.for-float .for-left {
float: left;
margin-right: 10px;
}

.for-float .for-right {
float: right;
margin-left: 10px;
}



上記内容はテンプレートに一度記すだけですので
記事作成時の毎回の処理は不要です
記事作成時には以下の通り記述を行います

コード②

<div class="for-float"><img src="画像アドレス" alt="代替テキスト" style="width: 表示希望横幅px; height: auto;" class="for-left">テキスト内容</div>



ソース説明

コード①
赤字の部分は画像とテキストの間の空白を指定しています
コード内容そのままだと 10px
ここは好みの数値に修正してください

コード②
赤字の部分はFC2エディターには頼れませんので毎回記入します
ふろーと などの読み方で辞書登録しておくと良いかもしれません

画像の位置を左にしたい場合には img への class名に for-left
右にしたい場合には同様の手順で for-right を記述
最後の終了タグ
</div>
は必ず必要ですので忘れない

この方法で行ったfloatのサンプルスクリーンショット ↓

sample



---------

★ 従来の方法(毎回 clear: both 等の細かな指定を記事内で行う) と CSSでの処理で行う方法
双方のデメリット というか FC2仕様

・ 記事作成時のリアルタイムプレビューと 実際の投稿後の姿が異なる

これは仕様ですから仕方がありません
プレビュー画面で本来の形が確認できますので上手に利用します

★ CSS方式のデメリット

・ 一度利用したら恒久的に同じ作業をする必要が生じる

例えばテンプレートを変更したとします
その場合には手順の最初からやり直しです
CSSソースへの追加を常に忘れないことです
そうしないとですね それまでにこの方法で行ったfloatの全てが無効化されてしまいます
これが私がおすすめしない理由ですね (´・ω・`)
そして画像とテキストの空白が常に同じになってしまう ってのもあります
毎回記事作成時にコードが書けるのであれば その都度好きに調整できますもんね


-------------

以上がCSSでの操作の仕方です
くれぐれも私個人としては「勧めない」というのを念頭に
お使いになる方はどうぞ


余談ですが table を利用した擬似floatについて
html4 の時代からそうですが
「tableをレイアウトに利用するべきではない」
ということを言われております
誰が言うってW3Cです(笑)
html5になって「利用するべきではない」が「利用してはいけない」なレベルになっていますので
単に画像とテキストを並べたいのならば div を利用した float という方法をお取りになられることをおすすめ

関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 0

Leave a reply

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