はてなブログカスタマイズの人柱です。
熱心にこのブログを読んでいる人はいないと思いますが、もしかしたら気づいている人はいるかもしれません。このブログがコツコツと改造されていることを。
僕が記事更新を怠っている間時々やっていたのはカスタマイズです。
日々はてなブログのカスタマイズ系の記事を見たり、魔改造されているブログを見れば「このカスタマイズを教えてくれ」と悶々とし、Wordpressのブログを見れば「あ、このブログおシャンティーやな」と羨みつつ、自分の拙い知識では無理なので先達の叡智をちょいちょい試し続けておりました。
まだまだやりたいことは道半ばなんですけど、放っておくと忘れそうなので自分が試したカスタマイズと参考記事を紹介していきます。ちなみに超イケてるカスタマイズの記事は以下にまとめております。
自分で言うのもなんなんですがこの記事超役立ちます。僕も大体この記事に戻って参照記事にお邪魔してうんうん言っております。多分僕がこの記事を一番見ています爆。まとめるの大変だったけど今自分に役立ってるで笑。
長文なのでお気をつけて
カスタマイズで最優先で考えるべきはモバイルである
先に言っておきますが、僕はPCもカスタマイズしていますけど常に考えているのはモバイルです。モバイルの見え方ばかり考えております。
理由はシンプルでアクセスの大半がモバイルだし、今後も比率は上がることが想定されるからです。書くのはね、PCの方が便利ですけど閲覧はやっぱりモバイルでしょう。なので横スクロールとかまだ残っているページもあるけど極力修正していますしYoutubeの貼り付けにも超気を使っています。
Youtubeを貼り付ける人はお気をつけて。
では直近僕がやってきたカスタマイズをどうぞ。
はてなブログに「ぱんくず」と「グローバルメニュー」をつけよう
「ぱんくず」と「グローバルメニュー」の完成イメージ
上の青いバーで「BLOG」「BOOK」「FILM＆MUSIC」「ESSAY」ってなってるのがグローバルメニューです。
タイトル下の「TOP ＞ 本 ＞ 小説」ってなってるのがパンくず。Googleに階層を伝えてるらしいです。
参考にした記事
▼ ぱんくずカスタマイズの参照記事
まずはパンくずを「太陽がまぶしかったから」の記事で。この記事は前半、後半あるうちの後半です。最初気付かずに前半の記事を読んで作業していたのですが後半の記事を見て愕然としました。めちゃくちゃスクリプトが短くなってたんです。すごすぎて感動。
▼ グローバルメニューカスタマイズの参照記事
大変参考になりました。ほぼ同期のYukihyさんは先にカスタマイズを色々試してくれているので助かっています爆。
STEP① まずは「カテゴリ」精査から
このへんもねYukihyさんの記事にわかりやすく書いていますがまずはカテゴリ精査をしましょう。こんな手順ですな。
- まずは同じような話題のカテゴリをガチャンコします。
- それでもカテゴリ数が多いなら「親カテゴリ」「子カテゴリ」を作ります。僕の場合は「マンガ」と「小説」の親カテゴリとして「本」を作りました。
- 「親」「子」の関係を作る。「子カテゴリ」の書き方は「親カテゴリ-子カテゴリ」と書きます。僕の場合は「本-マンガ」でした。
- 記事のカテゴリに「親カテゴリ」「子カテゴリ」を両方セットする。
これで完成です。
STEP② つくったカテゴリを「パンくず」としてGoogleに認識させよう
カテゴリ精査が終わったらパンくずを認識させる記述を書きます。
【設定場所】PC ： デザイン→フッタ
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
<script type="text/javascript">
google.setOnLoadCallback(categoryHierarchyModule);
</script>
この記述には<script src= の記述が4つありますが上の3つだけでも大丈夫です。4つ目を入れるとサイドバーに表示されるカテゴリが「親カテゴリ」のみになるらしいです。すげーな。
【設定場所】SP ： デザイン → フッタ（ページャ下）
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
スマホにはカテゴリは表示されていないの上3つのみです。
そして、PCとSP共に以下の記述を追加して下さい。
【設定場所】PC、SPそれぞれ ： デザイン → 記事 → 記事下
<style>
div #breadcrumb div {
display: inline;
font-size: 13px;
}
</style>
<div id="breadcrumb"></div>
これで完成。記事下に入れるのがコツです。記事上にいれるとカテゴリの遷移が2つ並んでしまいました(僕の場合)。
STEP③ 「グローバルメニュー」を設定しよう
【設定場所】 PC、SPそれぞれ ： デザイン → ヘッダ
<div id="mobile_menu">
<span class="category"><a href="親カテゴリ①URL">親カテゴリ①名</a></span>
|
<span class="category"><a href="親カテゴリ②URL">親カテゴリ②名</a></span>
|
<span class="category"><a href="親カテゴリ③URL">親カテゴリ③名</a></span>
|
<span class="category"><a href="親カテゴリ④URL">親カテゴリ④名</a></span>
</div>
<style>
#mobile_menu{
color: #ffffff;
text-align: center;
background-color: #0000ff ;
margin:10px 0 0 0;
}
#mobile_menu .category{
padding:2px 0 2px 0;
line-height: 200%;
font-size: 85%;
font-weight: bold;
}
#mobile_menu a{
color: #ffffff;
text-decoration: none;
}
</style>
僕の場合はPCは6つ、SPは4つ設定しています。また、親カテゴリ名はそのままいれなくてもいいです。僕の場合は親カテゴリは「本」なんですけど「BOOK」って入れてます。アドセンスより上に記述しないと「アドセンス」→「グローバルメニュー」というような見え方になるので気をつけて下さい。
<style>で始まるほうがCSSで「background-color」の横の「 #0000ff ;」が背景色ですね。そのまま貼ると僕の同様に青色になります。
カラーチャート/カラーグラデーション - TAG index Webサイト
ここ見て好きな色に変えて下さい。
「引用」をもっとオシャレにカスタマイズ
「引用」カスタマイズ後の完成イメージ
背景色ついて「"」がついてます。これで真っ白なはてなにメリハリが付きます。
参考にした記事
引用はこの記事をベースに「PC」と「Mobile」で少し変更して作成しました。書評というか漫画について書くことが多いのであらすじを書くときに引用のは多用するので重宝しています。
カスタマイズ方法
記事を見てくださいでもいいのですが、スマホはちょっといじる方法あるので記載しておきます。
【設定場所】PC ： デザイン → デザインCSS
/* 引用のデザイン1 */.entry-content blockquote {
padding: 20px 55px;
background: rgba(245,245,245,0.8);
color: #222;
position: relative;
border: solid 1px #fff;
margin: 0.8em 0;
}/* 引用のデザイン2 */.entry-content blockquote:before {
color: rgba(200, 200, 200, 1);
content: "“";
font-family: serif;
font-size: 600%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}/* 引用のデザイン3 */.entry-content blockquote:after {
content: "”";
font-family: serif;
position: absolute;
bottom: 0;
right: 0;
font-size: 600%;
color: rgba(200,200,200,1);
line-height: 0;
}
これは元記事まんまですね。
【設定場所】SP ： デザイン → フッタ(ページャ下)
<style type="text/css">
/* 引用のデザイン1 */.entry-content blockquote {
padding: 10px 30px;
background: rgba(245,245,245,0.8);
color: #222;
position: relative;
border: solid 1px #fff;
margin: 0.8em 0;
}/* 引用のデザイン2 */.entry-content blockquote:before {
color: rgba(200, 200, 200, 1);
content: "“";
font-family: serif;
font-size: 200%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}/* 引用のデザイン3 */.entry-content blockquote:after {
content: "”";
font-family: serif;
position: absolute;
bottom: 0;
right: 0;
font-size: 200%;
color: rgba(200,200,200,1);
line-height: 0;
}
</style>
スマホにはデザインCSSをいじる欄がないのでフッタで対応することになります。そのときに<style type="text/css"> ～ </style>で囲む必要があるようです。
オシャンティーな画像付きおすすめ記事の設定方法
「オシャンティーな画像付きおすすめ記事」完成イメージ
画像とタイトルのオシャンティーな関連記事です。はてブ数の多い記事を持ってくるみたいですね。
参考にした記事
一気におしゃれになります。ちょっとスマホに合うようにフォントの大きさとかをいじりました！すげえ応用効きそうって思ってますが知識がないのでできていません。
ちなみに僕はPCは設定していません。デフォルトのサイドバーを使っているのですが画像を大きくすることができるのでそれを「120*120」にしました。
カスタマイズ方法
【設定場所：HTML】 SP ： デザイン → 記事 →記事下
<!-- HTML : popular_entries --><div class="hatena-module-title">
<a href="http://b.hatena.ne.jp/entrylist?sort=count&url=あなたのブログURL">Popular entries</a></div><!-- 人気記事を表示する --><div id="popular_entries_feed" align="center">Now Loading...</div>
<!-- SCRIPT : popular_entries_feed -->
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
//RSSフィードの取得
var blogURL = "あなたのブログURL";
var blogTITLE = "あなたのブログ名";
var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&sort=count&url=" +blogURL);
//取得するフィード数
feed.setNumEntries(5);
//実際に読む込む
feed.load(function(result) {
//読み込めたか判別
if (!result.error) {
//表示部分を選択
var container = document.getElementById("popular_entries_feed");
//変数の初期化
var useFeed = "";
//Feedの処理
for (var i = 0; i < result.feed.entries.length; i++) {
//Feedを一つ抽出
var entry = result.feed.entries[i];
//日付を抽出
var pdate = new Date(entry.publishedDate);
var strdate = (pdate.getMonth() + 1) + '月' + pdate.getDate() + '日';
//最初の画像を抽出
var first_image = entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/);
//画像サイズを調整
first_image[0] = first_image[0].replace(/(\.[^.]+$)/ , "_l$1");
//リストに突っ込む
useFeed += '<div class="htbl_popular_entry"><a href="' + entry.link + '"><img class="htbl_popular_entry_img" src="' + first_image[0] + '"><div class="htbl_popular_entry_text"><span class="entry_title">' + entry.title.replace('- '+blogTITLE , '') + '</span><span class="entry_hatebu"><img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '"></span><span class="entry_date">' + strdate + '</span></div></a></div>';
}
//リストを表示させる
container.innerHTML = '<div class="htbl_popular_entries">' + useFeed + '</div>';
}
});
}
google.setOnLoadCallback(initialize);
</script>
これでHTMLとJavascriptを書いたみたいですがなんのこっちゃわかりません。コピペするしかないでしょう。更にCSSを記載しないといけないです。
【設定場所】SP ： デザイン → フッタ(ページャ下)
<style type="text/css">
/* ----- POPULAR_ENTRY ----- */.htbl_popular_entries {height: 100%;
width: 100%;
}.htbl_popular_entry {
position: relative;
background: #ddd;
width: 100%; height: 100px;
overflow: hidden;
margin-top: 1px;
border-radius: 1px;
}.htbl_popular_entry_img { position: relative;
top: -9px;
min-height: 118px;
}.htbl_popular_entry_text {
position: absolute;
top: 0px; word-break: break-all;
overflow: hidden;
background: rgba(77, 77, 77, 0.42);
width: 90%;
height: 100px;
margin-top: 0px; padding: 0 5%;
color: rgba(255, 255, 255, 0.985);
text-shadow: -1px 1px rgba(0, 0, 0, 0.15);
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
transition: all 0.35s ease-out; }.htbl_popular_entry_text:hover { background: rgba(255, 255, 255, 0.05);
color: transparent; text-shadow: none; padding-top: 100px; }.htbl_popular_entry_text span.entry_title { display: table-cell;
vertical-align: middle;
text-align: center; height: 100px;
font-size: 18px;
}.htbl_popular_entry_text span.entry_date { position: absolute; bottom: 0;
right: 5px;
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
text-shadow: none;
}.htbl_popular_entry_text span.entry_hatebu { position: absolute;
left: 5px;
bottom: 0px;
}
</style>
もうね、何がなんだかわかりません笑。これも一応<style type="text/css"> ～ </style>で囲んでスマホで対応できるようにしました。
編集後記
コード貼り付けたからとはいえ長すぎするやろ！超疲れた。
とは言えこれでカスタマイズは今僕がすぐ出来そうなものは一旦終わりました。他にもやりたいことはあるんですけど、時間かかりそうなのでおいおいやっていく感じですかね。ではすてきなカスタマイズライフを！