ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」
Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えることなく既存のCSSにも利用する事が可能です。 ファイルはTypography、Colors、Layout、UIの4つに分けられています。既存のWebサイトに導入する事でHTMLに変更を加えることなくスタイルを統一したり管理しやすく再設計する事も出来るのでCSSの最適化に一役買ってくれそうですね。 個人的にもCSS変数を使わない世界はもはや考えられないほど。まだ使った事が無い方はぜひ。 Pollen
イージングをCSS関数で管理する
Result 使わせてもらいそうなのでメモ。イージングアニメーションをCSS関数で管理しましょう、という内容です。 普段さほど使わないので思いつきませんでしたが皆さん既に取り入れてそうですね。 css:root { --ease-in-quad: cubic-bezier(.55, .085, .68, .53); --ease-in-cubic: cubic-bezier(.55, .055, .675, .19); --ease-in-quart: cubic-bezier(.895, .03, .685, .22); --ease-in-quint: cubic-bezier(.755, .05, .855, .06); --ease-in-expo: cubic-bezier(.95, .05, .795, .035); --ease-in-circ: cubic-bezier(.
CSS変数でイージングアニメーションを管理
Result カスタムプロパティで:rootに作ったイージングをvar()関数で呼び出せるようにします css:root {/*変数*/ --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.3
WordPressのカスタムメニューをアイテム毎に条件分岐で表示/非表示を設定出来るプラグイン・If Menu - かちびと.net
カスタムメニューで追加した アイテムを条件分岐で表示、 非表示にスイッチできる、と いうWordPressのプラグイン です。コードを参考にしたの でご紹介。 カスタムメニュー周りのプラグインは仕様でもよく求められることが多いので非常に助かります。このプラグインもCMSとしてWPを利用する際に役立ってくれそう。 カスタムメニュー内のアイテムを固定ページのみ、TOPページのみ、ユーザーログイン時のみ、などの条件をつけて表示/非表示できる、というもの。 プラグインを有効化すると、カスタムメニューで追加したアイテムの下部にEnable Conditional Logicというラベルの付いたチェックボックスが表示されますのでチェックを入れればセレクトボックスも表示されます。 現時点では、決められている条件が多くはなく、変更も出来ないので実際に利用する際は少しコードを弄らせてもらう事になりそうです。
WordPress のプラグイン「Types」の日本語ファイル | Unformed Building
WordPress のカスタム投稿タイプ、カスタムタクソノミー、カスタムフィールドをまとめて管理できるプラグイン「Types」の日本語ファイルを作ったので公開しておきます。 Types Plugin – WordPress Custom Post Types and Custom Fields WordPress › Types – Custom Fields and Custom Post Types Management « WordPress Plugins このプラグインは 大曲さん (@jim0912) に教えてもらいました。 試してみると結構使いやすそうだと思いました。 が、日本語ファイルはあるものの何故かすごく中途半端だったので、できる範囲を翻訳しておきました。 ダウンロードは以下からどうぞ。 Types 1.0.4 向け日本語ファイル 注意事項など 翻訳ファイルへのパスは
WordPressのカスタムメニューをショートコードで表示出来る様にする
仕事で必要になったのでメモ。WordPressで作れるカスタムメニューをショートコードで実装出来るようにする、という方法です。やってみて思ったけど結構便利です。 カスタムメニュー、という名ですけど、メニューコンテンツ以外にも利用出来るので、ショートコードで実装する方法は覚えておいて損は無いです。 以下のようなコードをfunctions.phpに含めます。 function single_page_custom_menu($atts, $content = null) { extract(shortcode_atts(array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' =
WordPressで任意のカスタム投稿タイプの投稿リストを実装するショートコードを作る
任意のカスタム投稿タイプの 最新の投稿のリストをショート コードで表示させる、という 方法。用途は限られますけど、 いつか使いそうなのでメモ書き。 調べ物をしたので備忘録。作成したカスタム投稿タイプで更新した投稿の一覧をリストで表示させる、というショートコードを作成する方法です。 リストのソート方法やマークアップ、含めるコンテンツ等は便宜変更してください。 function section_feed_shortcode( $atts ) { extract( shortcode_atts( array( 'limit' => -1, 'type' => 'post'), $atts ) ); $paged = get_query_var('paged') ? get_query_var('paged') : 1; query_posts( array ( 'posts_per_page'
WordPress カスタムメニューの使い方（その1：基本）
WordPressのカスタムメニューの使い方について解説します。 カスタムメニュー機能で作ったメニュー 今回はTwentyElevenテーマを使った、管理画面でのカスタムメニューの作成方法について解説します。functions.phpの設定が必要なカスタマイズなどについては別エントリーで紹介したいと思います。 WordPressのバージョンは3.3.1を使っています。 １．カスタムメニューとは カスタムメニューとは文字通り、独自のメニューをカスタマイズする機能です。 カスタムメニューを利用すれば、固定ページ・カテゴリー・投稿・タグのリンクやカスタムリンク（管理画面上で作ったリンク）などを表示させることができます。またそれぞれのリンクを1つのメニューに混在表示させることも可能です。メニューの順序や階層表示も自由にカスタマイズ可能です。 ２．メニューの作成 まず、ページに表示するカスタムメニュ
デザインどや！？｜海外カジノ オンラインのWEB作成
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
全150種類以上、ミニサイズでかわいらしいけど実用的なアイコン素材 -Bijou
ウェブサイトやウェブアプリケーションなどで汎用的に利用できる、10pxをベースにしたミニサイズのアイコン素材を紹介します。 Bijou — tiny, 10 pixel icons for free [ad#ad-2] ダウンロードできるアイコンは全150種類以上で、TwitterやFacebookなどのソーシャルメディアから、アロー、ホーム、サーチなど、さまざまなものが揃っています。 アイコン（一部）のプレビュー（10px実物大） アイコン素材のフォーマットは、3種類です。 PNG -すぐ使う人用 PSD -素材として使う人用 CSH -Photoshopのカスタムシェイプ、サイズを自由に変更可 PSDはアイコンごとにレイヤー管理されています。
カスタム投稿タイプのパーマリンクをカスタム設定できるWordPressプラグイン・Custom Post Type Permalinks
WordPressのカスタム投稿タイプに関する記事が凄く多くなって来ましたが、まだWPに不慣れですとコードの管理が結構大変です。functions.php頼りという感じですしね。そういうわけなので、せめてパーマリンク化くらいはプラグインにお願いしましょう。 当サイトも含め、カスタマイズ記事は沢山あるんですけど、WordPressの大きな魅力はプラグインの豊富さです。もちろん、他デベロッパーへの依存にも繋がるのでメリットばかりとは言えませんが、工数を大きく減らせるのは間違いありません。 こんな感じでカスタム投稿タイプで作成した記事のURLを、通常の投稿同様にカスタム構造のパーマリンクに変更できます。※事前にパーマリンク設定がカスタム構造に設定されている必要があります。 各カスタム投稿タイプのパーマリンクを設定各カスタム投稿タイプごとのアーカイブのURL,日付によるアーカイブのURLを追加wp
お手軽WordPress Tips：1行のコードで追加できる便利な新機能「投稿フォーマット」を使ってみよう
WordPress3.2のリリースも間近に控え、 より楽しみが増える今日この頃ですが、 3.1から増えた新機能の投稿フォーマット がさほど普及していない印象が否めない ので微力ながら貢献してみようかなと 思います。 カスタム投稿タイプやカスタムタクソノミーなど、便利な新規能が山盛りなWordPressなんですが、Webデザイナーさんにとって嬉しい新機能といえば「投稿フォーマット」ではないかなと勝手に思い込んでいます。 1行のコードだけで済むので導入も楽ですし、デザインに貢献出来る機能でもありますので、「知らなかったよ！」という方はぜひ使ってみてください。 以下、参考になるページです。 投稿フォーマット – WordPress CodexWordPress3.1の新機能投稿フォーマットを試してみた。 | Simple ColorsSimple Colorsさん(@jim0912)が分かりやす
WordPressのカスタム投稿（ポスト）タイプを作成するまでの手順リスト
捜し物をしている最中に、ちょっと気になったのでテスト的に記事にしてみます。WordPressに新たに追加されたカスタム投稿タイプですが、多少なりにカスタマイズ経験が無いとハードルも低くはない印象なので手っ取り早く作成出来る用にリスト化します。 便利なのにさほど深く浸透していない印象のカスタム投稿タイプ（カスタムポストタイプ）やカスタムタクソノミー（タグに親子関係を持たせる的な機能）とかいろいろと不可解なキーワードで混乱してる方も多いような気がします。 個人的には理解の前にとりあえず触ってみるのもひとつの手だと思いますので、まずは気軽に追加してみてからどういったものか調べればいいかなと。（賛否両論あるでしょうけど僕はとりあえず触って失敗して学びたい人なので カスタム投稿タイプってなんだろう カスタム投稿タイプとは、WordPressにデフォルトである「投稿」という機能とは別の「投稿」機能を加
Home - Designzzz
Working on DIY projects is a great bonding activity you can do with your kids. This hobby can be fun for the whole family, allowing your kids to fully explore their creative potential, and... Audrey Smith enjoys seeing flowers everywhere around her, and she’ll help you see them too. The digital designer behind the viral project Paint the World is using the power of Photoshop to transform mundane..
Movable Typeのカスタムフィールドで入力したデータの重複チェックを行う「CustomFieldDataCheckerプラグイン」
Movable Typeのカスタムフィールドで入力したデータの重複チェックを行う「CustomFieldDataCheckerプラグイン」を公開します。 １．機能 このプラグインでは、プラグイン設定画面で指定した特定のカスタムフィールドに入力した値をチェックし、他の記事の同一カスタムフィールドの値と重複している場合に以下のエラーを表示します。 v0.02ではブログ記事・ウェブページのカスタムフィールドのチェックを行います。 ２．価格 価格：\3,000-（税別）/1インストールMT（購入前に必ず動作確認してください） ３．プラグインのダウンロード 以下のリンクからプラグインをダウンロードしてください。 2011.01.20 v0.01 初版 2011.03.31 v0.02 ブログ記事をチェック対象に追加／複数カスタムフィールドチェックに対応／エラーメッセージの改善 2021.02.26
Movable Typeのカスタムフィールドを一覧に表示する「ListingCustomFieldプラグイン」: 小粋空間
Movable Typeのカスタムフィールドで作成したデータを管理画面の一覧に表示する「ListingCustomFieldプラグイン」を公開します。 １．サンプル とりあえずどのようなものか、プラグインで生成したデータを元に作った管理画面サンプルでご確認ください（ブラウザの横幅を少し広げた方が見やすくなります）。 一覧部分にカスタムフィールドの「テキスト」と「画像」が表示されています。画像をクリックすれば拡大表示されます。また、「表示オプション」をクリックすると、カスタムフィールドの「テキスト」「画像」のチェックボックスが表示されています。チェックボックスをチェックすればカスタムフィールドの表示・非表示を切り替えることができます。 ※サンプルのため、上記以外の動作は行えません。 ２．機能 このプラグインでは以下の一覧画面にカスタムフィールドを表示できます。 ブログ記事 ウェブページ アイ
Googleマップカスタムフィールドプラグインを使った一覧地図の作成(前半)
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 「東京ラーメンマップ」など、地域ごとに店などの情報を集めたサイトを作りたいことは、よくあると思います。 先日公開したGoogleマップカスタムフィールドプラグインを使うと、そのようなサイトに、地域ごとの店一覧等の地図を入れることができます。 動作のサンプルのページのように、カテゴリアーカイブページに、地域ごとの店等の一覧地図を表示する基本的な方法を紹介します。 事例として、「全国観光地マップ」を作ることを想定した場合を取り上げます。 今日は前半として、データの入力手順を解説します。 1.データの構造 このシステムでは、ブログを使ってデータを入力します。 個々の地域（都道府県等）
Googleマップカスタムフィールドプラグイン（その2）
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 Googleマップカスタムフィールドプラグインの続きとして、プラグインの設定や、テンプレートタグの詳細について解説します。 1.地図のサイズの設定 デフォルトでは、管理画面／出力先のページ（テンプレートタグの出力結果）ともに、Googleマップを500×200ピクセルで出力するようになっています。 地図のサイズの設定は、カスタムフィールドの設定画面の「オプション」の欄で変えることができます。 この欄には4つの数字をコンマで区切って入力します。 最初の2つの数字は、管理画面上での地図の横／縦のサイズを指定します。 次の2つの数字は、出力先のページでの地図の横／縦のサイズを指定しま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのカスタム投稿タイプとカスタムタクソノミーを使って新たに別のコンテンツを作ったので、制作プロセスを書きました
カスタムフィールドのセレクトメニュー数 | 沖縄Web日誌
