パンドラの箱の中には…

普段ゲイ生活の36歳。ゲイ生活の中で得たスキルや知識をアウトプットするゲイブログ。

【はてなブログProカスタマイズ】コピーライトを付ける・カテゴリーによってアドセンス広告を非表示にする・目次のデザイン

この記事をシェアする

こんにちは、はじめ(@hazi_57)です。
なんでもとりあえず形から入る僕。

 

ブログを書き続けるにしても、
やっぱりある程度形が美しくないと、書く気が起きないので、
初期の段階からはてなブログProを契約し、
独自ドメインを適用して、デザインも分かる範囲で色々カスタマイズして使っています。

 

ただカスタマイズにおいては自分がひとりで頑張ってきたわけじゃなく、
他のブログさんを参考にしてやってきたまでなので、
今日はその敬意も込め、
そして、良いモノはみんなでシェアしようということで、
当ブログ「パンドラの箱の中には…」でカスタマイズしている箇所の一部を公開します。
(本当は全部書きたいけど書くと長くなるので3つくらいに抜粋させていただきます。)

 

当ブログで使用しているテンプレート「Silence」

トップページに記事一覧がカードのように並ぶデザインが好きなので、
ブログでは「Silence」というテンプレートを使わせていただいてます。

blog.hatena.ne.jp


 

コピーライトを付ける

ページの最下部にコピーライトがある方が、
ちゃんとサイトしてるって感じがしてカッコイイですよね。笑

theme-silence.hateblo.jp

コピーライトの表示は、製作者様の運営するサイトに方法が掲載されています。

 

<div class="si-footer">
  <p class="si-copyright">© ブログ開設年- サイト名(著作者)</p>
</div>

 

が、ただしこれだと、新しい年を迎えるたびに、
自分で西暦を書き換えなければいけないので、僕はこーしました。

 

<div class="si-footer">
<p class="si-copyright">Copyright &copy; <script type="text/javascript">myDate = new Date() ;myYear = myDate.getFullYear ();document.write(myYear);</script> サイト名(著作者) All Rights Reserved.</p>
</div>

 

Javascriptを使って、自動的に現在の年号を読み込ませるようにしました。
このコードをダッシュボード→デザイン→カスタマイズ→フッタの中に記述します。

f:id:ha-zi:20190805234454j:plain

入力したら、必ず「変更を保存する」ボタンを押してくださいね。
消えちゃいまーすよー。

 

カテゴリーによってアドセンス広告を非表示にする

当サイトでは、googleアドセンスの広告を貼り付けさせていただいてます。
しかし、特にペアレンタルアドバイザリーマークを付けているわけではありませんが(後日つけようと思います…。)、
このブログには数記事ほど、年齢対象18才以上に向けた記事があります。
それ以外にも都合上アドセンス広告を貼り付けたくない記事などに対しては、
指定のカテゴリーをその記事に付けて広告を表示しないように設定しています。

1.
まず適当なカテゴリーを付けます。僕は「R-18」と付けました。

 

2-1.
以下のコードをコピーして、
広告を貼り付けたい場所(サイドカラムやフッターなど)に記述します。

<script>
noAdsTag="R-18"; //広告を設置しないカテゴリーを指定
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>
//ここに自身のアドセンスコードを入力
<!--調整用-->

 

2-2.
ヘッダーやサイドカラム、記事下などと複数広告を貼り付ける場合は、
2つ目以降は以下のように記述します。 

<script>adsFilter();</script>
//ここに自身のアドセンスコードを入力
<!--調整用-->

 

3
自動広告を設定している場合は、設定→詳細設定→検索エンジン最適化→headに要素を追加の枠の中に、以下のように記述します。

<script>
noAdsTag="R-18"; //広告を設置しないカテゴリーを指定
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>
//ここに自身のアドセンスコードを入力
<!--調整用-->

 

f:id:ha-zi:20190806001646j:plain

 

参考にさせていただいたサイト様:

www.hinapishi.com

 

 

目次のデザイン

はてなブログには、見出しタグを抽出して、
その記事にどんな内容のことが書かれているのかがひと目でわかるように「目次」の機能がついています。

 

f:id:ha-zi:20190806004207j:plain

目次を入れたいところに、
本文入力枠の上部にある目次アイコンをクリックすれば目次が自動的に生成されるのですが、
何も設定してないと、ただ見出しだけが表示されて、
あまりオシャンティーではありません。

 

なので、僕は以下のようにしました。

 

/*--------------------------------------
  もくじ
--------------------------------------*/
.entry-content ul.table-of-contents {
  font-size: 0.95em !important; /*文字サイズ*/
  border: 1px solid #eee !important;
  padding: 1em !important;
  color: #999 !important;
  display: inline-block;
}

.entry-content ul.table-of-contents:before {
  content: "- CONTENTS -"; /* お好きな文言に変更してください */
  margin: 0.2em 0em 2.5em;
  padding: 0em;
  font-weight: bold;
}

.entry-content ul.table-of-contents a:after {
  display: none !important;
}

.entry-content ul.table-of-contents li a,
.entry-content ul.table-of-contents li a:visited {
  color: #999 !important; /* リンク文字の色 */
  text-decoration: none; /* リンクの下線あり・なし */
  margin-left: 25px;
}

.entry-content ul.table-of-contents li a:hover {
  color: lightgrey !important; /* リンクにマウスを重ねた時の色 */
}

.entry-content ul.table-of-contents li {
  margin: 5px 0 10px 6px !important;
  line-height: 1.5;
  padding: 0;
  list-style-type: none !important;
}

.entry-content ul.table-of-contents li:before {
  font-family: blogicon;
  content: "\f023";
  position: absolute;
  color: lightgrey;
}

.entry-content ul.table-of-contents li ul li ul {
  /* 大見出し・中見出しを表示させる */
  display: none !important;
}

 

 上部のコードを、ダッシュボード→デザイン→カスタマイズ→デザインCSS の枠内に記述します。

 

f:id:ha-zi:20190806012020j:plain

 

この記事を参考にさせていただいたサイト様:

kimix.hatenablog.com

 

 

カスタマイズすることでよりブログに愛着が湧くよ!

ブログを書くことって、
当然記事の内容も大事だと思うんだけど、
カスタマイズして色々遊んでると、
もっと自分のブログに愛着が湧いて楽しいっすよ。

 

他にもいろいろ変えてんですけど、
ちょっと長くなってしまったので、
またの機会に第2弾を書かせてください!

 

 

今日もここまで読んでいただいてありがとうございました٩(๑´3`๑)۶