また、ブログをカスタマイズ

またまたカスタマイズの話です。やり出すと止まらなくなってしまうので、暫くはこのデザインで落ち着こうと思います。たぶん……。

Google AdSenseをタイトルエリアから外した

以前は、PC・スマホ共に記事タイトルを挟むようにアドセンスを配置していました。途中から記事タイトル下を外し、数日前にはブログタイトル下のアドセンスも外し、下に追いやりました。

こかげさんのブログでも触れられていますが、ヘッダー付近は、ほぼクリックされませんし、私自身もスルーします。

また、はてなの通知やグーグルなどの検索結果でこのブログにきてくれたのですから、そのまま記事に目を向けてほしい、と思っています。

何らかの収入が入るに越したことはありませんが、先ずは継続してこのブログに来てもらうことを大事にして、あまりガツガツせずにのんびりいきたいと思います。

あと、タイトル下にレクタングルの広告ユニットを貼っているブログを見かけますが、だいじょうぶですか？

蛍光マーカー風のCSS

同じくこかげさんの記事で紹介されていた、蛍光マーカー風のデザインを導入しました。

mu2inさんの元記事はこちらです。

元の記事ではstrongタグを強調するようになっていますが、ちょっと変更しました。変更点は、

• strongタグからクラスに変更
• marginと paddingに別れていたものをmarginにまとめる
• 色のバリエーションを増やした

黄色のマーカーのサンプルです。

CSS

.y-marker{
    margin:0 0.3em;
    background:#FFFF00;
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%);
}

HTML

<span class="y-marker">黄色のマーカー</span>のサンプルです。

緑色のマーカーのサンプルです。

CSS

.g-marker{
    margin:0 0.3em;
    background:#00FF00;
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%);
}

HTML

<span class="m-marker">緑色のマーカー</span>のサンプルです。

マゼンタのマーカーのサンプルです。

CSS

.m-marker{
    margin:0 0.3em;
    background:#FF00FF;
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%);
}

HTML

<span class="m-marker">マゼンタのマーカー</span>のサンプルです。

background:#FF00FF;の、#FF00FFで色を指定できるので、コード表を参照して好きな色に変更することができます。

やりすぎると、
チカチカして大変なことになるので、
ご利用は控え目に。

こうして、CSSがえらいことになっていく……。

※追記

この方法だとお使いのブラウザーによってはベタ塗りになってしまいます。その場合はこちらの方法を試してみるといいかも。