スポンサーリンク
おはようございます。
のムのム
でございます。
最近Googleアドセンスが全てのサイトから全て受かりまして、貼り付けついでにデザインも一部変更しました。
特に下のデザインですが
こちらはお菓子ブログの中のリンクに枠をつけるようにしてみました。
というのも最近「関係記事などのリンク」の重要性がとても痛感しているからです。
こちらのキン肉マンブログですが月10万PVを達成したとは書きましたが読まれている人数は実際の話は半分以下の人数で
一人の方が何ページも読まれて、最終的には10万PVという結果が出ました。これはリンク先に読んでる方が沢山行ってくれて読まれた結果です。
そこで先ほどのようなリンクのデザインなどを強化した形になります。
しかしはてなブログでしたら先ほどのキン肉マンのブログのようなブログカードが出来るのですが、
あれはブログの表示速度を遅くしたり実際に案外テキストリンクとか一緒にないとクリックがされません。
ではあの枠のデザインはどうやってやったかが気になる方もいるかもしれませんので今回は
テキストリンクの周りの「あわせて読みたい」のデザインのやり方
を書いていきます
スポンサーリンク
基本コピペ2回で「あわせて読みたい」の枠は出来る
あの「あわせて読みたい」って枠は実は簡単に出来ます。
参考にしたのは下のブログ
丁寧で分かりやすかったです。
基本は
- ①CSSコードを自分のデザインCSSに貼る
- ②htmlコードを「あわせて読みたい」の枠に入れたいテキストリンクを囲って貼るのみ。
これだけで出来ます。
こちらで説明するよりも先ほどのブログがめちゃくちゃ分かりやすいのでよかったらご確認ください。
「あわせて読みたい」の枠の色を変える
先ほど書いたようにコピペ2回で出来るのですが枠の色が黄色で固定されてしまっているので、自分のブログの色に合わせて枠の色を変えたいという方もいるかもしれません。
それをこちらで書いていきます。
ブログのCSSコードを少し変えます。
上から5番目の
border: solid 3px #ffbb00;
(上の「あわせて読みたい」の周りの色)
上から18番目の
background: #ffbb00;
(枠自体の色)
こちらのコードが枠の色を設定しています。
後半に『#○○○』どありますが、あれが色のコード番号です。
このままですと黄色い枠の線になりますので、ここのコードを変えるだけです。
色のコードが分からないという方は下のサイトから色のコードを選んで張り替えてください。
これで枠も色も変わります。
スポンサーリンク
私はこれを使ってリンクを修正していこうと思っています。
前までは凄く分かりにくく怪しげだったので、これにより読み手が「入っていいんだ」という不安を解消できて
自分のブログを沢山読まれるようになればなぁと思っています。
最後まで見てくれてありがとうございました。
