カテゴリーで分類するアレです。 はじめに図解します。 元となる<a>要素 display: inline-blockを設定することで幅・高さを設定出来、なおかつ改行せずに親要素の幅に合わせて流れ込んでくれます。 inline-blockの要素は流れこむ inline-block inline-block inl</a>…

タイトルで使っています。 text-shadowをブラーを掛けずに８方向に落とすことで白抜きっぽくなります。 .outline-cha { color: white; text-shadow: black 1px 1px 0px, black -1px 1px 0px, black -1px -1px 0px, black 1px -1px 0px, black 1px 0px 0px, b…

CSSルールを追加するだけのモジュールです。 npm: append-css インストール Nodeがあってnpmが使える場合は、 npm install append-css npmがない場合はgithub: append-cssからダウンロード。 使い方 ブラウザの場合 browser/build.jsを読み込む。 <script src="browser/build.js"></script> <script> var appe</script>…

htmlの中の任意の要素のdata-eval属性の値をJavaScriptとして実行するだけのモジュールです。 npm: evaluable-tag インストール Nodeがあってnpmが使える場合は、 npm install evaluable-tag npmがない場合はgithub: evaluable-tagからダウンロード。 使い方…

RoomMirrorとは Markdownから生成したHTMLの中のコードブロックにCodeMirrorでシンタックスハイライトを行うために作ったもの。 npm: RoomMirror RoomMirror: ドキュメント この記事はドキュメントの内容に修正を加えつつまとめたものです。 インストール No…

はてなブログのCSSを編集する際、ブラウザの中のエディタで全てを完結させるのはちょっとつらいです。 編集したCSSをプレビューで見れますが、変更を保存するかゼロに戻すかしかないので大掛かりな改修は現実的でないです。 これをローカルでデザインを完成…

はてなブログのコードの表示に個人的になんとなく違和感があって、特にモバイル環境で見た時の折り返しが見難い。 どうにもこういうものは見た目をカスタマイズしたい願望があって、はてなブログはモバイルのデザインをカスタマイズできない*1のがどうにもつ…

Font Awesome 今回デザインをリニューアルするにあたって前々から気になっていたFont Awesomeを使った。 サイズ的に重くなり過ぎないか心配だったけど思ったより大丈夫そう。 文字コードやfont-familyを意識しなくても使える 前知識として「Web Fontでアイコ…

疲れた。 ちなみにモバイルのデザインはProに入ってないので変わってないです。 個人的には、モバイルはデフォルトのデザインが気に入っているのでいいかなと思っています。 公式テーマから流用した部分 ほとんどはゼロから書きましたが、CSSリセット、セレ…