<--!リンク--> 〇ブログお役だち|(No.1455.1438.1341.1323.1044)| あんなこと、そんなこと、どうでもいいこと・・・

あんなこと、そんなこと、どうでもいいこと・・・

;気まぐれに書いてます^^
あんなこと、そんなこと、どうでもいいこと・・・ TOP  >  〇ブログお役だち

小見出し

fc2ブログや、はてなブログだと小見出しや引用符のボタンがあって、簡単に記事に書けるみたいですけど、アメブロさんには無いのでチョット作ってみました。←暇人(笑)



<div style="border-left:10px solid #000099; border-bottom:2px solid #000099; padding-left:10px; font-weight:bold;">青の小見出し</div>




青の小見出し


____


<div style="border-left:10px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; font-weight:bold;">ピンクの小見出し</div>




ピンクの小見出し


____

<div style="border-left:10px solid #ff0000; border-bottom:2px solid #ff0000; padding-left:10px; font-weight:bold;">赤の見出し</div>




赤の見出し




※カラーコード、#~をお好みで変えてみて下さい。

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定


もう少し、色々やってみようと思いましたが、面倒くさくなったので、やめます。(汗)



ブィブィ(((( ;°Д°))))
スポンサーサイト
[ 2013年10月14日 00:01 ] カテゴリ:〇ブログお役だち | TB(0) | CM(0)

短い「文字」、「言葉」を枠で囲む方法

おはようございます。

短い「文字」、「言葉」を枠で囲む方法をご紹介してみたいと思います。


下のタグの「好きな言葉」のところに、「好きな言葉」を入れて下さい(笑)。

<span style="border-style: solid; border-width: 1px;padding: 0px 0px 0px 0px;">好きな言葉</span>



こんな感じになります⇒好きな言葉



あと、参考までに、タグの意味ですが・・

実線⇒ solid

点線 ⇒ dotted

破線 ⇒ dashed

二重線 ⇒ double

線無し ⇒ none



あと、囲み線の太さは・・

border-width: 1px ←5にすると・・

好きな言葉


文字と囲み枠との余白ですが、数値は左から

、枠内の「上、右、下、左」になります。

padding: 0px 0px 0px 0px ←10px 5px 10px 5pxにすると・・

好きな言葉


さらに応用で、

border-color: red;

を追加して枠線の色を変えることもできます。


好きな言葉


<span style="border-style: solid;border-color: red; border-width: 1px;padding: 0px 0px 0px 0px;">好きな言葉</span>



よろしかったら、参考にしてみて下さい。




[ 2013年10月04日 09:47 ] カテゴリ:〇ブログお役だち | TB(0) | CM(0)

テキストを枠で囲む(角丸)

Touch of Solitude [Explored] - 無料写真検索fotoq
photo by Universal Pops


角丸の囲み枠を作るには、「ブログを書く」のページで「HTML表示」にして以下のような文字列(タグ)を貼り付けます。


<div style="background:#ffeeee; padding:10px; border:1px solid #ff0000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">

・家政婦は見た!なんと、あの真面目なご主人様の浮気の現場を・・

</div>


青字の箇所が背景色です。
ピンクの箇所が枠線の色です。
赤文字の部分の10pxの値を大きくすれば丸みが増します。

⇒カラーコード一覧表

「表示を確認」すると、こうなります。(↓)


・家政婦は見た!なんと、あの真面目なご主人様の浮気の現場を・・



参考になれば、嬉しいのですが・・(^∇^)




[ 2013年08月27日 01:18 ] カテゴリ:〇ブログお役だち | TB(0) | CM(0)

ブログ記事内にメニュウバーのようなものを設置する方法を考えてみました。

Taking The World By Storm - 無料写真検索fotoq
photo by JD Hancock



PCと違って携帯でブログを見ると記事の部分しか表示されない場合が多いようです。

そこで、テーブルタグを使って記事内にメニューバーの代わりになるような物を設置する方法を考えてみました。 

「ブログを書く」画面で「HTML表示」にして以下の文字列を貼り付けて下さい。

<Div Align="center"><Table Border BorderColor="#00ff00" BgColor="#FFFFCC" Cellspacing="2">
<Tr><Td><a href="http://ameblo.jp/wantan-52/entry-11399366601.html" target="_blank">鎌田紘子さん</a></Td>
<Td><a href="http://ameblo.jp/wantan-52/entry-11535143592.html" target="_blank">榮倉奈々さん</a></Td>
<Td><a href="http://ameblo.jp/wantan-52/entry-11522064876.html" target="_blank">坂口杏里さん</a></Td>
<Td><a href="http://ameblo.jp/wantan-52/entry-11397287221.html" target="_blank">重盛さと美さん</a></Td></Tr>
</Table></div>



赤字の箇所に移動先のページ、記事のURLを記入して下さい。
緑字の箇所に表示させたい語句(お店ブログであれば、店までの道順、お客様の声・・等々)を記入して下さい。

こうなります。(↓)


※InternetExplorerとFirefoxでは、動作確認、取れましたが、環境によって反映されない事があろうかと思います。ご了承、下さい。

他にも、CSSを使って、携帯で見たときだけ表示させるとか、いろいろな方法があるようです。

参考の一つとして頂ければと思います。
[ 2013年08月15日 06:15 ] カテゴリ:〇ブログお役だち | TB(0) | CM(0)

ブログに表、テーブルタグ

blog_import_5176093820a91.jpg
$あんなこと そんなこと どうでもいいこと...

さまよえる「ブログの覗き魔?」;^^ワンタンです。

こんばんは。

時々、ブログに表を載せてる方、見かけます。どうやるんだろ~?って思って、調べてみました。

こちらのサイトを参考にさせて頂きました。

■ テーブルの基本(3×3のテーブル)


<Table Border>
<Tr><Td>1列1行</Td>
<Td>2列1行</Td>
<Td>3列1行</Td></Tr>
<Tr>
<Td>1列2行</Td>
<Td>2列2行</Td>
<Td>3列2行</Td></Tr>
<Tr>
<Td>1列3行</Td>
<Td>2列3行</Td>
<Td>3列3行</Td></Tr>
</Table>






赤字の箇所に入れたい文字を入れると、こんな感じになりました。







1列1行2列1行3列1行
1列2行2列2行3列2行
1列3行2列3行3列3行


テキストリンクを入れてみました。


鎌田紘子榮倉奈々桐谷美玲
坂口杏里重盛さと美菜々緒
吉木りさ田中涼子R18指定?



他にも、色々、応用が出来るみたいです。

参考にしてみて下さいね。;^^
ななお





おまけ

・以前,秘密の質問で「母親の旧姓は?」という質問があり、適当に答えを入力した僕は、パスワード忘れで答えにたどり着くことができず、別の方法でパスワードを手に入れて秘密の質問の設定を見てみると、「母親の旧姓は?」「ゴンザレス」になっていた。そりゃ答えられない。;^^


$あんなこと そんなこと どうでもいいこと...

ブフ(≧▽≦)
[ 2013年04月30日 12:36 ] カテゴリ:〇ブログお役だち | TB(0) | CM(0)
プロフィール

awantan

Author:awantan
なんだか良く解りませんが、
ポチポチ頑張ります。;^^

メインは、こちらの方です。

ワンタンのアメブロ

検索フォーム
ブロとも申請フォーム
QRコード
QR