Basis ベースの HTML5 + Sass テンプレートを公開しました。
オンラインショップを想定したテンプレートです。これも同じく詳細ページなどのテンプレートはありません^^; ライセンス：MIT License / 写真：Unsplash リポジトリ構成とか テンプレートを作る中で、Basis に含めるほどでもないけどドロワーメニューはいるだろうとか、やっぱり Card コンポーネントもあったら便利じゃね？みたいな感じがしたので Basis 本体とは別にリポジトリを用意して管理するようにしました。もしそれぞれ完成度があがってきたり、含めたほうが勝手が良いみたいになったら本体に移そうかなーとか考えています。 もともと個人の GitHub アカウントで Basis のリポジトリを管理していましたが、それだと Basis 用の他のリポジトリが増えてきたときにごちゃごちゃになりそうだったので Basis 用の Organization アカウントを作ってそこで管理す
アニメーション機能の追加やバーティカルリズムの考え方を取り入れた Basis v3.0.0 を公開しました。
Flexbox ベースのレスポンシブ CSS フレームワーク Basis をアップデートしました。アップデート内容は下記の通りです。 トランジション、アニメーション用クラスの追加 行間や余白の取り方にバーティカルリズムの考え方を適用 ヒーローコンポーネントの追加 ブレイクポイントを px ベースから em ベースに変更 Normalize.css を最新版にアップデート トランジション、アニメーション用クラスの追加 トランジション CSS トランジションは1行で設定できるのでわざわざクラスを作る必要はないかなとも思ったのですが、サイトごとにトランジションの感じを変数で統一できるようにするためにクラスを用意しました。変数は下記のようになっています。 /** * アニメーションにかかる時間 * @type second|milisecond */ $bs-transition-duration
Flexboxベースの軽量レスポンシブCSSフレームワークBasisをつくりました。
Flexbox ベースの軽量レスポンシブ CSS フレームワーク Basis を公開しました。もともと Bootstrap が好きでよく使っていたのですが、いろいろ「ん？」となることがあって、別のフレームワークを探してみたりもしたのですがなかなか条件にあうものが無く、それならいっそ作ってしまえ！ということで作りました。 導入方法・マニュアルは下記をご参照ください。 ということで、既存のフレームワークの何が不満だったのかということも交えつつ、Basis の特徴など。 Basis の特徴 Flexible box ( Flexbox ) ベースのグリッドシステム Basis はグリッドシステムが float ベースではなく、Flexible box ( Flexbox ) ベースとなっています。今でこそ Flexbox ベースのグリッドシステムが使えるフレームワークがいくつかでてきていますが、
WordPress で Web サイトの制作を請け負って保守契約も結ぶときに意識しておいたほうが良い5つのこと
反応をウォッチしていると「WordPress を導入する場合、セキュリティを考えると当然システム保守契約を結んで保守することが必要」という意見がちらほらあって、僕としてもそれは当然のことでむしろやっていない人は作成した後えらいことになってないのか少し心配になったりしてしまうのですが、じゃあクライアントと保守契約を結べたとしてどういうことに気をつけたほうが良いかということを少し書いてみたいと思います。 コア・プラグインのアップデートは必ず実施する 大前提すぎてあれなのですが、セキュリティを維持して攻撃を防ぐためにお客様にシステム保守契約を結んでいただくわけなので、コアやプラグインのバージョンアップは必ず行わないといけません。企業さんのサイト制作の場合だとテーマはオリジナルのことが多いと思いますが、テーマも自作でないのであればきちんとアップデートするべきです。 「コアの自動アップデートをとめる
複数人でブログを執筆するときに便利！ユーザーの一覧と著者プロフィールを表示するプラグインつくった。
複数人で記事を執筆するようなブログの場合（会社ブログとかメディアとか）、執筆者の一覧のアバターがバーっと表示されていると良い感じですよね。WordPress 標準のウィジェットにはそのようなものが無いようだったのでプラグインをつくりました。 ダウンロード 使い方 プラグインをインストールしてウィジェットの設定画面にいくと、「Profile」と「Authors List」という2つのウィジェットが追加されています。「Profile」は記事のページでそのページの著者のプロフィールを表示できるウィジェット、「Authors List」は著者のアバター一覧を表示するウィジェットです。 Profile ウィジェット Profile ウィジェット そのページの著者のプロフィールを表示できるウィジェットです。アーカイブページではウィジェット自体表示されず、シングルページでのみ表示されるようになっています
Grunt + Sass + Compassでつくるナウいフロントエンド開発環境
Grunt、Vagrantなどの制作作業を効率化するツールがいろいろとでてきていますね。存在はしっていたものの、今の環境で著しく不便を感じているわけでは無いし、面倒だし…と手を出さずにいたのですが、OS Xでの環境構築について手順をまとめてくださっている記事があったので、通してやってみました。 上記の記事を見て一通り設定はできたのですが、GruntやCompassの設定に戸惑ってしまいました。設定作業中もいくつかエラーが出たりしたので、そのあたりも考慮して僕の行った環境構築の手順についてまとめてみました。僕のようにまだこのあたりのツールに興味はあるけど手を出していないという方は参考にしてみてください。 もろもろをインストールする Xcode まず、AppStoreからXcodeをインストールします。コマンドラインツールも必要なので、下記のコマンドでインストールします。 xcode-sele
スクロールすると自動的にトップへ戻るボタンがでてくるjQueryプラグインを作りました。 | モンキーレンチ
最近よく目にする、ページをスクロールしていくと出てくる「トップへ戻るボタン」をjQueryプラグイン化したので公開します。 ダウンロード GitHubで公開しています。 inc2734/jquery.scrollButton.js 使い方 プラグイン読み込み 下記のコードを記述してjQueryとプラグインを読み込みます。head要素の中とかが良いと思います。 <link rel="stylesheet" type="text/css" href="/PATH/TO/jquery.scrollButton/jquery.scrollButton.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <scri
エラーがでてしまう方必見！Facebookのいいねボタンとシェアボタンの両方を設置する正しい方法 | モンキーレンチ
1年ほど前にFacebookのいいねボタンとシェアボタンは統合されました。それにより、いいねボタンを押した場合でも以前のシェアボタンを押したときと同じようにユーザーのウォールに情報が流れるようになりました。また、いいねボタンがシェアボタンと同様の機能を持ったことで、シェアボタンの配布も終了したようです。 管理しているサイトを、実際にFacebookのインサイトで確認してみると、確かにシェアのほうがクリック率が高いことが判明。早速上記の記事に従い、WordPressに下記のようなコードを設置。 設置コード（改良前） <body>タグ直後 FacebookのJavascript SDKを非同期読み込み、シェアボタンのJSを読み込み。 <div id="fb-root"></div> <script type="text/javascript"> window.fbAsyncInit = fun
ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。 | モンキーレンチ
Posted by キタジマタカシ 2012年02月14日 21:33 Category : jquery.smoothScroll.js Tags : JavaScript, jQuery, プラグイン ページ内リンクをクリックした場合にスムーズにスクロールするようにしてくれるjQueryプラグインです。同じようなプラグインはたくさん公開されているのですが、これだ！というのがなかなかなかったので自作してみました。 ダウンロード jquery.smoothScroll.jsをダウンロード デモページ デモページ 使い方 下記のような感じでjQueryとjQuery.smoothScroll.jsを読み込みます。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jqu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Grunt で WordPress テーマ・プラグインを公式ディレクトリと GitHub の両方で管理しやすいようにした。
ブログ
2inc.org - CSSで背景画像を中央揃えしたらIEで1pxずれる件
CSSで背景画像を中央揃えしたらIEで1pxずれる件 < 2inc.org