CSSの5つの分類 | hijiriworld Web
※OOCSSについては過去記事を参照のこと OOCSS（オブジェクト指向CSS）のススメ 難しいOOCSS（オブジェクト指向CSS）の設計 再利用性の範囲を2つに分けて考える OOCSSはとにかくクラスを細分化すればいいってもんではない。 クラス=プロパティ レベルまで細分化されたCSSは、煩雑になるばかりかコストも高くなる。 だが、細分化すること自体が悪いわけではない。 失敗に陥るのは、再利用性の範囲を明確にしていないため。 再利用可能な範囲とは？ いま製作しているサイト内？ それともあらゆるサイト？ まずはこの線引きをしっかりすることが重要だと思う。 プロセッサー型CSSフレームワークmaple.cssのヘルパーには以下のようなクラスが定義されている。（抜粋 .ref { position: relative; } .abs { position: absolute; } .fl {
まず最初に学ぶべきWordPressの本質 | hijiriworld Web
これからWordPressをはじめようと思っている人が参考にしているWebサイトや関連書籍は、どれもこれもいきなりテーマ作成から解説しているものばかりです。 まず最初に学ぶべきWordPressの本質をきちんと解説しているところは、ほぼ皆無です。 テーマ作成というのは、テンプレートタグやコードをを覚えればいいだけの話なのでたいして重要ではありません。あとでなんとでもなります。 それよりも、WordPressとは一体どのような動きをするものなのか？という全体的な仕組みをしっかりイメージできることが最も重要だと考えます。 デザイン、コーディング、プログラミング、いえ、Webの世界に関わらず、すべてのものごとへの深い理解には、その本質をイメージできているかどうかで大きな差が出てくるものです。 普段私が WordPress の講義を行う時には、まずこの本質的なイメージについてしつこいくらい解説する
WordPress iPhone用のテーマを設定するプラグインの作り方 | hijiriworld Web
ちょっとしたサンプルを作成しながらの、WordPressプラグインの作り方チュートリアル。 1. プラグインの作り方 2. iPhone用のテーマを設定するプラグインを作る 3. 解説 プラグインの作り方 1. プラグインの名前を決める まずはプラグインの名前を決めます。 他のプラグインと重複しない唯一の名前にしましょう。現在公開されているプラグイン名はこちらで検索→プラグイン/WordPressCodex日本語版 2. プラグインファイルを作成 プラグイン名に由来する名前のPHPファイルを作ります。 ファイルは必ず UTF-8 エンコードにします。 標準プラグイン情報の記述 プラグインファイルの先頭に、標準プラグイン情報を記述します。Plugin Name のみ必須です。 これを記述することで、WordPress にプラグインとして認識され、プラグイン管理画面に表示されます。 <?php
Compass CSSスプライト+Retina対応+データURIスキームのMixin | hijiriworld Web
Posted on: 2013/06/21 Compass CSSスプライト+Retina対応+データURIスキームのMixin [2014/06/27 更新] ※ SassとCompassが使えることが前提 CompassでCSSスプライトしてRetina対応してデータURLスキームも行うミックスインを作ったので、そのメモ。 準備 ディレクトリ構成は以下の通り（Compass標準） images/spritesディレクトリに必要な画像を格納しておく。 コンフィグファイルの編集 relative_assetsは、ヘルパー関数で生成するURLを相対パスか、それとも絶対パスで表現するかの設定。 これをtrueにすることで、スプライトを生成した時に相対パスになるので設定しておくこと。 > config.rb css_dir = "css" sass_dir = "sass" images_dir
レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝 | hijiriworld Web
Posted on: 2012/06/22 レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝 Bootstrapの概要 Bootstrap とは、Twitter 社が提供する CSS フレームワークです。 実体は CSS と JavaScript で、決められたルールに従ってコーディングするだけで、いま流行りのいろいろな UI を作ることができます。 Bootstrap では LESS を採用しており、スタイルをカスタマイズして CSS をコンパイルすることができます。 LESS についてはこちら。 実際には、コンパイルされた CSS を読み込んで利用することになるので、LESS の仕組みを意識する必要はありません。 もちろん、コンパイルされた CSS を編集することもできます。 Bootstrap をはじめて使う時は、まずは一式ダウンロードして、いろいろ
難しいOOCSS（オブジェクト指向CSS）の設計 | hijiriworld Web
OOCSSとは、構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義する方法である。 OOCSSの考え方に基づいてスタイルシートを記述すると、パフォーマンスと再利用性、メンテナンス性の向上が見込めます。 しかし、OOCSSを上手に設計するのはけっこう難しいのです。なんとなくそれっぽく書いただけでは、OOCSSの導入を成功に導くことはできません。 TwitterBootstrapに代表されるCSSフレームワークなどは、高度に設計されたOOCSSと言えます。そのレベルまで完成度を高めようとするなら、そうとう高度な設計技術が求められます。 初心者が陥りやすいダメな例 > OOCSS? .red { color: red; } .blue { color: blue; } 一見「どんなサイトでも再利用できそうな汎用性のあるクラス定義で、CSSのプロパティを見なくてもマークアップで
jQuery UI Sortable は並び順を保存しなければ意味がない | hijiriworld Web
jQuery UI はとても便利なライブラリなので使わない手はありません。 ドラッグアンドドロップで要素の並び替えができる Sortable →サンプル1 使い方 必要なJavaScriptファイル ・jQuery ・jQuery UI 実装 > コーディング <ul class="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> > JavaScript $(function() { $( ".sortable" ).sortable(); }); たったこれだけで、ドラッグアンドドロップによる要素の並び替えができるようになります。 オプションやメソッドを設定することでいろいろできます。 リッチなUIって感じですね！ 「で？」 ていうか、 「並び
Bootstrap transition.jsの使い方 | hijiriworld Web
Bootstrap / Bootstrap/GitHub CSS3 TransitionのコールバックをJavaScriptで検知して処理する方法は、webkitTransitionEndイベントにバインドすれば実現できます。 CSS3 Transition #hoge { ... opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; } #hoge.fade { opacity: 0; filter: alpha(opacity=0); } JavaScript document.get
query_posts(), get_posts(), WP_Query()による$wp_queryオブジェクトの違い | hijiriworld Web
基本構文 query_posts() <?php query_posts( $args ); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <p><?php the_title(); ?></p> <?php endwhile; endif; ?> <?php wp_reset_query(); ?> get_posts() <?php $myposts = get_posts( $args ); ?> <?php foreach($myposts as $post) : setup_postdata($post); ?> <p><?php the_title(); ?></p> <?php endforeach; ?> WP_Query() <?php $the_query = new WP_Quer
SNSボタンをそのまま設置すると高速化の足を引っ張る | hijiriworld Web
サイトにSNSボタンを設置する時、どのように実装するでしょうか？ 公式にアナウンスされているタグを見てみます。 Facebook facebook developers > Like Button <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class=
スマホサイト制作 table-cellレイアウトとtext-overflow | hijiriworld Web
「tableはダサいからdivを使おう！」とよく聞かれたのは5年前くらいからでしょうか。 それ以後、divにfloatを設定してレイアウトを組むのがスタンダードになりました。 ただし、floatというプロパティを正しく理解していない人はけっこう苦労したはず。 *floatについての正しい理解はこちらの記事を参考のこと > IE6の呪縛 フロート（float）を正しく理解する ということで、floatというプロパティを正しく理解してclearfixをきちんと使えるようになると、floatレイアウトは楽勝になってきます。 ですが、このfloatレイアウトはマークアップが複雑になりがち。 可変レイアウトを基本とするモバイルファーストのWeb制作においては特に。 以下のようなレイアウトをもっとスマートに記述できないものか？ 「display: table」と「display: table-cell
WordPress プラグイン開発者用メモ 多言語対応 – 翻訳リソースファイルの作成手順 | hijiriworld Web
Posted on: 2012/11/22 WordPress プラグイン開発者用メモ 多言語対応 – 翻訳リソースファイルの作成手順 プラグイン側の設定 1. 多言語化文字列の記述 多言語化の対象となるテキストを _e() などで記述しておく。 ※_e() 内の文字列に日本語が含まれているとあとでエラーになるので注意。 _e('Add New', '{plugin-name}'); プラグイン内の翻訳ファイルのみを適用する場合は、第二引数を指定すること。 第二引数を指定しないと、WordPress本体の翻訳ファイルも適用される。 2. load_plugin_textdomainの記述 load_plugin_textdomain('{plugin-name}', false, basename(dirname(__FILE__)).'/lang' ); この場合、plugin-name
WordPress テーマ作成時には必ず指定しておきたいネイティブCSS | hijiriworld Web
※連続改行したいという人がよくいますが、brタグによる連続改行はHTML5の規則的にはダメダメです。セマンティック的にもなんの意味もないのでやめましょう。マージンが欲しければスタイルシートで定義してください。 さて、上記のように入力した値は以下のような構造で出力されます。 <p>あああ</p> <p> いいい <br /> ううう </p> ビジュアルエディタ上での見た目と出力された見た目を同じにするため、すなわち、段落としてのスタイルを定義するならば、pタグのスタイルは以下のようになるでしょう。 > テーマ/style.css p { display: block; margin: 1em 0; } TinyMCE ビジュアルエディタのTinyMCEも考慮するべきでしょう。 それぞれのボタンで挿入されるタグのスタイルも指定しておきましょう。 最初にリセットCSSをしない場合は不要です。
WordPress マルチサイトの新規サイト作成時にカスタム初期設定とカスタム初期データを設定しておく | hijiriworld Web
Posted on: 2012/10/19 WordPress マルチサイトの新規サイト作成時にカスタム初期設定とカスタム初期データを設定しておく WordPressでマルチサイトを構築する場合、連なる複数のサイト同士はなんらかの関連性を持っているはずです。よって、マルチサイトにおいては、初期設定と初期データをカスタム設定した状態で新規サイトを作成できると良いです。 例えば、ディフォルトテーマを設定しておいたり、共通カテゴリーを初期データとして登録しておく、などです。 一般的にマルチサイトでは、プラグインとテーマは一括で有効化できます。 カスタム投稿タイプやカスタムタクソノミーはテーマフォルダ内のfunctions.phpで定義しておけます。 しかし、テーマの選択や、パーマリンク設定、カテゴリーの入力などは、サイトを追加する毎に設定しなくてはなりません。 この最後の作業を、初期設定と初期デ
jQuery UI Datepicker 日付選択 | hijiriworld Web
日付の入力フォームを作った場合、入力されるフォーマットは揃えておきたいものです。 じゃあ、入力フォームの隣に「※日付は『yyyy/mm/dd』形式で入力してください」と書いておこう、なんて、そんな原始的なことをしてはいけません。 ユーザビリティ的にも、ポップアップカレンダーなどの入力支援を設置するのが良いです。 日付の入力支援を実装する方法はいくつかありますが、時代はjQueryだ！ということで、今回は、jQuery UI のDatepickerの実装方法を紹介します。 ・jQuery ・jQuery UI ・jQuery UI Datepicker 目次 1. デザインをカイスタマイズ 2. ダウンロード 3. フォルダ構成 4. 実装 デザインをカイスタマイズ まず、ブラウザ上で、jQueryで実装できるUIのカスタマイズをまとめて行います。 →jQuery UI ThemeRolle
WordPress アクションフックとフィルターフック概論 | hijiriworld Web
プラグインAPI WordPressの機能をカスタマイズしたことがある人なら、カスタムコード内に add_filter や add_action という関数を見かけたことがあるはずです。 これはWordPressの「プラグインAPI」という仕組みを利用したものです。 え？サンプルコードをコピペしてるだけで中身のコードなんて見たことない？ そんなのダメダメ。 この仕組みが分かると、WordPressの熟練度は「中級」にレベルアップしますッ アクション・・・実行中の特定のポイントもしくは特定のイベント発生時に WordPress のコアが起動させるフック。WordPressで発生する特定のイベント。例えば投稿の公開、テーマの変更、管理画面の表示など。 フィルター・・・データベースに追加する前やブラウザに出力する前に、さまざまなタイプのテキストを改造するために WordPress が起動させるフ
WordPress 管理画面のカスタマイズ まとめ | hijiriworld Web
WordPress管理画面のカスタマイズ詰め合わせ ※随時更新していきます ダッシュボード 不要なウィジェットを削除 カスタムウィジェットを追加 ウィジェットの配置を変更 投稿画面 不要な項目を削除 エディタ ビジュアルエディタを無効にする HTMLエディタの不要なボタンを非表示 HTMLエディタにカスタムボタンを追加 フッター サイドメニュー メニューの名称変更 メニューの並び替え メニューを非表示 カスタムメニューを追加 管理バー サイト側の管理バーを非表示 不要な項目を削除 投稿一覧画面 不要なカラムを削除（投稿、ページ、カスタム投稿タイプ） カスタムカラムを追加（投稿、ページ、カスタム投稿タイプ） ソート機能も実装した応用技 ログイン画面 スタイルを変更 ログイン/ログアウト後のリダイレクト先を変更 バージョンアップ通知をOFF WordPress本体のバージョンアップ通知 プラグ
Bootstrap 2.1「Affixプラグイン」がわかりにくかったので少し紐解いてみました | hijiriworld Web
仕組みは以下 Affixプラグインの仕組みを図解 まず、Affix要素はスクロール量とoffset引数によって、「.affix-top → .affix → .affix-bottom」と、クラスが自動的に変化していく。 offset引数（offset:top, offset:bottom）は以下の高さを指定する。 そうすると、状態変化と共にクラスが変化していく。 という仕組みがわかれば、さきほどの動作サンプル3でいいように見える。 でもこれは不完全。 正確には、”BootstrapのCSSを読みこんでいる場合”は不完全。 Bootstrapのサイトで実装されているAffixへの疑問 BootstrapのCSSを読み込んでいる場合、これだけではうまくいかないはず。 Affixが発動すると親要素の高さがゼロになるはず 追従を開始する（.affix）と、通常フローから逸脱する、つまり「posi
WordPress カスタム投稿タイプの使い方とその力 | hijiriworld Web
目次 1. カスタム投稿タイプとは？ 2. カスタム投稿タイプの導入（プラグインを使う方法） 3. カスタム投稿タイプの導入（直接コードを書く方法） 4. カスタム投稿タイプを表示する 5. カスタム投稿タイプとカスタムフィールドを組み合わせる 1. カスタム投稿タイプとは？ WordPressには、更新コンテンツを一覧管理できる項目として、「投稿」と「固定ページ」の2つが用意されています。 ただのブログならば十分ですが、WordPressをCSMとしてWebサイトを構築しようと思うと不十分です。 なぜなら、一般的なWebサイトには、ブログの他に、ニュースやフォトギャラリー、FAQなど、様々は更新コンテンツが考えられ、投稿タイプも様々だからです。 初期状態でも、カテゴリーで投稿タイプを分けて管理することはできますが、やはり投稿タイプが異なる記事はそれぞれ一覧管理できた方が便利です。 それを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google vs Facebook スマホサイトの横スライドメニューの比較 | hijiriworld Web