|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;}
他にもいろいろカスタマイズしたけど,それはまあそのうち書くかもしれない.