Cinnamonというレスポンシブなはてなテーマをつくってみた - タオルケット体操
自己満のために作成したはてなブログのテーマなわけだけども、なまじフラットっぽいシンプルなデザインにしたせいでデフォルトのプロフィール画面とのミスマッチが気になってしまいました。
僕は読者になるボタンとツイッターでフォロー! のボタンを有効にしてるんですけど、味気ない灰色のボタンで表示されてしまいどうにも気になってしまいました。 なので読者ボタンのCSSを勝手に上書きした（コロコロ変えてすいません）のですけれども、ツイッターのボタンだけはjsが生成するiframeを使っていたりするためにどうしようもない。どうしようもないので手書きHTMLに独自のクラスを割り振ってアレコレ出来るようにしました。
前置きが長くなってしまったけども、Cinnamonを使ってる人はデザインの変更画面に行ってHTMLを手で書くとツイッターのフォローボタンがフラットデザインな感じになります。
かといっていきなり手書きで書けというのもアレなので、HTMLとかCSSとかよくワカンネーヨという人のために簡単にHTMLを作成出来るやつをつくりました。
古いIEだとちゃんと動かないかもしれませんごめんなさい。
それ以外のブラウザでうまく動かない人はなんらかのアレで報告してくれたら対処します。
ここへ行き、それぞれのテキストボックスに所定の文字列を入力するといい感じのHTMLが生成されるので、それをデザイン設定のサイドバー編集へ行ってHTMLモードで貼付ければ、ちょうど今のこのブログのような感じになります。
そのままのほうがいいですか？ ごめんなさい。
なお、写真のURLは省略しても大丈夫です。その場合はアカウントに紐づいたアイコンになる（はず）です。
なお、はてなが作ってくれているコードとは違うものを使うことになるため、はてなブログの仕様変更などにより突然ちゃんと表示されなくなる可能性などもゼロではありません。また、僕がなんらかのヘマをやらかしている可能性もあります。
そこらへんをふまえた上で自己責任での導入をお願いします。
なお、Facebookとかrssアイコンへの対応は気が向いたらやります。グローバルヘッダーの対応とかもやりたいですね。
ここからはプログラマー向け
HTMLをジェネレートするページですが、まともなCSSを書いていないので見た目上はクソ雑な感じですが、JavaScriptのMVVMフレームワークであるVue.jsを利用しました。
こういったものをサクっと作れるのはVue.jsの魅力ですね。この程度だとjQueryすら必要ないです。良い。
Vue.jsはJSでちょっとしたUIを作る時にとても重宝しています。Angularと違って簡単に書けるのが良いですね。
それなりの規模のアプリケーションを作るのに利用したことはないのですが、そろそろ使っても大丈夫なのかなぁという気もしますね。
いじょうです。
