webブログ

ブログは「webにログ(記録)する」の略。webブログはおやじのログ(記録)。つまり単なるおやじの日記です。好きな事書きます。

カスタマイズ忘備録 Brooklynテーマ版【はてなブログ】

webブログに使用したカスタマイズです。自分の忘備録にまとめましたが、参考になればどうぞ。

テーマ 【Brooklyn レスポンシブデザイン対応】

shiromatakumi.hatenablog.com

作者様に感謝です。おやじはシンプルなデザインが好きなので、気に入っています。CSSもある程度書き込まれているようなので、カスタマイズが比較的簡単かも。おやじは欲張りすぎて苦労しています。

メニューの表示

jitenshaya-se.hatenablog.com

こちらの記事に記載されているコードに多少手を加えたもの。HTMLタグをそのまま使用。デザインCSSは多少改良しています。タグ追加時にメニューに自動で追加されるので、後々メンテナンスフリーです。タグを並び替えても反映されます。作者様に感謝です。

ヘッダ下 HTMLタグ

<!--カテゴリ自動取得-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
/*グローバルメニュー表示*/
$(document).ready(function(){
$("#blog-title").after('<div id="globalmenu"><nav id="globalnavi"><ul></ul></nav><div>');
globalnavi = $("#globalmenu nav ul");
globalnavi.append('<li><a href="ブログURL">【ホーム】</a></li>');
$(".hatena-module.hatena-module-category .hatena-module-body .hatena-urllist li a").each(function(index, element) {
globalnavi.append('<li><a href="' + $(element).attr("href") + '">' + $(element).text() +'</a></li>');
if(index > 3){
return false;
}
});
});
</script>

デザインCSS

<!--カテゴリ自動取得-->
<style type="text/css">
/*グローバルメニュー表示*/
#blog-title{padding:0;}
#globalnavi ul{
font-size: 1.4em;
list-style: none;
text-align: center;
padding: 0;
background-color: #000000;
-webkit-padding-start: 0;
}
#globalnavi ul li{display: inline-block;}
#globalnavi ul li a{
text-decoration: none;
color: #FFFFFF;
display: block;
padding: 10px 5px;
}

</style>

 

HTMLタグをそのまま使用。デザインCSSは多少改良しています。タグ追加時にメニューに自動で追加されるので、後々メンテナンスフリーです。タグを並び替えても反映されます。作者には感謝です。

ホームの表示を記事タイトル一覧にする(リダイレクト方式)

psn.hatenablog.jp

こちらのコードをそのまま使用。作者様に感謝です。

<!-- はてなブログ(PC)版でTOPページを記事一覧にしたい psn.hatenablog.jp ここから -->
<script src="//niyari.github.io/hatenablog-modules/deprecated/navigate-page-archive.min.js"></script>
<!-- はてなブログ(PC)版でTOPページを記事一覧にしたい ここまで -->

 まとめ

おやじは基本、HTMLタグやCSSなどは全く分かりませんので、作者様には感謝しかありません。掲載したコードはおやじの忘備録用に残したものですので利用に関しては、一切責任を負いません。