リストを自動で3列に分ける
Result リストを自動で任意の列数に振り分ける、みたいなの。マルチカラムレイアウトを使います。 リスト分けたいだけならテキストコンテンツのようにbreak-insideやpage-break-insideを考えなくていいので楽ですね。 CSSではなくJavaScriptを使う方法は過去に書いてます。jQueryを使いますが・・ →リストを任意のカラム数に分ける css.columns {/*分けたいリストの親要素に指定する。column-countはカラム数*/ column-count: 3; column-gap: 26px; list-style: none; margin: 0; padding: 0; }html<ul class="columns"> <li> <label> <input type="checkbox" />1 lorem ipsum </label> <
query_posts（WP_Queryクラス）で’tax_query’を使いこなす
説明 2日にわたって投稿した「query_posts（WP_Queryクラス）でカテゴリーを絞り込む」「query_posts（WP_Queryクラス）で投稿タグを絞り込む」の続き。今日はカテゴリーや投稿タグ以外ののタクソノミーによる絞り込み、複数のタクソノミーの絞り込みの組み合わせについてまとめてみる。 そもそも一連の投稿のきっかけになったのは、新テーマ「Twenty Eleven」の短冊ウィジェットがきっかけだった。その部分はこちら。 'tax_query' => array( array( 'taxonomy' => 'post_format', 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-status', 'post-format-quote' ), 'field' => 'slug
WordPressの新機能 複数タクソノミークエリーまとめ – Simple Colors
先日、「WordPress 3.1 RC3 をみんなでテスト！ 」に参加し、その際、複数カスタムタクソノミークエリー（en. Multiple Taxonomy Handling）のテストを担当させてもらいました。 ついでに、仕様などについても探ってましたので、まとめてみることにします。 複数タクソノミークエリーとは なるべく正確に言うと、query_posts または get_posts の引数に新たに設けられた tax_query により、カテゴリー、タグ、カスタムタクソノミー等による記事抽出条件を、複数かつ様々なパラメータで細かく設定できる機能。 tax_query の値は、抽出条件毎の配列と各条件の結合方法（パラメータ名：relation）で構成される。 こう書いても、分かりにくいと思いますので、もっとかみ砕いて、粉状にして言うと「これさえ憶えておけば、WordPressでの絞り込
エクセル（Excel）で2つのプルダウンリストを連動しよう♩+INDIRECT関数 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
2つのプルダウンリストを連動させる 動的に選択肢を出すなんて、難しい数式が必要なんじゃない？と思うかもしれませんが、そんなことないんです！ 以前紹介した「名前」という機能を使って、簡単に2つのプルダウンリストを連動させてみましょうー。 1. 表を作成する たとえば、こういう感じの表を作成するとします。 この表のなかで、「ユニット（職種）」と「担当者」の2か所をプルダウンで選びたい！ 選んだユニットと連動して、担当者の選択肢が変わるようにしたい！とします。 2. リストの元データに「名前」を付ける まず、選択肢の元となるリストを作ります。 例の場合ですと別シートで作成していますが、同じシート内でも大丈夫です^^ タイトルを付けて表形式にすることで、編集をする場合や他の人が見る場合にわかりやすくなります。 ここで活躍するのが前回説明した「名前」の機能です。 プルダウンリストは、「名前」を使って
フォントを一覧表示できるWebサービス3選！デザインの参考に | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は、ロゴや画像制作などのアイデア出しに気軽につかえるフォントビュワーを3つご紹介します。どのサイトも自分のPCに入っているフォントを一覧で表示してくれるWebサービスです。 独学でつまずいていませんか？ Webデザインの基礎を効率的に学びたい、現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました フォントを一覧表示してくれるサービス Wordmark Wordmark まずご紹介したいサイトがこちら。私が1番お世話になっているところです。 シンプルで使いやすい！ さらに表示も綺
イメージギャラリー等で使うようなグリッドレイアウトでアイテムの数に関係なく幅を揃えてくれるスクリプト・「Layout Balancer」
Layout Balancerはイメージギャラリー等でよく使われているグリッドレイアウトで、アイテムの数に関係なく幅を揃えてくれるスクリプトです。jQueryに依存しています。語彙が乏しいのでうまく説明出来ないのでサンプルを上に用意しました。動的に数が変わるようなコンテンツでも空の部分が出ないようにしたい、という目的のようですね。コードもシンプルで良い感じです。 Layout Balancer
スマホやPCのブラウザ間でYouTubeのプレイリストを共有できる「Playlistful」
パーティーには音楽が欠かせないものですが、欠席している人や遠く離れた人でも流しているBGMを共有できれば同じ雰囲気を味わうことも可能です。でも「音楽は共有したいけど勝手にスキップされたりしてケンカしたくない！」という時に便利なのが、招待された人はプレイリストを勝手に変更できずにスマートフォン・タブレット・PCのブラウザ間でYouTubeのプレイリストを共有できる「Playlistful」です。 Playlistful http://playlistful.com/ 「Start a party」をクリック。 表示されているURLを開きます。 シェアする人に表示する名前を入力したら「Join」をクリック。 プレイリストは空なので「Search」をクリックして入力欄からアーティスト名や曲名を入力します。 検索結果が表示されるので、お目当ての曲が見つかったら「ADD」をクリックしてプレイリストに
[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック
画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。 Parent child vertical list menu コードはこんな感じです。 HTML リストは階層ごとに入れ子を使用します。 コードは、CodeのjQueryまで。 <nav class="nav"> <ul class=list> <li> <a href="#">Home</a> <ul> <li> <a href="#">Lab</a> <ul> <li> <a href="#">Code</a> <ul> <li> <a href="#">Html</a> </li> <li> <a href="#">Css</a> </li> <li> <a href="#">Jquery<
Demo • jQuery Feeds
<script type="text/html" id="entryTmpl"> <article class="<!=source!> entry"> <p> <a class="link" href="<!=feedLink!>" title="<!=feedDescription!>"><!=feedTitle!></a> <span class="publishedDate"><!=publishedDate!></span> </p> <p class="author"><!=author!></p> <div class="content"><!=content!></div> </article> </script> $('.feed').feeds({ feeds : { facebook : 'http://www.facebook.com/feeds/page.php?
地味だけど便利！Photoshopでカラーの明度のバリエーションを簡単に展開できる機能拡張 -Lighten / Darken Color
Lighten / Darken Color カラーの明度を変更するのはもちろんPhotoshopのカラーピッカーで調整することはできますが、いちいち手作業でやるのは面倒くさいもの。そんな時は、この機能拡張を入れるとショートカットで簡単にできます。 明度を10%の増減で展開 Lighten / Darken Colorのインストール インストールは簡単です。 下記ページの中程の「Downloaded here」からファイルをダウンロードします。 Lighten / Darken Color 「[KAM] Color Lighten-Darken Scripts.zip」を解凍します。 解凍した「Color Darken.jsx」と「Color Lighten.jsx」を下記のフォルダ内に移動します。 ファイルの格納先：Photoshop/Presets/Scripts/ Photoshop
Movable TypeのMTEntriesタグで特定の複数ブログ記事を出力する方法
Movable TypeのMTEntriesタグを使って特定の複数ブログ記事を出力する方法を紹介します。 １．基本 MTEntriesタグは複数のブログ記事を出力するためのテンプレートタグです。 次のように記述すれば最新の10件のブログ記事タイトルを出力します。 <mt:Entries limit="10"> <$mt:EntryTitle$> </mt:Entries> MTEntiresタグには、特定のブログ記事IDを出力するために、idモディファイアが用意されています。 例えば、ブログ記事ID「100」の情報を出力するには、次のように記述します。 <mt:Entries id="100"> <$mt:EntryTitle$> </mt:Entries> ただし、この方法では1つの記事しか出力することができません。 ２．特定の複数ブログ記事を出力する 公式ドキュメントには解説されていま
WordPressで前後記事の一覧を出力する「wp_previous_next_post_linksプラグイン」
WordPressで前後記事の一覧を出力する「wp_previous_next_post_linksプラグイン」を公開します。 １．機能 現在の記事の直前または直後の記事情報を出力するには、previous_post_link()タグまたはnext_post_link()タグを使えばいいのですが、たとえば「現在の記事の前後5件ずつの記事を表示」といった場合、このテンプレートタグでは実現できません。 本プラグインを利用すれば、スクリーンショットのような現在の記事の前後記事のリストを出力することができます。 記事「test6」の前後記事を最大5件表示（test1が最も古い記事、test11が最新記事） 記事「test5」に移動した前後記事一覧の表示 記事「test7」に移動した前後記事一覧の表示 プラグインの動作はWordPress3.5で確認しています。古いバージョンでは正常に動作しない可能
Movable Typeで複数ブログのブログ記事を同名のカテゴリ別に振り分ける方法
Movable Typeで、複数ブログのブログ記事を同名のカテゴリ別に振り分ける方法を紹介します。 このエントリーでは2つのパターンについて解説します。 １．パターン1の前提条件 次のカテゴリとブログ記事を用意します。カテゴリは1階層のみです。 ブログA（ブログID：2） ├ カテゴリaaa │ └ 記事A1 ├ カテゴリbbb │ └ 記事A2 └ カテゴリccc └ 記事A3 ブログB（ブログID：3） ├ カテゴリaaa │ └ 記事B1 ├ カテゴリbbb │ └ 記事B2 └ カテゴリccc └ 記事B3 これを次のように表示します。 カテゴリaaa ├ 記事A1 └ 記事B1 カテゴリbbb ├ 記事A2 └ 記事B2 カテゴリccc ├ 記事A3 └ 記事B3 ２．パターン1のテンプレート １項を実現するには次のテンプレートを利用します。 <mt:Entries blog_i
jQuery plugin: Easy List Splitter
jQuery plugin: Easy List Splitter - Version 1.0.2 Create multiple lists from a single list ordering the items vertically You can choose the number of lists you want to create. The plugin will order the list items vertically by default. In this first sample we've splitted our list into 3 lists: Lorem ipsum 1 Donec pede 2 Fringilla vel 3 Eget arcu 4 In enim 5 Lorem farem 6 Pede justo 7 Vel aliquet 8
連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPages
ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 例えばli要素が100個くらいあったとして、これを10個ごと、10ページに分割し、ページ移動時にエフェクトも実装する、というもの。少々カスタマイズ性には欠けますがこれはこれで手軽に大量の要素をコンパクト化出来るので覚えておいて損はないかなと思います。 以下動作サンプルです。 Sample ページネーションの数字が小さすｇ コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.
複数のブログの記事を複雑な条件で混在させて出力する（その1）
「WordPressで学ぶPHP(1)変数・制御構造編」が発売されました。 「WordPressで学ぶPHP」シリーズの第1巻で、WordPressを通してPHPを学んでいく本です。 この本では、PHPの基本となる変数と制御構造について解説します。 Kindle本で、定価500円です。 Facebookの「Movable Type勉強会」のグループで、以下のような質問を見かけました。 ブログAの「ニュース」カテゴリの記事と、ブログBのすべての記事を混在して、その中から最新の5件だけを出力したい。 この問題の解決方法として、まずハッシュを使う方法を紹介します。 1.考え方 Movable Typeのテンプレートタグでは、ハッシュを使って、様々な情報を並べ替えて出力することができます。 その手順は以下の通りです。 ハッシュのキーとして、並べ替えの基準となる値を代入する 個々のキーに対する値とし
Movable Typeのカスタムフィールドに入力した複数のブログ記事IDからブログ記事リストを出力する
Movable Typeのカスタムフィールドに入力した複数のブログ記事IDからブログ記事リストを出力するカスタマイズを紹介します。 MTQで質問がありましたので、本エントリーで情報展開します。 １．カスタマイズイメージ カスタムフィールド「ブログ記事ID」を作成します。種類は「テキスト」、テンプレートタグは「MTEntryIDs」とします。 ブログ記事編集画面に表示されたカスタムフィールド「ブログ記事ID」に、ブログ記事ページに表示したいブログ記事のIDをカンマ区切りで設定します。 ブログ記事を保存すれば、該当のブログ記事ページに、カスタムフィールドに入力したブログ記事IDに対応するブログ記事のリストを出力します（赤枠部分）。 以下、カスタマイズ方法を順を追って解説します。 ２．Splitプラグインのインストール 以下のリンクよりSplitプラグインをダウンロード・インストールします。 S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
v-forを使ってリストの中身とリンク先を個々に出力したい
521 Dimensions
http://www.bizmemowp.com/wordpress-biz367