つぎの記事へつなげる枠で囲ったテキストリンクのつくり方 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
おはようございます。

ブログ記事の書き方って、
ごくおおざっぱに分けて
二種類あると思います。

その記事内で一つのテーマを
完結させる完結型。

もうひとつは、映画の予告編のように
「きも」の部分だけ書いて、詳しい
内容は別のページに書く予告編型。

もちろん、そんなきっちり分けられる
ものではないですが。


以前、どなたが言ってたかは忘れちゃいましたが、
記事の最後に設置してあるテキストリンクが、
一番クリック率が高いんだそうです。

よく見かけますよね、(↓)こんなリンク。

>>つづきは、こちら。

>>もっと見る。

これをちょっとだけ、おしゃれにする方法です^^;

$やさしいアメブロカスタマイズ!と女性タレント画像-紙とペン 540x



テキストリンクをHTMLタグをつかって枠で囲む方法


こんなのです。





「ブログを書く」で「HTML表示」にして(タグ編集エディタを採用されている方はそのままで)以下の文字列を貼り付けます。

<div align="center"><span style="border-style: solid;border-color:#0000ff;background-color:#F2F2F2; border-width: 2px;padding: 10px 74px 5px 74px;border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;box-shadow: 5px 5px 5px #99cccc;"><a href="http://ameblo.jp/wantan-52/" target="_blank"><b><font size="4">⇒この続きは、明日の朝刊で・・</font></b></a></span></div>


青字の箇所に移動先のURLを記入します。

赤字の箇所に表示させたいテキスト(文章)を記入します。

緑字の箇所は、枠線の色です。お好みで変更して下さい。

※参考までに
HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

※表示させる文字数が多すぎると、崩れた形で二段になったりしますので、その場合は、文字数を減らす等、調整して下さい。



参考になると、嬉しいのですが・・('-^*)/

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス