きまぐれAWA's Life

アクセスカウンタ

zoom RSS ブログ(小ネタ編)記事内に特殊文字を表示する

<<   作成日時 : 2010/02/09 19:47   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 1 / コメント 6

こんなことを経験した時ってありませんか?



タグの説明するためにブログの記事に画像のタグを書いてみたけれど…
タグじゃなくて画像が表示されちゃったし(@んが)!?


画像
※ 画像は記事内容に関係するものではありません




タグの説明をしたいけど、肝心な部分が消えてしまっては困ります(あれ)

え?あまりない?(まじ)(ぱー)


…というわけで(@まじ) ←※聞こえないふり(笑)
今回はブログ記事内に特殊文字を表示する方法です(@にこ)




では、上で使った画像挿入タグを表示してみますね(ん)


<img src="画像URL" width="350" height="390" alt="画像" />

※ 画像のURLは任意


このように画像に変換されることなく、タグで表示することも可能なんですね(にや)

タグに使われている『<』や『>』は特殊文字で、文字コードでも表示できます。
文字コードで『<』や『>』を書くとタグをそのまま見せることも出来ます(*・ω・)b ネッ

『<』や『>』の文字コードはそれぞれ以下のようになります。

< → &lt;
> → &gt;




これを踏まえて(まじ)
画像挿入タグを記事内に書く場合は以下のように書けばOKです。

■ 記入例 ■
&lt;img src="画像URL" width="350" height="390" alt="画像" /&gt;

■ 記事内での表示 ■
<img src="画像URL" width="350" height="390" alt="画像" />




記入例では画像挿入タグで説明しましたが、他のタグでも使えます(にこ)

■ 文字に色をつけるタグ
<span style="color:#0033FF">この中の色が青くなります</span>
この中の色が青くなります

■ 文字を強調するタグ
<strong>この中の文字が太くなります</strong>
この中の文字が太くなります



などなど(ん)





特殊文字はこれの他にもいろいろあるのですが…。
どうしても使わなければ〜というのはあんまりないので割愛します(気まずい)


でも…(@まじ)

■ 半角スペース → &nbsp;

とか…(@まじ)

■ コピーライト → &copy;

あと…(@まじ)

■ & → &#38; ※実はこの記事でも大活躍(笑)


…みたいに、あえてブログで使える特殊文字もちらほらあったりしますね(ん)




さて、これらの文字コードを使うときに気をつけたいコトがあります。
ウェブリでは、この文字コードが変換されて表示されるスペースが限定されます。

■ 文字コードの変換がされるスペース
・ ブログ紹介文(トップページ)
・ 記事本文(記事ページ)
・ フリースペース(1・2・3)

■ 文字コードの変換されないスペース
・ 新着記事の記事題名(トップページ)
・ 新着記事の記事概要(トップページ)
・ 記事題名(記事ページ)
・ コメント(記事ページ)


文字コードを使用する場合は使う場所に気をつけてくださいね(ん)




それでは、今回はこのくらいで(にこ)

|ω・)ノシ See you♪

|彡 サッ





■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 1
なるほど(納得、参考になった、ヘー)

トラックバック(1件)

タイトル (本文) ブログ名/日時
記事ごとに画像を変える方法
mairisさんが参考記事を書いてあったので ...続きを見る
ピンクの作品展
2010/02/15 14:26

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(6件)

内 容 ニックネーム/日時
ほほぉ(まじ)
まぁだ私が必要とする事はなそうですがなるほどねぇ
と 思う内容ですね

今後もガンガンブログ用ネタもお願いします(ぺこ)
今一番やりたいのは、mairisさんみたいにプロフ?を画像に乗っける事
なぜか マージンとかパデントでは画像の下に隠れるし、
トップ記事紹介まで画像の下にいくのよねぇ(かなし)
画像の中でも上の方に入れたいのだけど、無理っぽいのかなぁ
mairisさんは画像を二つに分けて、トップ画像とプロフ画像にして
プロフ画像側にdivで乗っけてるのですかね?(うる)
れき
2010/02/09 20:11
タグとか文字コードとかサッパリですが、
いぢいぢるーこがカワイイ(すき)♪
ふら
URL
2010/02/09 21:59
れきさん、いらっしゃいませ(ん)

今回はあまり使い道のなさそうな話でしたね(気まずい)
こんなコトも出来るのね〜ってくらいで見てください(にや)

そういえば、コメント欄でも文字コード使えないってかくの忘れてるや…(@あれ)

>プロフ
うちの場合はタイトルとプロフで画像2分割にして、
CSSで背景画像の指定をしています。
紹介画像は無しにしてまして、プロフ紹介分をdivで括ってクラス指定、そしてマージンで位置調整を…
ってややこしいかな(気まずい))
mairis
2010/02/10 10:16
ふらさん、いらっしゃいませ(ん)

そっちかですか〜っw ヾ(≧∇≦*)ノ
かなり前のSSなんですけど、セシの「┐(@しょぼ)┌」ってSS使おうと探してたら目に付いたSSだったり(にや)b
なんかイジイジが可愛かったので採用しました(ん)
mairis
2010/02/10 10:21
mairisさん

(o´ノωノ`o)こんにち・・ヽ(o´・∀・`o)ノわぁ♪(三角帽子)

参考にさせていただきます。
もしよければいくつか紹介してもよいですか??

pinku
2010/02/10 12:50
pinkuさん、いらっしゃいませ(ん)

あんまり使い道は少なそうですが、覚えておくと役に立つことも・・・
あるかもしれません(気まずい)b
紹介とかはぜんぜんOKです(ん)

あ、そうそう(まじ)
遅くなりましたがファビコンを指定方法を書いた記事を上げてあります。
また見てください(にや)

・ブログ(小ネタ編)ウェブリでファビコン?【※強く非推奨】
http://mairis.at.webry.info/201001/article_43.html
mairis
2010/02/10 19:47

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

ブログ(小ネタ編)記事内に特殊文字を表示する きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる