|
ブログのバナー画像を使ってこんなリンクはどうでしょう。 帯の長さはブログタイトルや説明文の長さによって変わります。 ↓ブログバナー ↓ブログのリンク ↓説明文
↓これがコードです（帯色は紫色） ||<#FFFFFF' ``|| ||<#B58FDA'style='width:88px;``[[img(ブログバナーのURL,88)]] ||<#FFFFFF'style='filter:chroma(color=#FFFFFF) mask(color=#B58FDA);'``[ブログのURL ブログタイトル] ||<#B58FDA'style='color:#FFFFFF;'``説明文テキスト ||<#FFFFFF' ``||◆手順 �．丱福鴫菫�のURLを入れる。 バナーを右クリックしてプロパティを開き、URLをコピーして貼り付けます。 �▲屮蹈阿�URLを入れる。 ブログタイトルを右クリック。�，汎韻犬茲Δ謀修衂佞韻泙后� ブログタイトルもコピーして入れます。 URLとタイトルの間は必ず半角スペースを入れてくださいね。 ��説明文を入れます。 あまり長いと１行で入らないので注意します。 ◆色見本とコード （ピンク）
（赤）
（緑）
（青）
（ピンク） ||<#FFFFFF' ``|| ||<#D580BF'style='width:88px;``[[img(ブログバナーのURL,88)]] ||<#FFFFFF'style='filter:chroma(color=#FFFFFF) mask(color=#D580BF);'``[ブログのURL ブログタイトル] ||<#D580BF'style='color:#FFFFFF;'``説明文テキスト ||<#FFFFFF' ``|| （赤） ||<#FFFFFF' ``|| ||<#D58095'style='width:88px;``[[img(ブログバナーのURL,88)]] ||<#FFFFFF'style='filter:chroma(color=#FFFFFF) mask(color=#D58095);'``[ブログのURL ブログタイトル] ||<#D58095'style='color:#FFFFFF;'``説明文テキスト ||<#FFFFFF' ``|| （緑） ||<#FFFFFF' ``|| ||<#40BF9F'style='width:88px;``[[img(ブログバナーのURL,88)]] ||<#FFFFFF'style='filter:chroma(color=#FFFFFF) mask(color=#40BF9F);'``[ブログのURL ブログタイトル] ||<#40BF9F'style='color:#FFFFFF;'``説明文テキスト ||<#FFFFFF' ``|| （青） ||<#FFFFFF' ``|| ||<#6495ED'style='width:88px;``[[img(ブログバナーのURL,88)]] ||<#FFFFFF'style='filter:chroma(color=#FFFFFF) mask(color=#6495ED);'``[ブログのURL ブログタイトル] ||<#6495ED'style='color:#FFFFFF;'``説明文テキスト ||<#FFFFFF' ``|| ◆Ｑ＆Ａ Ｑ．帯色を他の色に変えるには？ Ａ．★の部分にお好きな色のコードを入れます。 Ｑ．バナー画像が乱れるときは？ Ａ．88×31で作っている人が多いので、ここでのコードはこのサイズに合わせてあります。 これより大きいバナーを入れて画像が乱れるときは、サイズを変えてみてください。 バナーを右クリックしてプロパティを出し、大きさを確認します。左側の数字を●に入れます。 ||<#FFFFFF' ``|| ||<#★'style='width:88px;``[[img(ブログバナーのURL,●)]] ||<#FFFFFF'style='filter:chroma(color=#FFFFFF) mask(color=#★);'``[ブログのURL ブログタイトル] ||<#★'style='color:#FFFFFF;'``説明文テキスト ||<#FFFFFF' ``|| ◆色指定には、カラーコードを使用してください。
◆緑枠内のコードをそのままコピー＆ペーストして使えます。 ◆『Wiki文法を使用』に必ずチェックを入れてください。 |
★リンクの作り方★
-
詳細
全1ページ
[1]
コメント（12）
コメント（12）|
いろいろなリンク記事を勉強して来ましたが、 リクエストがあったので、最後に画像をバックにしたリンクを作ります。 ちょっと難しいけど、オリジナル度アップ間違いなしです＾＾
��基本はこれ。
||<#ffffff' style='background-image:url(画像のアドレス)' ``[リンクのアドレス ☆ Kiyo blog ☆ ]|| ��文字サイズ指定（12pt）+フォント指定（HGP創英角ﾎﾟｯﾌﾟ体）
��文字サイズ指定（14pt）+フォント指定（メイリオ） 帯の長さ左右いっぱいに伸ばすと、大きな柄も出やすいです。
文字サイズやフォントはお好みで変えてください。 �◆ 、�文字サイズ ↓フォント指定 ||<#ffffff' style='font-size:12pt;font-family:HGP創英角ﾎﾟｯﾌﾟ体;background-image:url(画像のアドレス)' ``[リンクのアドレス ☆ Kiyo blog ☆ ]|| �� ||<#ffffff' style='font-size:14pt;font-family:メイリオ;text-align:center;width:540px;background-image:url(画像のアドレス)' ``[リンクのアドレス ☆ Kiyo blog ☆ ]|| ◆応用編 「帯に枠を付ける」 ��枠付きの帯にもできます。（文字は太字になっています）
��文字サイズ指定（12pt）+フォント指定（HGP創英角ﾎﾟｯﾌﾟ体）
��文字サイズ指定（14pt）+フォント指定（メイリオ）+帯の長さ左右いっぱい
�ぁ 、�枠の色 ↓枠の幅 ||<#ffffff' style='border-style:solid;border-color:powderblue;border-width:2px;background-image:url(画像のアドレス)' ``'''[リンクのアドレス ☆ Kiyo blog ☆ ]'''|| �� ||<#ffffff' style='border-style:solid;border-color:Gold;border-width:2px;text-align:center;font-size:12pt;font-family:HGP創英角ﾎﾟｯﾌﾟ体;background-image:url(画像のアドレス)' ``[リンクのアドレス ☆ Kiyo blog ☆ ]|| �� ||<#ffffff' style='border-style:solid;border-color:Gold;border-width:2px;text-align:center;font-size:14pt;width:540px;font-family:メイリオ;background-image:url(画像のアドレス)' ``[リンクのアドレス ☆ Kiyo blog ☆ ]|| ◆ギモン？ 画像のアドレスを知るには？ 使いたい画像を一度記事にアップしておく必要があります。 非公開記事を作り、そこにまとめておくと便利ですよ。 アップしたら、記事の画像を右クリックしてプロパティをクリックします。 別ウィンドウが開かれたらアドレスをコピーします。 これを画像のアドレスとして、使いたいコードの中にペーストすればＯＫです。 できましたか？ ◆その画像注意！！ この記事の中で使用しているのは背景用の素材です。 もし、あなたがもらって来た背景用以外の素材を使う場合は注意が必要です。 素材の加工が禁止されているものだとしたら、こういう使い方は出来ないかもしれません。 その場合は素材の持ち主に必ず確認をとってくださいね。 できれば背景用の画像を使うか、オリジナルを作ることをお勧めします。 ◆リンクの文字色は背景によって異なります。
◆色指定にはカラーネームを使用しましたが、カラーコードでも使用できます。 ◆緑枠内のコードをそのままコピー＆ペーストして使えます。 リンクアドレスと文字の間に半角スペースを入れるのを忘れないでね。 ◆『Wiki文法を使用』に必ずチェックを入れてください。 カラーチャートはこちらを参考にしてください。 |
こちらの帯のリンクは文字が白抜きになります。
↓帯の色 ||<#FFFFFF' style='filter:chroma(color=#FFFFFF) mask(color=plum);' ``[アドレス ☆ Kiyo blog ☆]||文字の長さによって帯も長くなりますよ。 例えばこんな感じ。
◆帯リンク【応用編】 文字を太字にするとこんな感じ
太字指定↓ ||<#FFFFFF' style='filter:chroma(color=#FFFFFF) mask(color=cornflowerblue);' ``'''[アドレス ☆ Kiyo blog ☆]'''|| ↑ 文字サイズをアップすると、帯の幅と長さが文字に合わせて広がります。（文字は太字）
↓文字サイズ ||<#FFFFFF' style='font-size:14pt;filter:chroma(color=#FFFFFF) mask(color=mediumaquamarine);' ``'''[アドレス ☆ Kiyo blog ☆]'''|| 帯の長さを左右いっぱいにして文字をセンター合わせに
||<#FFFFFF' style='width:540px;text-align:center;filter:chroma(color=#FFFFFF) mask(color=lightcoral);' ``[アドレス ☆ Kiyo blog ☆]|| 文字サイズを大きくすると、帯の幅が広がります。（文字は太字です）
↓文字サイズ ||<#FFFFFF' style='width:540px;text-align:center;font-size:14pt;filter:chroma(color=#FFFFFF) mask(color=lightsteelblue);' ``'''[アドレス ☆ Kiyo blog ☆]'''|| 色はカラーチャート�気鉢兇�ら選んでいます。 ◆文字をお好みの色や大きさに変えられます。
mask(color=plum)＝文字の色 font-size:14pt＝文字の大きさ ※色指定にはカラーネームを使用しましたが、カラーコードでも使用できます。 ◆緑枠内のコードをそのままコピー＆ペーストして使えます。 リンクアドレスと文字の間に半角スペースを入れるのを忘れないでね。 ◆『Wiki文法を使用』に必ずチェックを入れてください。 背景を変えると色文字リンクが表示されないことが判明しました。（背景によります）
この記事は最初「色文字＆色帯リンク」という記事にしていましたが、 色文字の記事のみ削除させていただきました。 （2008.3.26修正） |
|
普通に文字リンクを張るとこうなりますよね。→ ☆ Kiyo blog ☆ 太字にしたり、みどりマーカーで協調することもできますが→ ☆ Kiyo blog ☆ もっといろんなデザインでリンクを作ってみたいと思いませんか？
文字を違うフォントで作ってみましょう HG丸ｺﾞｼｯｸM-PRO
HGP創英角ﾎﾟｯﾌﾟ体
↓こちらがコードです。お好みのフォントを入れて使ってください。 ||<#FFFFFF' style='font-family:"HGP創英角ﾎﾟｯﾌﾟ体'``[アドレス ☆ Kiyo blog ☆ ]|| ↑フォント ↑半角スペースを入れる もうちょっと大きい文字にしてみましょう メイリオ、14pt
江戸勘亭流、14pt
↓こちらがコードです。数字を変えると文字サイズの変更が出来ます。 ||<#FFFFFF' style='font-size:14pt;font-family:"江戸勘亭流'``[アドレス ☆ Kiyo blog ☆ ]|| ↑文字サイズ ↑フォント 調子に乗ってフィルターのコードも入れちゃいます＾＾
フォントと文字サイズの変え方はもうわかったかな？ ||<#FFFFFF' style='filter:Blur(strength=5,direction=45);font-size:14pt;font-family:"HGP創英角ﾎﾟｯﾌﾟ体"'``[アドレス ☆ Kiyo blog ☆ ]|| ◆リンクの文字色は背景のデザインによってそれぞれ異なります。
◆緑枠内のコードをそのままコピー＆ペーストして使えます。 リンクアドレスと文字の間に半角スペースを入れるのを忘れないでね。 ◆『Wiki文法を使用』に必ずチェックを入れてください。
制作元
|
全1ページ
[1]
