ブログに使っているCSS・スクリプトまとめ - なまこマンの毎日ゲーム宣言！

当ブログおよびメインブログでは、はてなブログやWordPress（Cocoonテーマ）のデフォルトデザインにカスタムCSSやスクリプトを追加し、見やすく親しみやすい表示になるよう調整しています。

今回は、実際に使用しているCSSやスクリプトについて、実装している処理の内容を備忘録としてまとめました。

ブログにCSSやスクリプトを新たに追加したら、この記事にも随時反映させます。

（※他のブログやサイトで紹介されていたコードを参考にしたものも含まれます。その出典についても併記しています。）

広告表示・非表示制御
- 「広告不要」を隠す
吹き出し
- 強調表示
バナー表示位置のレスポンシブデザイン対応
スクロールボックス
プルダウンメニュー
リンクテキストの色を変更

広告表示・非表示制御

はてなブログにて使用

Google Adsenseの広告ユニットについて、特定の記事やページで非表示にする処理をJavascriptで実装しています。

アドセンスの規約上、広告ユニットはCSSの「display:none;」で非表示にしてはいけないことになっていますが、「そこまで深刻な規約違反ではない」という説もあるようで…*1。

とはいえ、対応できるならしておくに越したことはないので、以下のスクリプトではポリシー違反を回避しつつ広告表示の制御を実装しています。

<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //広告を設置しないタグを指定
var pageTags=document.getElementsByTagName("meta");
function adsFilter(){
    for(var i=0;i<pageTags.length;i++){
        if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag == pageTags[i].getAttribute("content") ) ){
            document.write("<!--");
            break;
        }
    }
}
adsFilter();
</script>

こちらの記事でも解説しています。

namakoman.hatenablog.jp

こちらのブログ・サイトのスクリプトを参考にしました。

www.yutorism.jp

hapilaki.net

「広告不要」を隠す

はてなブログにて使用

特定の記事にて広告ユニットを非表示にするために、広告非表示にしたい記事を格納する「広告不要」というカテゴリーを作成しています。

記事に「広告不要」カテゴリーへのリンクが表示されないよう、CSSでブロックしています。

    .categories a.category-広告不要 {
    display: none;
}

こちらのブログのコードを参考にしました。

www.best-luck.work

吹き出し

はてなブログ・ワードプレスにて使用

これですね。

記事の見た目を彩りつつ、キャラクターの会話形式で軽い読み口の記事に仕上げるために、CSSで吹き出しを実装しています。

.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border: 2px solid #999;
border-radius: 10px;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 110px;
height: 110px;
top: -10px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.entry-content .l-fuki::after {
right: -120px;
}
.entry-content .r-fuki::after {
left: -120px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 80px;
height: 80px;

}
.entry-content .l-fuki::after {
right: -94px;
}
.entry-content .r-fuki::after {
left: -94px;
}
}
.namako::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/namakoman/20220314/20220314234916.png);}
.namako_2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/namakoman/20220314/20220314234912.png);}

<p class="l-fuki namako">いつもこんな感じで打ち込んで吹き出しを作っています。</p>

いつもこんな感じで打ち込んで吹き出しを作っています。

l-fukiの後の「namako」の部分はキャラクターアイコンに対応しています。

レスポンシブデザイン対応のコードなので、スクリーンサイズに応じて吹き出しや、キャラクターアイコンのサイズも変動します。

実は「r-fuki」もありますがあまり使っていません…。

こちらのブログのコードを参考にしました。（キャラクターアイコンのサイズと輪郭の丸みを変更しています。）

nagarami-kurokiri.hatenablog.com

強調表示

はてなブログにて使用

吹き出しのCSSを応用し、このような囲み線を作りました。

.entry-content .kakomi{
position: relative;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 10px;
border: 2px solid #fc4a1a;
border-radius: 10px;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}

バナー表示位置のレスポンシブデザイン対応

ワードプレスにて使用

メインブログの記事末尾に、このような形でブログランキング用のバナーを横に並べて表示しています。

PCだと横並びにバナーが表示されるのですが、スマホではバナーが縦に並びます。要するにレスポンシブデザインに対応させています。

以下のようなCSSとHTMLで実装しています。

/*CSS*/
.rank {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

.rank-1 {
   margin: auto;
   padding: 20px 10px;
}

<!--HTML-->
<div class="rank">
	<div class="rank-1">
		<img src="https://hoge.png" width="200" height="150" border="0"/>
	</div>
	<div class="rank-1">
		<img src="https://fuga.png" width="200" height="150" border="0"/>
	</div>
</div>

ラッパーを二重構造にすることで実装しています。

ブログランキングバナーを格納するラッパー「rank-1」を2個、さらに外側のラッパー「rank」の中に配置しています。

「display: flex」で内部のアイテムを横並びに表示し、画面幅が狭くなったときは「flex-wrap: wrap」で横並びに表示していたアイテムの向きを縦並びに変更します。

スクロールボックス

はてなブログにて使用

トップページの「お知らせ」の部分に使用しています。

/*CSS*/
.box {
  height: 75px;
  margin: 10px 0px;
  padding: 5px;
  border: 1px solid #001E43;           
  overflow-y: scroll;          
}

<!--HTML-->
<div class="box">
    <p>スクロールボックスです。</p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p>こんな感じになります。</p>
</div>

スクロールボックスです。

こんな感じになります。

こちらのサイトを参考にしました。

qiita.com

プルダウンメニュー

はてなブログにて使用

トップページのカテゴリーメニューに使用しています。カテゴリー名を選択すると、選択したカテゴリーに移動します。

/* CSS */
.selectlink{
  height: 40px;
  width: auto;
  margin: 10px 0px;
  padding: 5px;
  border: 2px #ddd solid;
  border: 1px solid #001E43;
  cursor: pointer;
}

<!--HTML-->
<form name="formlink">
  <select name="selectlink" class="selectlink" onchange="if(document.formlink.selectlink.value){location.href=document.formlink.selectlink.value;}">
    <option value="https://namakoman.hatenablog.jp">（カテゴリーを選択）</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/%E3%82%AC%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88">ガジェット</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/%E3%82%A2%E3%83%97%E3%83%AA%E6%B4%BB%E7%94%A8">アプリ活用</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/Windows">Windows</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/Linux">Linux</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/Python">Python</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">プログラミング</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">ブログカスタマイズ</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/%E3%82%B2%E3%83%BC%E3%83%A0">ゲーム</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/%E3%82%B0%E3%83%AB%E3%83%A1%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC">グルメレビュー</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/%E6%B0%97%E3%81%AB%E3%81%AA%E3%82%8B%E3%83%A2%E3%83%8E%E7%B4%B9%E4%BB%8B">気になるモノ紹介</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/%E8%AA%AD%E6%9B%B8%E6%84%9F%E6%83%B3%E6%96%87">読書感想文</option>
    <option value="https://namakoman.hatenablog.jp/archive/category/%E9%9B%91%E8%A8%98%E3%83%BB%E5%A0%B1%E5%91%8A">雑記・報告</option>
  </select>
</form>

↑こんな感じになります。

Javascriptで、「プルダウンメニューの値を選択したときに、値に対応するvalueのURLを取得し、そのページへジャンプする」という処理を実装しています。

こちらのサイトのコードを参考にしました。

urakata.me

リンクテキストの色を変更

ワードプレスにて使用

リンク先のURLに基づき、リンクテキストの色を変更しています。

外部リンクを緑色、内部リンクを青色のリンクテキストで表示しています。

「a[href^="http"]:not([href*="namakoman.com"])」の形で、「URLに『namakoman.com』を含まないもの（=外部リンク）」を指定しています。

a {
    color: #1487bd;
    text-decoration: none;
}

.entry-content a[href^="http"]:not([href*="namakoman.com"]):not(.a-wrap)
{
	color: #03af7a;
	text-decoration: none;
}

*1:レスポンシブデザインの広告ユニットの場合、例外的にdisplay:none;などによる広告コードの修正が認められています。例えばデバイスの画面サイズと広告ユニットのサイズの不整合が原因で、閲覧に支障をきたすと考えられる場合などに認められます。というか他ならぬCocoonのフォーラムに記載がありました。