|ivedoorB|ogをカスタマイズする

タイトル通り．

急いでいる人は，こちら

Hatenaブログ書き始めて，もうじき半年ぐらいらしい．

初めての記事はこれ．

HatenaProの機能をお金ないから実装して使っていたら，「Pro契約してね」って怒られた話．

仕方ないとはいえ，やっぱり独自ドメインの夢は捨てきれない．

でも，お金はない．どうしたものか．

そこで飛び込んできたニュースがこれ．

なんと，無料で独自ドメインが使えるらしい．

mjk

使ってみたが，なんだこれは．

Markdownで書けないじゃないか！！

そう，すっかりHatenaブログに慣れてしまって，使えたもんじゃない．

そこで仕方ないので，自前でHatena-likeに改造するしかない！と思い立つわけだ．

さて本題，どうやってカスタマイズしたのか．

まず，markdown対応ですよね．

(function(){

marked.setOptions({
  sanitize: false,
  langPrefix: ''
});

var converted = false;
document.addEventListener('DOMContentLoaded', convert);
window.addEventListener('load', convert);

function convert(){
  if (converted) return;
  converted = true;
  var contents = document.querySelectorAll('.article-body-inner');
  for (var i = 0; i < contents.length; i++) {
    var content = contents[i];
    var markdown = content.innerHTML.replace(/^\s*/, '');
    content.innerHTML = marked(markdown);
    hljs.initHighlightingOnLoad();
  }
};

})();

今回は，marked.jsとhighlight.jsで実装してみた．（5/29訂正）

ただ単に，.article-body-innerの中をレンダラに突っ込んで書き換えてるだけ．

一応これでMarkdown対応できる．

しかし，これだけでは問題がある．

それは，livedoorBlogではスマートフォン表示がいじれないということ．

これは致命的である．

とにかくなんとかしてスマートフォン表示を無効にしたいが，そんな設定はない．

仕方ないので，ユーザにPC表示にしてもらうように誘導することにした．

追記 なんか訳わからんがscript挟めた．

リンク集ってブログパーツがあって，そこのリンクに下のやつを埋め込んでやる．

"></a><script>document.cookie='sp_friendly=0;path=/;domain=.'+location.host+';expires=Tue, 19 Jan 2038 03:14:07 GMT';location.reload();</script><a href="

これで自動でPC表示になる．すごい．

（でもいいのだろうか，これは....）

スマートフォンでは，フリーエリアってブログパーツが使える．

そこに，「ページ下のパソコン表示を選んでね．」って書く．

（ただし，javascriptは埋め込めないっぽい．）

そうして，PCサイトではjavascript埋め込めるんで，強制PC表示になるcookieを書き込む．

document.cookie='sp_friendly=0;path=/;domain=.'+location.host+';expires=Tue, 19 Jan 2038 03:14:07 GMT';

これでいい感じ．

すっかり忘れていたが，スマートフォンからPC表示で見ると上のほうにうざったいスマホ表示ボタンが出る．

それは以下のCSSで非表示にできるので，設定しておく．

#smartphone,#img_omatome{display: none !important;}

他にもいろいろカスタマイズしたけど，それはまあそのうち書くかもしれない．