INDEX    RSS    ADMIN

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

写真(画像)に文字を回り込ませる最も簡単な方法

最近よく多用している技の一つを紹介しておきます。
写真(画像)に文字を回り込ませる最も簡単な方法です。

以前はTableタグを使って作っていましたが、けっこう面倒でした。
"div" (ボックス要素)とスタイルシートの "float" (回り込み)を使って作る方が
分かりやすくて簡単です。
もっと早く気付けば良かったと後悔しています。(笑)

■divを横に並べて作ります。
ここにテキストが回り込みます。
○○○○○○○
○○○○○○○

--回り込みを解除--


<div style="float: left; margin-right: 15px; left; margin-left: 0px;">
<img src="画像のURL" alt="" border="0" />
</div>
<div>
ここにテキストが回り込みます。<br />
○○○○○○○<br />
○○○○○○○<br />
</div>
<p style="clear: both;">--回り込みを解除--</p>

ここにテキストが回り込みます。
○○○○○○○
○○○○○○○

--回り込みを解除--


<div style="float: right; margin-right: 15px; left; margin-left: 0px;">
<img src="画像のURL" alt="" border="0" />
</div>
<div>
ここにテキストが回り込みます。<br />
○○○○○○○<br />
○○○○○○○<br />
</div>
<p style="clear: both;">--回り込みを解除--</p>

ここにテキストが回り込みます。
○○○○○○○
○○○○○○○

--回り込みを解除--


<div style="float: left; margin-right: 15px; left; margin-left: 0px;">
<img src="画像のURL" alt="" border="0" />
</div>
<div style="float: left; margin-right: 15px; left; margin-left: 0px;">
<img src="画像のURL" alt="" border="0" />
</div>
<div>
ここにテキストが回り込みます。<br />
○○○○○○○<br />
○○○○○○○<br />
</div>
<p style="clear: both">--回り込みを解除--</p>


FC2ブログ以外でもこの方法で大丈夫だと思います。
"float" が理解できるとウェブサイトの枠組みもスタイルシートで作れるようになります。
基本はここで紹介している方法と同じなのでむずかしく考える必要はありません。

前に似たようなヒナ型を作って紹介しましたが今思うと意味が分かりません。(笑)
Tableタグは表を作る時だけ使用することをおすすめします。

Tableタグ → div要素に変更するメリットです。
スタイルシートを触り始めた頃の記事なのにツボを抑えていたので驚きです。
サイト(ブログ)の表示速度
スポンサーサイト

READ MORE

READ MORE

READ MORE

画像(バナー)の枠線を消す方法

最近「CSS」が、どういう意味なのか知りました!

ブログはじめてから何度か「CSS」という言葉は
見かけたのですが、スタイルシートの事だったんですね(笑)

CSSとは「Cascading(カスケーティング) Style Sheets
の略でフォントや文字の大きさ、色などのデザイン的な指定を
HTMLの文書とは別に切り離して記述する事が出来ます。

なるほど!

READ MORE

テーブルの位置

おはようございます。

完璧です。 (*´艸`)

<table>
<tr><td align="right">
←こいつが原因
~~~
</td></tr></table>


これで、テーブル内の位置調整ができます!

「left(左)」 「center(中央)」 「right(右)」

から選びます。
テーブル自体の位置調整は

<table align="位置指定">

リンクの小窓表示

「人気ブログランキング」に登録しました!
少し訪問者が増える事を期待してます。 (*´艸`)

 ←ランキングでの投票になります♪

Googleで「ブログランキング」と検索すると、
人気ブログランキングはトップに表示されます。

登録してバナー(ランキング用のリンク)を貼るだけでも
検索エンジン対策に、有効かもしれませんねー。
(引っぱって貰えるかもしれません。)

ヘルプテキストについて

READ MORE

テーブルマジック(その2)

やってみた
ここに画像
説明 ①
ここに画像
説明
見出し

解説 ①
解説 ②

ここに画像
説明 ③
ここに画像
説明 ④
ここに画像
説明 ⑤
ここに画像
説明⑥
ここに画像
説明 ⑦
ここに画像
説明 ⑧
つくり方。

READ MORE

文字をボタンにする

●リンクの文字をヘコます方法。
私の使用しているブログテンプレートでは、スタイルシートのリンクの指定で


a:hover { color: #000000;position:relative;top:1pt;left:1pt;}


a:hover の部分に赤色を追加します。
top は上から、left は左から、ずらす位置を指定して作成します。

チョットここだけの話です。→

READ MORE

別窓で開く

こんばんわ????
えっと……そろそろ、いろいろ紹介したりする記事かきたいんですけど……
まだまだ先になりそうな予感です……汗

本日からランキングで応援して下さるお方の為にリンク先を別窓で開くって設定に変えました!!!

これって結構 重要ですね!!!!

自分で、ちょっとウザイって思ってて……。。
(あっ!!ちなみにネットのブラウザはSleipnir使ってます)
色々な方々のブログを見るとか、ネット検索とかしとくもんですね☆

皆さん、これまでご迷惑おかけしました……。
そして、それでもポチして下さる方!!!本当にありがとうございます。
進化するブログ「はぢめてのブログ」をこれからも

なガーーーーーーーーーーーーーーーーーーーーい目で
応援してやって下さい。。。


そういえば、自分がなんでアフィリエイト知ってるのか今頃になって気になってます……。

会社の先輩はアフィリエイト自体 聞いたことがなかったみたいで……。
◎今日覚えた事
<~"http://ランキングURL" target="_blank"
赤色を追加で別窓で開けます☆

プロフィール

nano

Author : nano
ホームページ作成からウェブニュースまでインターネットに関連した記事を不定期で更新中。IT技術の進化とともに便利になるサービスやシェア・フリーソフト、アフィリエイトサービス、ホームページ作成ツールなどについて書いてます。情報は遅れています(笑)

はてなブクマの人気エントリ

最近のトラックバック

最近のコメント一覧

タグクラウド

Archive Calendar

Sun Mon Tue Wed Thu Fri Sat
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

バックナンバー

モバイル

携帯電話でQRコードを解析すると外出先からも簡単にブログを見ることが出来ます。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。