TAテーマ001 画像と文字の回り込み

TAテーマ001 画像と文字の回り込み

テーマ001情報
TAテーマ001 画像と文字の回り込み

 

新聞や雑誌などは写真の周りに記事の文字が回り込んでいますよね。

ホームページも画像に対して説明の文章を回り込ましたい場合があります。

こんな感じです。(ブラウザの幅を狭くすると分かりやすいです)

 


water-13313_640

回折(かいせつ、英語:diffraction)とは媒質中を伝わる波(または波動)に対し障害物が存在する時、波がその障害物の背後など、つまり一見すると幾何学的には到達できない領域に回り込んで伝わっていく現象のことを言う。

1665年にイタリアの数学者・物理学者であったフランチェスコ・マリア・グリマルディにより初めて報告された。

障害物に対して波長が大きいほど回折角(障害物の背後に回り込む角度)は大きい。

回折は音波、水の波、電磁波(可視光やX線など)を含むあらゆる波について起こる。

単色光を十分に狭いスリットに通しスクリーンに当てると回折によって光のあたる範囲が広がり、干渉によって縞模様ができる。

この現象は、量子性が顕著となる粒子のビーム(例:電子線、中性子線など)でも起こる(参照:物質波)。

電子線や中性子線などを結晶などに当てて得られる回折図形から結晶構造の解析を行うことができる。

これは電磁波であるX線でも同様な結晶構造の解析を行うことができる。

それぞれ電子回折法、中性子回折法、X線回折法として結晶構造の解析手法が確立されている。

写真撮影においても、絞りを小さく絞ると光の回折現象により画像の鮮明さが低下する。

(Wikipediaより)

 

フレーム幅に合わせて画像からはみ出した文字は画像の下側に回り込んで配置されます。

ブラウザの幅やズームは閲覧者によって異なるため自動で文字が回り込むようにしたほうが見栄えが良いです。

この回り込み配置はWordPressの標準編集のビジュアルエディターでも可能ですが思い通りにならない場合が多いです。

TAテーマ001のオリジナルタグ(ショートコード)を使用するとこの回り込み配置も簡単に確実に行うことができます。

haichi2

先ず配列グループ全体を[配列(始)]と[配列(終)]で挟みます。

こうすることで自動的に画像とテキストを合わせたボックスの高さが決定されます。

次に左寄せショートコードまたは右寄せショートコードで画像のコンテンツを挟むだけです。テキストはショートコードを使用しないで記入します。

左右寄せショートコード内のw=40は幅のサイズをフレーム(例の場合はメインフレーム)40%にするという意味です。p=20は画像と文字の間の距離を20ピクセルにするという意味です。

左右寄せショートコードは更に細かい設定が可能です。詳しくはこちらをご覧ください。

※ TAテーマ001オリジナルのタグ(ショートコード)はビジュアルエディターの中でも使用できますが、WordPressのビジュアルエディターは使いにくい(思い通りに配置できない)場合が多いためテキストモード(HTML)で編集を行うことをおすすめします。

※ Version2.07から日本語ショートコードの使用は非推奨になりました。現在の取り扱い説明には英数字のショートコードが紹介されていますのでそちらをご使用ください。(日本語ショートコードも有効なのでこれまでのコンテンツを書き直す必要はありません)

 

お役に立てれば幸いです。

«
»
  • LINEで送る


ta_thm001_downloadta_designing