アニメな日々、漫画な月日

アニメ、漫画の感想・考察

このブログで使った「はてなブログ」カスタマイズまとめ

この記事は

はてなブログのカスタマイズに関しての忘備録。
先人の皆様ありがとうございます。

はじめに

「はてなダイアリー」で始めた「アニメな日々、漫画な月日」も開始から5年半が経ちました。
もうすぐ6年目に入ります。
いや~。我ながら長く続けられた物だと感心しますがw

で、この度、なんの節目でも無ければ、特に動機も無く。
強いて言えば、今暇だからという理由で、唐突に「はてなブログ」へお引越しをしました。
ついでに、有料会員の「はてなブログpro」にも加入して、アドセンスなんかを導入しちゃったりなんかしてます。

引っ越しから3週間、(暇なので)ちょいちょいカスタマイズを施して、ようやく納得出来る形に落ち着いたので、このブログで実装したカスタマイズを纏めてみようと思います。

デザインテーマ

先ずは大枠であるデザインテーマですね。
上では暇だから「はてなブログ」へ引っ越したと書きましたが、実を言うと、そのデザインに強い憧れがあったのです。
地味な「ダイアリー」に比べれば、洗練されたカッチョイイ見た目のデザインが多くて、良いな~と常々思っていたのです。

なので、僕にとってはメッチャ重要な要素。
憧れのブログへの第一歩。
物凄く慎重に選びました。

1分で決めました。

シロマティ (id:shiromatakumi)さんが制作された「Brooklyn」

白と黒を基調としたスタイリッシュな見た目に一目惚れ。
もうこれしかないと思って即断しました。

グローバルナビゲーション

基本的なカスタマイズは、シロマティさんが上記の記事で纏めて下さっております。
ヘッダー下のメニューであるグロナビも、そちらを参考にさせて頂きました。

コピペ一発なので楽勝でした。
ありがとうございます。

シェアボタン

ブログをやっていると、どうしても反応を貰いたくなるのが人情。
承認欲求が強いのかな…。
僕もやっぱり反応があるととっても嬉しいのです。

そこで、シェアボタン。
Pocketとかなんだか初めて聞いたものもありましたが、こちらも同様の記事を参考にさせて頂きました。

ただ、ちょこっとだけ更にカスタマイズ。

このブログでは、上記リンク先の
モノトーンのシェアボタンを設置後、以下の記事を参考に色を変えています。

同じくシロマティさんの記事なので、基本部分は一緒という事でそのままで、CSSだけ実装しました。

このブログでは、斜め光沢のあるシェアボタンを採用させて頂きました。

読者登録ボタン

これもシェアボタンと同様の理由で設置してます。
読者が増えるとメッチャ嬉しいものですね。

10人を目指して頑張っていきます。


採用させて頂いたのは、同じくこの記事の読者登録ボタンです。

記事内で注意書きがありますが、僕も間違えそうになったので、URLは、http://以降というのは間違えないようにしたいところです。

ちなみに、読者登録ボタンは記事下ともう一つサイドバーにも組み込んでいます。
htmlをコピーして、
サイドバー⇒モジュールを追加⇒html
と選択して、貼り付けました。
f:id:nuruta:20161124093147j:plain
タイトル欄を空白にすると、このブログのような見た目になります。

記事タイトル周りのレイアウト

記事タイトル周りですが、「Brooklyn」のを弄っています。
参考にさせて頂いたのが、こちら。

shun (id:shun_prog0929)さんが作られた「Spirea」というブログテーマのカスタマイズ記事です。

どのブログテーマでも、基本となる部分のCSSのクラス名は共通なのを利用して、CSSを弄りました。
リンク先の「よくある見出し風」を基本にしています。

あわせて読みたい

少しでも回遊率を高めたくて、池田仮名 (id:bulldra)さんの「あわせて読みたいG」を導入しています。

ただ、CSSのカスタマイズが詳細には書かれていなかった為、かなり強引な手を使って変えました。

先ずは、CSSのクラス名が上記記事に書いてありましたので、デザインCSSに以下を記載。

.hatena-module-foot h3{
    font-size:20px;
    padding: 5px 10px;
    border-left: 8px solid #000;
    border-bottom: 2px solid #000;
}

これだけだと「あわせて読みたい」の文字とプルダウンメニュー、ボタンまで20pxになってしまいました。
プロダウンメニューとボタンを小さくしたかったので、ここから強引手段に。

gatcha.jsが公開されてましたので、そのソースコードを全てコピー。

<!-- 解説はこちら http://bulldra.hatenablog.com/entry/read-together-g -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<span style="color: #ff5252">&lt;script src="http://bulldra.github.io/gatcha.js" charset="utf-8"&gt;&lt;/script&gt;</span>

上記コードの赤字部分を消して、コピーしたコードを同位置に添付。
すると、こんな感じになります。

&lt;!-- 解説はこちら http://bulldra.hatenablog.com/entry/read-together-g --&gt;
&lt;script src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
&lt;script src="http://bulldra.github.io/commons.js" charset="utf-8"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
function writeGatcha(a,b,c,h,f)
{if(void 0===b||null==b)b="side-";
if(void 0===f||null==f||1!=f)f=!1;var d=null;
if("category"==c&&(c=document.querySelectorAll("div.categories a"),null!=c&&0&lt;c.length))
{for(var d=[],e=0;e&lt;c.length;e++)
{var g=c[e].href;0&gt;g.replace(getBlogUrl(),"").indexOf("-")&&0&lt;
=g.indexOf(getBlogUrl()+"/archive/category/")&&d.push(c[e])}e=Math.floor
(Math.random()*d.length);d=d[e]}
c="";
c=void 0!==d&&null!=d?d.href.replace(getBlogUrl()+"/archive/category/",""):"";
void 0!==h&&null!=h?(document.write('&lt;span class="hatena-module-foot"&gt;&lt;h3&gt;'+
h),500&lt;window.innerWidth?(document.write('&lt;span style="float:right"&gt;'),writeForm(b,c,a,f),document.write("&lt;/span&gt;&lt;/h3&gt;")):(document.write("&lt;/h3&gt;"),writeForm(b,c,a)),document.write("&lt;/span&gt;")):writeForm(b,c,a);
document.write('&lt;span id="'+b+'gachaSpan"&gt;&lt;/span&gt;');switchGatchButton(!1,b)}

function writeForm(a,b,c,h)
{document.write('&lt;select id="'+a+'inGatchaCategory" onchange="runGatcha(\''+a+'\')" style="width:150px;<span style="font-size: 150%"><b>font-size:13px;</b></span>"&gt;&lt;select&gt;');
document.write(' &lt;input type="button" id="'+a+'btnNormalGatcha" value=" \u66f4\u65b0 " style="font-size:12px;" onClick="runGatcha(\''+a+"')\" /&gt;");
document.write(' &lt;input type="button" id="'+a+'btnMoveGatcha" value=" \u4e00\u89a7 " style="font-size:12px;" onClick="moveGatcha(\''+a+"')\" /&gt;");
h&&document.write(' &lt;input type="button" id="'+a+'btnFeedlyGatcha" value=" \u8cfc\u8aad " style="font-size:12px;" onClick="feedGatcha(\''+
a+"')\" /&gt;");document.write('&lt;input type="hidden" id="'+a+'inGatchaNum" value="'+c+'" /&gt;');
document.write('&lt;input type="hidden" id="'+a+'mode" value="'+b+'" /&gt;');
a=document.getElementById(a+"inGatchaCategory");
a.appendChild(createOption("gatcha-new","\u6700\u65b0"));
a.selectedIndex=0}

function writeGatchaCategory(a)
{if(void 0===a||null==a)a="side-";
var b=getBlogUrl(),
c=document.getElementById(a+"inGatchaCategory"),
b=document.getElementById(a+"mode").value.replace(b+"/archive/category/",""),
b=createOption(b,decodeURI(b));
c.appendChild(b);b.selected=!0;runGatcha(a)}function createOption(a,b){var c=document.createElement("option");
c.value=a;c.text=b;return c}

function switchGatchButton(a,b)
{document.getElementById(b+"btnNormalGatcha").disabled=!a;
document.getElementById(b+"btnMoveGatcha").disabled=!a;
document.getElementById(b+"inGatchaCategory").disabled=!a;var c=document.getElementById(b+"btnFeedlyGatcha");
null!=c&&(c.disabled=!a)}

function feedGatcha(a)
{switchGatchButton(!1,a);
var b="",
b=getBlogUrl(),c=document.getElementById(a+"inGatchaCategory"),b=0==c.selectedIndex?b+"/feed":b+"/rss/category/"+c.value;
switchGatchButton(!0,a);
window.open("http://cloud.feedly.com/#subscription%2Ffeed%2F"+encodeURIComponent(b))}

function moveGatcha(a)
{switchGatchButton(!1,a);
var b="",
b=getBlogUrl(),
c=document.getElementById(a+"inGatchaCategory"),
b=0==c.selectedIndex?b+"/archive":b+"/archive/category/"+c.value;switchGatchButton(!0,a);
location.href=b}function runGatcha(a){switchGatchButton(!1,a);
var b=document.getElementById(a+"inGatchaCategory");0==b.selectedIndex?runNewGatcha(a):runCategoryGatcha(a,b.value);
switchGatchButton(!0,a)}

function runCommonGatcha(a,b)
{var c=document.getElementById(a+"inGatchaNum").value;$.ajax(
{url:b,type:"get",dataType:"xml",timeout:5E3,success:function(b,f)
{if("success"===f){var d=0,e=[],g;$(b).find("item").each(function(){e[d]={};
$(this).children().each(function(){g=$(this)[0].nodeName;e[d][g]={};
attributes=$(this)[0].attributes;for(var a in attributes)e[d][g][attributes[a].name]=attributes[a].value;e[d][g].text=$(this).text()});d++});
var k=[],l;for(l in e){var m={};m.link=e[l].link.text;k.push(m)}k=
removeThisEntry(k);
l=document.getElementById(a+"gachaSpan");
createOwnHtml(l,null,k,null,c)}}})}

function runNewGatcha(a)
{var b=getBlogUrl();runCommonGatcha(a,b+"/rss")}

function runCategoryGatcha(a,b){var c=getBlogUrl()+"/rss/category/"+b;runCommonGatcha(a,c)};

&lt;/script&gt;
&lt;script type="text/javascript"&gt;
writeGatcha(3,'entryGatcha','category','あわせて読みたい' ,false);
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
&lt;/script&gt;

黄色のマーカーになってる部分を追加して、強引にサイズを変更しています。
強引な手段に出ましたが、CSSを理解すればもっとスマートに出来る筈です。

本当に素晴らしい機能で、重宝しております。

強調太文字

bタグで太文字になる部分のカスタマイズも導入してます。
ちょうど上で使ってますね。

こちらは、id:northgeekさんの記事を参考にさせて頂きました。

サイドバーモジュールのタブメニュー化

最初は1つ1つ表示させていた「人気記事」「はてブ人気」「最新記事」。
(自分で人気とか書いちゃうの、スゲエ抵抗あるんですが…仕方ない)
これらをタブメニューにしちゃおうってやつです。

カッコイイですね。
色使いもデフォルトのままで「Brooklyn」にフィットしましたので、そのまんま採用させて頂いちゃいました。

余談ですが、jQueryを使いますよという宣言部分

&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;

これですね。
別のカスタマイズのコードにもあって、重複してると意味が無い。
てか、ブログの表示が遅くなる可能性がある。
なので、1つにして、ヘッダのタイトル下に移動させちゃいました。

目次部分

基本使う事の無い目次記法。
今回始めて使ってみました。
あまり使う機会は無いかもですが、折角なのでカスタマイズを導入。

ゆきひー (id:ftmaccho)さんの記事を参考にさせて頂きました。

当ブログでは、目次にタイトル(contents)を付けるのと、背景色の変更を採用しています。

リスト


id:northgeekさん、再び。
ということで、リストはこの記事を参考にしました。
矢印を採用です。

引用


引用は「TASK NOTES」さんのこちらの記事を参考にさせて頂きました。
分かり易くなって素敵♪

googleアドセンスを文中に自動挿入

当ブログでは、googleアドセンスを導入しています。
うつ病治療で生活が困窮してきたので止む無くなのですが、当然生活費をまかなえる訳もなくwww
ぶっちゃけますと、小学生のお小遣い程度でも欲しいなと。

僕のつまらない事情はさておき、こちらの記事を参考に導入しております。

TARA (id:tarapple)さん、ありがとうございます。

ただ、コピペだけでは動かなかったので少し変えました。

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content h4');
$target.eq(1).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p>スポンサード リンク</p>
<!--ここに自分のアドセンスのコード-->
</div>

こんな具合です。
赤文字強調部分を変えてます。

自分は基本的に中見出しを多用している関係で、h3タグではなく、h4タグなんです。
なので、コードもそのように変更。

もう1つの変更箇所は、多分ですが、「何番目の中見出しか」を表していそうだったので0から1に変えてます。

プロフィール欄&読者になるボタン

これ物凄くて、感動しました。

えむしてっく(id:mshitech)さんのブログです。

世の中凄い人だらけ。

トップへ移動ボタン

サイドバー複数固定

手前味噌ですが、自分でもカスタマイズ記事を書きましたので、ついでに。

↓改善版。

終わりに

多くの方の記事を参考にさせて頂きました。
改めて、お礼を申し上げます。
ありがとうございました。