アメブロ、WordPressで文章枠ごとリンクを貼る方法

「こんなのあったらいいなぁ~」を形にしてみました!しっかり説明も入れるんで、きっとあなたにもできるはず!!

文章枠ごとリンクを貼る方法

▼こんな感じのものを作ります

▼貼付コードがこちら

<div style="width: auto; max-width: 9999px; border: 1px solid #000555; border-radius: 3px; margin: 10px 0; padding: 15px; line-height: 1.4; text-align: left; background: #f9f9f9;"><a href="ここにリンク先URLを入れる" rel="noopener" style="display: block; text-decoration: none;" target="_blank"><span style="color: #000555;"><span style="font-size: 112.5%; font-weight: bold; margin: 0px 0px 5px;">タイトル</span></span><br>
<span style="color: #000000;">ここに説明などを入れる</span></a></div>

 

枠の色の設定:border: 1px solid #000555 ←このカラーコードを変更すると枠の色が変わります

枠の中の背景色:background: #f9f9f9 ←このカラーコードを変更すると枠の中の色が変わります

ここにリンク先URLを入れる にURLを貼り付けることを忘れずに!!

文字の色:タイトル、説明部分のそれぞれの色は color: #000555←このカラーコードを変更すると文字の色が変わります

あとは、「タイトル」「ここに説明などを入れる」の内容を変更してください。

使用例

>>アメブロでの使用例

まとめ

如何でしたか?ある程度コードがわかってくるとオリジナルの枠や色などでアレンジも可能になってくるかと思います。是非やってみてください。

宜しければ、Facebookページに『いいね!』をお願いします

コメントを残す

ABOUTこの記事をかいた人

流れ構築プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。