素人趣味のWeb制作ブログ

素人趣味でやってるWeb制作とかプログラミングとかそっち系の話題についてのブログです。

素人趣味でやってるWeb制作とかプログラミングとかそっち系の話題についてのブログです。

2013-01-01から1年間の記事一覧

nvALTというMarkdownエディタが良い

LightPaper を使ってたんだけど、コード補完がおかしくて邪魔でしかなかったり保存がめんどかったりして嫌気が差してきたのでもっと良いのあるかもしれないと探してみたら、nvALT というMarkdownエディタを見つけて使ってみたら良かったので紹介する。 優れ…

いい感じに改行を行いたい

色々調べた結果、 いい感じな改行を実現するSCSS mixin。 こんな感じになった。 まず、 body { word-wrap: break-word; } これはURLとかの長い半角文字列が改行されずに親要素の横幅をこえてしまうのを防ぐためにする設定。 次の pre { overflow: auto; whit…

SassのKeywords Arguments

SassにKeywords Argumentsなんていうのがあるのを知った。 これがとても便利で例えば、 @mixin test($a: true, $b: true, $c: true) { @if $a { // ... } @if $b { // ... } @if $c { // ... } } こんなmixinがあったとして、 「$cだけfalseにしたい」 なん…

ベンダープレフィックスを良い感じにしてくれるautoprefixerを試した

CSS

autoprefixerが良さそげだったので試してみた。 検証にはgruntで使えるgrunt-autoprefixerを使った。 普通に試してみる .box { background-size: cover; } まずはオプションなしで↑を変換すると試してみると次のようになった。 .box { -webkit-background-si…

linear-gradientの記述を極限まで減らす

Compassで@include linear-gradientすると background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dd8099), color-stop(100%, #d86c89)); background-image: -webkit-linear-gradient(#dd8099 0%, #d86c89 100%); background-image…

gruntでテンプレート変数に基づいたconcat

HTMLをパーツごとに分割して開発して、最後にconcatして1つのファイルに統合したい状況になったのでサクッと書いてみました。 gist6596364 設定 template_concat: 'html/dest/index.html': 'html/src/index.html' 'html/dest/page-1.html': 'html/src/page-…

KeyRemap4MacBookでキー配置変更してみた

Mac

シングルクォートが打ちにくすぎてめんどくさくなってダブルクォートを入力しちゃうのでアンダースコア+Shiftにもシングルクォートを割り当てようと思って KeyRemap4MacBookでキー配置を変更してみました。名前にMacBookとか入ってるけど普通にiMacでも使え…

Compassでスタイルシート生成後にCSSOで圧縮

CSSOっていうすごく良い感じにスタイルシートを圧縮してくれるツールがあります。それで、Compassでスタイルシート生成後に自動でこのCSSOで圧縮したいと常々思ってたんですけど、config.rbにスタイルシートを保存したときの動作を記述できるのを知ってさっ…

CSSでペケマーク

ペケマークよく使うからSCSS+Compassで手軽に作れるようにしてみた。 とは言ってもIE8以下だとtransformが使えないのでしばらくは専らモバイル用。

Compassでのローカル・本番環境の画像パス設定について

画像だけサブドメイン・別ドメインで運用したりするとき、例えばこんな場合、 ローカル: ./images 本番環境: http://pic.xxx.com images_path = './images' ↑の設定でローカル開発中に生成されたスタイルシートは本番環境で使うことができない。 かと言ってi…

入力フィールドのスタイル設定のメモ

どんどん種類が増えていくテキストフィールドに対してスタイルを設定するのはナンセンスなので、input, textareaでテキストフィールドのスタイリングをして、その後ろに少数派のチェックボックス・ラジオボタン・ボタンのスタイルを記述していくと良さそげ。…

簡易throttle

throttleしょっちゅう使うけどプラグイン使うのも面倒くさいので、 Date.now() しない throttle を関数化してみた。 easy throttle 使い方は、 $(window).on('resize', throttle(function(e) { console.log("hoge"); }, 50)); こんな感じ。

一瞬で横並びメニューを作れるPhotoshopスクリプト

前回の記事に続いて、またPhotoshopスクリプトです。 横幅いっぱいにメニューを並べたいとき、間隔を計算して、1個ずつどの座標になるか計算して配置してたら日が暮れます。 そんなわけで作ったのがこのスクリプトです。 どんな感じになるかというと、 1. …

等間隔に整列するPhotoshopスクリプトを作った

使い勝手の良いものがなかったので作りました。 既存のものとかと違うところは、 グループ単位で整列できる 間隔にマイナス値を入力できる シェイプレイヤーとかに使っても間隔がおかしくならない こんな感じ。 1については、なぜか既存のもので出来るものが…

スクロールするとサイドバー消えるサイトって

UI

結局Githubめんどくなってとんぼ返りの巻。お久しぶりです。 ところで最近増えてる、スクロールするとサイドバーが消えるサイトありますよね。 僕はつくづく思います。何を考えてあんなクソな機能を導入したんだろうと。 僕はあの機能を導入してるサイトを見…

SNSのシェアカウントをJavaScriptで取得する

各SNSのシェアカウントをJavaScript(jQuery使用)で取得したくてググったら便利なサードパーティーAPIを見つけたのでそれを使ってシェアカウントを取得してみました。(ついでにはてなブックマークも)

Finderのファイルの種類に好きな拡張子を分類する

Mac

Finderで並び順序を"種類"に設定したときに.mkvファイルがムービーに分類されなかったので、これをムービーに分類されるようにしてみます。

Chrome拡張のMarkdownエディタ「Textdown」が素敵

Windows用のMarkdownエディタってあんまり良いと思えるものがないですよね。 なので僕はMarkdownビューワーを自作してテキストエディタと併用してました。 ちょうどMacでいうところのMarkedみたいな感じです。

Feedlyで選択中の記事をPocketに追加するショートカットキーを設定する

僕はRSSリーダーにFeedlyを使ってるんですけど、 タイトル一覧を流し読みして気になった記事をSaved For Laterに追加していく Saved For Laterの記事を読む Saved For Laterの記事を削除する って感じに読んでました。 でもこれだと、読んだ記事を後からまた…

Growl for Windowsを導入した

コンソール最小化した状態でもエラー出たかどうか分かりやすいように通知ほしいなーっと思って。 MacのGrowl的なものないかなーと調べてみたらズバリそのままGrowl for Windowsなるものを発見したので導入しました。

Wordpressテーマ作成用のテスト記事データまとめ

Wordpressのテーマでも作ろうと思って、ローカル環境作ってたわけなんですけど、 自前で記事書くのもめんどくさいので記事データ配布してないかなーと思って検索してみたらありました・・・! ていうか結構あるんですね。全然知らなかった。

はてなブログのシンタックスハイライトの色を変更する

シンタックスハイライトの色を変えたいので頑張ってみる。

CoffeeScript+jQueryプラグインなGruntfile.jsを書いた

jQueryプラグインを書く機会が多いのでCoffeeScript+jQueryプラグインなGruntfile.jsを書いてみました。 行数あるので続きにて。

Photoshop用のパターンやアクションなどをクラウドストレージに保存して運用する

OSを再インストールしたりするとPhotoshop関連のファイルがすべて吹っ飛んでしまって、 バックアップ忘れてたりすると禿げるので、クラウドストレージに保存してバックアップ不要にしてみました。

Windowsバッチのif文の括弧にハマる

Windowsのバッチファイルを作ってて、 ifと括弧の関係でちょっとハマったので備忘録。

ローカルサーバーを立ててはてなブログのテーマ作成を快適に

はてなブログテーマ制作の手引きによると、 テーマ確認用のブログを新しく作ってサンプルエントリーをいくつか投稿してやると良いとのこと。 そうなると当然、デザイン設定の部分にローカルのCSSファイルを@importしたくなりますよね?

はてなブログのテーマを自作してみた

はてなブログのテーマを初めて作ってみたので、 僕なりの作り方みたいなのを紹介します。

Consoleをインストール・設定して良い感じにしてみた

Windowsのコマンドプロンプトの使い勝手&見た目を良くしたくて調べたら、 Consoleというアプリを使うのが良さそうなのでインストールしてみました。