Flexboxベースの軽量レスポンシブCSSフレームワークBasisをつくりました。
Flexbox ベースの軽量レスポンシブ CSS フレームワーク Basis を公開しました。もともと Bootstrap が好きでよく使っていたのですが、いろいろ「ん？」となることがあって、別のフレームワークを探してみたりもしたのですがなかなか条件にあうものが無く、それならいっそ作ってしまえ！ということで作りました。 導入方法・マニュアルは下記をご参照ください。 ということで、既存のフレームワークの何が不満だったのかということも交えつつ、Basis の特徴など。 Basis の特徴 Flexible box ( Flexbox ) ベースのグリッドシステム Basis はグリッドシステムが float ベースではなく、Flexible box ( Flexbox ) ベースとなっています。今でこそ Flexbox ベースのグリッドシステムが使えるフレームワークがいくつかでてきていますが、
Bootstrap ベースのシンプルでカスタマイズ性の高い WordPress テーマ Habakiri が公式ディレクトリに掲載されました。
Habakiri Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。 公式サイトを見る 先日、WordPress の公式テーマディレクトリにテーマ Habakiri が掲載されました。以前掲載された Kotetsu に続き2つ目のテーマ掲載となります。 お使いの WordPress の管理画面にログインし、テーマインストール画面で「Habakiri」と検索すればすぐにインストールできます。このサイトも Habakiri を親テーマとして使っているので、だいたいの雰囲気はわかるかなと思います。 Habakiri の特徴 WordPress テーマ Habakiri には次のような特徴があります。 Boot
Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境
Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 browserify とは そんなに詳しくないのですが、browserify はざっくりと言えば js で requireを使えるようにするためのツールです。今までであれば複数の js ファイルが必要な場合、例えば、a.js と、a.js がないと動かないb.js を読み込む場合だと、HTML ファイルに下記のような記述が必要でした。 // index.html <script src=".js/a.js"></script> <script src=".js/b.js"></script> browserify を使
フェードイン・フェードアウトを用いた気持ち良いページ変遷を実現する方法
ギャリーサイトで見つけた名古屋のデザイン会社さまのWebサイト。 鞍知 on 鞍知［クラッチ オン クラッチ］ デザインもクリーンで良い感じなのですが、特に良いと思ったのがページ変遷のときのアニメーション。リンクをクリックするとページがフェードアウトし、ローディング画像が表示、そしてリンク先のページがフェードインしてきます。これがとても気持ち良い。 ということで、このブログにも軽く実装してみたので、その方法をご紹介。 jQueryのanimate関数を使って実装します（てことでjQuery本体も読み込んでくださいね）。下記のコードをhead内にコピペでいけるかと思います。 // まずbodyを非表示に jQuery('head').append( '<style type="text/css">body{display:none;}</style>'); jQuery( function(
各ディレクトリごと、各データベースごとにバックアップをとるシェルスクリプト
以前、「MySQLとWebディレクトリのバックアップをとるシェルスクリプト」という記事でMySQLとWebディレクトリのバックアップをとるシェルスクリプトを紹介したが、これは全てのデータベース、Webディレクトリをそれぞれまるっと一つの圧縮ファイルにまとめるものだった。 複数のサイトを一つのサーバーで運営しているが、容量が増えるに連れ、単一ファイルに圧縮してしまうと特定のサイトだけリストアしたいときや、バックアップの一部を別ホストに移動したいときなどに不都合がでてくるようになった。 そこで、MySQLサーバーのデータベース一覧を取得して各データベースごとに圧縮、指定したディレクトリ以下のディレクトリ（もしくはファイル）ごとに圧縮するようにシェルスクリプトを改良してみた。 #!/bin/sh # 何日分保存するか period=3 # バックアップしたいディレクトリ wwwdir=/var/
バックアップはクラウドへ…。Amazon S3でクラウドバックアップ
Amazon S3はAmazon Web Servicesによって提供されるクラウドストレージ。容量や通信量に応じて課金される重量課金制のウェブサービス。そこそこの容量でも通信量が多くなければ低価格で利用できるためバックアップ用途にとても相性が良い。 これまでVPSをバックアップ用途に利用していたが、Amazon S3でも簡単にバックアップの仕組みが構築できたので、これからWebサイト等のバックアップを行いたいと考えている方にAmazon S3へバックアップする方法をご紹介したい。 AWS（Amazon Web Services）に登録する Amazon S3を利用するには、まずAWSにアカウント登録する必要がある。登録画面が英語で迷ってしまったが、本記事を書く際、オフィシャルにわかりやすく登録手順がまとめてあるのを見つけてしまった。まだ登録されていない方は下記を参考に登録されると良いだろ
今日から始めるMacのローカル開発環境構築（MAMP導入編）
今までMacのローカル環境で開発するときはVirtualBoxでバーチャル環境を作り、そこを使って開発していたのだが、重くなったりファイルのやり取りが面倒だったりして、結局外部にテストサーバーを立ててローカルでは開発しないということが多かった。しかし、先日の勉強会で参加者のみなさんがMAMPやXAMPPのローカル開発環境を持っていたのを見て、僕もちゃんと構築しておこうと思い直しローカル開発環境を構築してみることにした。 やりたいこと Macでローカル開発環境を構築するにはMAMPを使うのが一般的のようだ。普通にインストールしてMAMPを起動すると、http://localhost:8080 というURLでローカルの環境にアクセスできるようになる。しかし、これだと本番環境とURLが異なりいろいろと面倒が増えるし、複数サイトを管理するときに不便である。そこで、MAMPのApacheの設定を変更
WordPressに大量の記事を登録したい場合はCSV Importerが便利 | モンキーレンチ
WordPressでネットショップや地域ポータルなどを制作する場合、商品リストや店舗リストなどを数多く登録する必要があると思います。そんなとき、一つ一つ管理画面から入力、投稿するのは大変な労力がいりますし、もしデータが数千とかだともう無理ですね。そんなときは… WordPressでネットショップや地域ポータルなどを制作する場合、商品リストや店舗リストなどを数多く登録する必要があると思います。そんなとき、一つ一つ管理画面から入力、投稿するのは大変な労力がいりますし、もしデータが数千とかだともう無理ですね。 そんなときはCSV形式のデータを一気にインポートできる「CSV Importer」が便利です。 使い方 1.CSV Importerをインストールし有効化 WordPress › CSV Importer « WordPress PluginsからCSV Importerをダウンロードし、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress のカスタムフィールドを簡単・便利に使えるようになるプラグイン「Smart Custom Fields」作った。