読者です 読者をやめる 読者になる 読者になる

|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.jshighlight.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;}

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