下記コードを記事に適用される場合は、必ず、記事入力欄の右上の『Wiki文法を使用』に、チェックを入れてください。
そして、記事入力欄の右上の『？』を押すと、ヤフー・ブログの『ヘルプ』が表示されます。
この記事では、ブログのレイアウトに関係したコードを中心に、他のブログやホームページの記事を参考にして、まとめてみました。ご参考程度に、下記参照してみてください。。。
イタリック
''イタリック'' 『''』と『''』で文字を囲む。
ボールド（太字）
'''ボールド（太字）''' 『'''』と『'''』で文字を囲む。
太字斜体
'''''太字斜体''''' 『'''''』と『'''''』で文字を囲む。
・一番簡単な線の引き方、
---- 『-』を4つ並べる
・言葉や文章に、リンクを設置するには、
『リンク先アドレス』の後に、半角を空けて、文字を入力する！
[http://リンク先アドレス ここをクリック！] ……『http://リンク先アドレス』をリンク先に変更
・『ここをクリック！』を、お好きな言葉に変えてください。
・記事にリンクしたいときは、記事の一番下に表示されている、記事のアドレスを、コピーして貼ってください。
・引用（枠を付ける）
薄緑色の枠を付ける。『 { 』『 } 』を、それぞれ3つ並べて上下に囲む。
上下に囲まれた部分に、Wiki文法が、原則、適用されなくなる。
Wiki文法コードの説明文を作る際に、良く使われる方法。
{ { {
文字を入力
} } }
『 { 』と『 } 』を、上下に、それぞれ3つ並べるだけです。
上記コードは、表示用に『 { 』と『 { 』の間を開けてますが、必ず詰めて入力してください。
・画像を表示するコード
[[img(画像のコード)]] 画像のコードは、『http://アドレス』になります。
※画像のコードは、画像をマウスで選択し、Windowsなら、『右クリック』⇒『プロパティ』を選択⇒
『アドレス（URL）』の横に表示されます。このコードをコピーして、『画像のコード』に貼付けます。
画像の大きさを変えるには。。。
[[img(画像のコード,横幅,縦幅)]] のように、数値を入れると、画像の大きさが変わります。
[[img(画像のコード,200,200)]] みたいな感じですね！
数値は、みなさんで、自由に設定してみてください！
・センタリングのコード
||<#FFFFFF' style=text-align:center;width:560px; ``(画像のコード) ||
・並べて表示するコード
||||||||
||画像のコード
||画像のコード
||画像のコード
・文字のセンタリング
||<#ffffff'width=560px ``||
||||<#ffffff'``文字入力
下記、色付き文字で、センタリングするコードです。
||<#FFFFFF'style='text-align:center;width:560px;font-size:22pt;
color:#cc99cc'``文字入力||
改行部分のスペースは、消してくださいね。『文字入力』を、『Welcome』等に変えて、使ってみてください。
・色付きの線を引く（カラーコードは、 http://www.tohoho-web.com/wwwcolor.htm）
||<#ff33ff' colspan=4 style='width:560px;padding:0px'``||
||<#0066cc' colspan=4 style='width:560px;padding:0px'``||
||<#ff9900' colspan=4 style='width:560px;padding:0px'``||
・背景を付ける
| 赤色の背景 |
| 青色の背景 |
| 黄色の背景 |
||<#FF9999' style='width:560px'``赤色の背景||
||<#66CCFF' style='width:560px'``青色の背景||
||<#FFFF99' style='width:560px'``黄色の背景||
『〜の背景』の部分を、好きな言葉に変える。
・文字の色を変える
||<#FFFFFF' style='color:Red' ``文字を入力（赤色表示）||
カラー・コードを使用すると。。。
||<#FFFFFF' style='color:#FF0000' ``文字を入力（赤色表示）||
・文字の大きさを変える
||<#FFFFFF' style='font-size:5.5mm' width='280' ``文字入力||
・文字の大きさと色を変える
||<#FFFFFF' style='font-size:20pt;color:Red' ``文字を入力（赤色表示）||
カラー・コードを使用すると。。。
||<#FFFFFF' style='font-size:20pt;color:#FF0000' ``文字を入力（赤色表示）||
・枠を付ける
| 文字a | 文字b |
| 文字c | 文字d |
||文字a||文字b||
||文字c||文字d||
・グラデーション背景
| グラデーション背景 |
||<#FFFFFF' style='width:560px;height:100px;filter:progid:DXImageTransform.Microsoft.
Gradient(startcolorstr=#0000FF,endcolorstr=#FFFFFF,gradienttype=0)'
``グラデーション背景||
コードの改行部分にできるスペースは、消してください。
| グラデーション背景 |
||<#FFFFFF' style='width:560px;height:100px;filter:progid:DXImageTransform.Microsoft.
Gradient(startcolorstr=#0000FF,endcolorstr=#FFFFFF,gradienttype=1)'
``グラデーション背景||
コードの改行部分にできるスペースは、消してください。
・コードの説明
||<#FFFFFF' style='width:560px;height:『画像の大きさ』px;filter:progid:
DXImageTransform.Microsoft.Gradient(startcolorstr=『開始の色』,endcolorstr=
『終わり色』,gradienttype=『方向』)' ``文字||
『方向』は、グラデーションの方向で、上下に展開は「0」。左右に展開は「1」。
・壁紙に、文字を表示
||<#FFFFFF' style='background-image:url(Gif画像のコード)' ``文字||
※Gif画像のコードとは、画像の最後が、『.gif』で終わっているものです。
・応用編
||<#FFFFFF' style='width:560px;height:130px;background-image:url
(Gif画像のコード)' ``文字||
上記は、サイズを横：560px、縦：130pxでサイズ指定しています。
コードの改行部分にできるスペースは、消してください。
この記事を最後まで読んでいただき、ありがとうございました。
Design Blog ☆ブログ入門♪♪＆素材☆
 転載元: Design Blog ☆ブログ入門♪♪→上級＆素材☆
|
コメント（0）
