jQuery：タブ切り替えをウィンドウサイズが小さいときはselectで切り替える動きにする方法 - NxWorld
レスポンシブサイトでタブ切り替えを実装する際、ウィンドウサイズが大きい場合はそのままタブ切り替えの見栄えで、ウィンドウサイズが小さくなったときには表示幅などの兼ね合いで違った見せ方にすることがあります。 そのような時に見かけるのが多いものとしては、ウィンドウサイズが小さいときはタブ切り替えではなくアコーディオンに変化させたり、他にはSmartNewsなどで採用されているようなタブの見栄えはそのままにしつつタブ部分をスワイプ（スクロール）できるようにしたものなどありますが、それらとは違った見せ方としてウィンドウサイズが小さいときは切り替えにselect要素を用いるという動きを実装することがあったので、実装方法を備忘録兼ねて紹介します。 先にざっくりとした動きを説明すると、表示・非表示の切り替えは単純にCSSのMedia Queriesを用いて、jQueryではそれぞれのナビが切り替わったタイ
テーブル行の詳細をクリックで開けるテーブル実装:phpspot開発日誌
Expand Table Rows Using jQuery, HTML And CSS On TalkersCode.com テーブル行の詳細をクリックで開けるテーブル実装 気になる行をクリックすれば詳細となるテキスト等を表示できます タグとしてはtd colspan=4などでdisplay:noneしておき表示するという単純な物のようですがなかなか良いアイデアかも。 関連エントリ Bootstrapのテーブルをソート可能にする「Bootstrap Sortable Tables」 テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」 テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」 横長テーブルもレスポンシブにできる「jquery.responsive-tables」
WP_Queryを使って、記事を自在に取得してくる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。長野オフィスでバックエンドエンジニアをやっているヤスタカです。 野尻湖の夜は気温がもう0度になることがあり、こたつから出られません。そしてそのままこたつで寝てしまう……という季節がやってきましたね。 LIGでCMSのWebサイトを作るときはwordpressを使用することが多いのですが、記事の一覧を表示することってよくありますよね。そんなとき、ある条件に合致する記事だけを表示させたいということがよくあるかと思います。 今回はWP_Queryを使って、いろんな条件指定した記事一覧の取得方法を見ていきたいと思います。 まず、いちばんオーソドックスな記事の取得方法から。 $news_args = array( 'post_status' => 'publish', 'posts_per_page' => 6, 'orderby' => 'post_date', 'order' =>
facebook-cli - node製のFacebookクライアント
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Facebookへ頻繁にアクセスしてしまって業務がままならないという方はFacebookへのアクセスを禁止しましょう。しかし、閲覧はしなくともステータスのアップデートはしたかったり、多少面倒でも内容が見たいということがあるかも知れません。 そんな時に使いたいのがfacebook-cliです。ターミナルからFacebookにアクセスできます。 facebook-cliの使い方 facebook-cliをインストールしたら最初に設定を行います。 $ fb config undefined Facebook app ID 100447596697501 Facebook app secret 4e...76 Facebook user access token EAA...ADZ 設定が
シンプルなCSSグラデーション変化を実装できる「Gradientify」 – bl6.jp
GradientifyはシンプルなCSSグラデーション変化を実装することができるjQueryプラグインです。グラデーションが徐々に移り変わっていくサマは、見ていてとても優雅な気分になってきますね。 以下のページからGradientifyの実際のデモ動作を確認できます。 デモ デモでは背景全体がゆっくりといろんな色のグラデーションに変化していきます。どのグラデーションもすごく美しいですね。シンプルですが、ダイナミックに変化していくグラデーションはとても印象的です。 使い方もカンタンでわかりやすいのでサクッと実装できると思います。gradientsのstartとstopにRGB値を指定します。そのほかのパラメーターには、angle、fps、transition_timeといったものが用意されています。自分好みのグラデーションやカスタマイズをしたい人にもピッタリですね。 というわけで、美しいグラ
見ただけでわかる！おもしろピクトグラムを無料配布しているサイトまとめ
駅や施設のトイレのマークや高速道路のパーキングエリアのマークなど、見ただけで何を表しているのかがわかる*「ピクトグラム」*。 言葉が通じない国でも、ピクトグラムを見れば、どのような施設なのか、どのような機能なのかを、大まかに認識することができます。文字情報だと多くを語らないといけない場面でも、ピクトグラムを使うことで伝えたい情報をダイレクトに伝えることが可能です。 今回は、ピクトグラムを無料で配布しているサイトを集めてみました。ぜひご覧ください。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 シンプルだけど確実に情報を伝達！ピクトグラムを扱うサイト
管理画面内で記事やカテゴリなどのタクソノミー等をインクリメンタル検索するWordPressプラグイン・「Jarvis」
JarvisはWordPressの管理画面内での全ての記事やカテゴリ、タグ等のタクソノミーや「外観」などの管理画面項目、コメント、プラグインなどなど管理画面内のコンテンツから横断検索してくれるプラグインです。検索はインクリメンタル検索で行われるので入力するだけで該当するコンテンツをリストアップしてくれます。検索窓は右上の「こんにちは、～さん！」の脇に添えられます。コンテンツ次第では管理画面内の情報量が膨大になって管理しにくくなるケースもあります。そのための拡張機能は他にも色々とありますが、その中でも割と便利な印象でした。インターフェースは設定もなく翻訳も要らないしインストール後すぐに使えるのでこのままクライアントに提案しても喜ばれそうです。 JarvisJarvis — WordPress Plugins
「プレステVRは､ポケGOより格段につまらない」はもったいない
PANORAでこうした記事を書くのは異例だ。しかし、3年にわたって（わずか3年だが、濃密な3年だ）VR業界を専門に取材してきている立場として言わせてほしい。東洋経済に掲載された「プレステVRは､ポケGOより格段につまらない」という記事は、非常にもったいない。 近視眼的な欠点をあげつらう記事を作れば、アクセス数は伸びるだろう。しかし、それはつまるところイエロージャーナリズムで、一面では正しいかもしれないが、多くの事実を無視してしまっている。大手メディアの東洋経済が、そうした記事を掲載するのははたしてアリなのだろうか？ PS VRに表現の新しさはないのか？ 筆者が一番違和感を感じたのは、 「昔の業務用VRを非常に進化させ（CPUの演算機能も昔よりも飛躍的に速くなっているので）、家庭用ゲームに関連づけただけである。今までに存在しなかったものではない」 および 「任天堂の『ポケモンGO』はオリジナ
Google Fonts + Japanese • Google Fonts + 日本語
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
プランと料金 | FONTPLUS
各プランの概要 一般的なWebサイト・コンテンツには、経済的で機能性・運用性にも優れた「スマートライセンス」をおすすめします。 サーバ・システム上の制限などにより、スマートライセンスをご利用いただけないサイトでは「バリューライセンス」をお選びください。 人気No.1。 通常はこのプラン。スマートライセンス リアルタイムでフォントデータを自動生成するため導入が簡単 静的・動的問わず、一般的なサイト・プラットフォームに対応。 PV数に応じた課金設定（1,080円～） サイト数の上限なし バリューライセンス フォントデータ作成とWebサーバへの配置が必要 外部ファイル読み込み等の制限があるサイトに対応。 12,960円 / 1年（360万PVまで） 1サイトのみのご利用 動的なサイトや、ブログサービス、WordPress等のCMSを使ったサイトには、スマートライセンスを推奨しています。バリューラ
エヴァンゲリオン公式フォント マティスEB TrueType版 パッケージ製品として発売!!
#TVシリーズで使用された「EVA-マティス-クラシック」と新劇場版で使用された「EVA-マティス-スタンダード」。 2種類のフォントデータが使用されていることは、コアなファンのみが知っている事実。 本パッケージには、この2種類のフォントデータが収録されており、使い方次第で、デザインに違いをもたらすこともできる！ エヴァとマティスが共に歩み、互いに進化し続けた20年の歴史が この1冊で分かる“特典ブックレット”が、今回の目玉。 などなど、ファンなら知っておきたい情報をすべて集約。 ・TrueTypeフォント「EVA-マティス-クラシック」（TVシリーズ） ・TrueTypeフォント「EVA-マティス-スタンダード」（新劇場版） ※クラシックとスタンダード2種類の字形デザインを比較した 「字形比較表」などのPDF 「新世紀エヴァンゲリオン」と「マティスEB」の出会いから採用に
WordPress：add_theme_support( ‘title-tag’ ); 使用時にタイトルからキャッチフレーズを削除したりセパレータを変更する方法 - NxWorld
WordPres Ver 4.1以降、functions.phpにadd_theme_support( 'title-tag' );と記述するだけで簡単にタイトルを出力してくれるようになりましたが、その出力内容を変更する方法です。 内容を変更といってもがっつりと変えるのではなく、具体的にはサイト名とともに表示されるキャッチフレーズを削除したり、デフォルトでは「-」となっているセパレータを任意のものにするといった簡易的な変更です。 add_theme_support( 'title-tag' ); を使用する これまでタイトルタグを出力されるようにしたい場合は、例えばheader.phpなどに書かれているhead内にwp_title()を記述するなどしていましたが、4.1以降はこのようなタグをhead内に書かずにfunctions.phpへ下記のように記述することでタイトルが出力されるように
Twitter 人気のつぶやき 10/29～11/4 2016
2016年11月5日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ ↑私が10年以上利用している会計ソフト！ 1. フォント：縦書きや擬音や魔方陣のフォント大集合！マンガや同人誌に無料で使える日本語のフリーフォントのまとめ この記事をRTする 2. ツール：マイクロソフト、IFTTT的なサービス連係サービス「Microsoft Flow」正式公開。GitHub、Dropbox、Slack、メール、Twillio、Googleカレンダーなど多数のサービスを連係可能 この記事をRTする 3. Webデザイン：明るい水色と赤の
ttyd - Webブラウザからターミナル操作を可能に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ライブコーディングなどで度々あるのがターミナルを開いてその画面を見せると言った手法です。しかし文字が小さかったり、やっていることが分かりづらかったりと面白さがなかなか理解できなかったりします。 そこで使ってみたいのがttydです。ttydはttyをWebブラウザから操作できるようにするソフトウェアです。 ttydの使い方 ttydを実行しました。Webブラウザからアクセスできます。 普通にコマンドが打てます。 Emacsだって使えます。 Tabで候補も表示されます。 ttydを使えば一つのターミナルをみんなで共有できます。社内ミーティングでターミナルを共有して、誰かが詰まったら他の人がサポートするなんて使い方も考えられそうです。Bashだけでなく、特定のコマンドを渡すこともできます
「家紋そっくり」、徳川家当主が商標登録に異議 （読売新聞） - Yahoo!ニュース
水戸徳川家の家紋にそっくりのマークが商標に登録されたとして、同家１５代当主の徳川斉正さんが理事長を務める公益財団法人「徳川ミュージアム」が、特許庁に異議申し立てをしたことが４日、分かった。 同庁で審理している。 同庁によると、登録したのは水戸市のイベント会社。「お守り・お札」「日本酒」などに使用するとして、水戸徳川家の「葵（あおい）紋」に似たマークを商標として出願し、昨年１２月に登録された。 徳川ミュージアム側の代理人によると、同庁の公告で登録を知り、今年３月に登録の取り消しを求めて異議申し立てをした。代理人は「一私人に独占されると、水戸徳川家と縁のある神社や徳川ミュージアムなどが使用する場合に制限がかかる可能性がある」と訴えている。 イベント会社側は「社長不在で対応できない」としている。
ツールバー(admin bar)の表示・非表示を指定する - show_admin_bar | 覚えておきたいWordPress関数 - 今村だけがよくわかるブログ
関数の概要WordPressにユーザーがログインしている状態で一般公開されているページを見ると、ページ上部に黒いツールバーが表示されます。 ツールバーツールバーは「admin bar」とか「管理バー」とか呼んでる方もいます。 このツールバーの表示・非表示を変更できます。 show_admin_bar( $bool );使えるパラメーターパラメーター説明初期値 使い方ログインしているユーザーの権限（下の場合はmanage_options）を持っていないユーザーにはツールバーを非表示にしています。 if ( ! current_user_can( 'manage_options' ) ) { show_admin_bar( false ); }「どのユーザーでもツールバーを表示させたくない」って場合はところで、ツールバーの表示・非表示は、ユーザーごとに管理画面にログインして、プロフィールページ
WordPressテーマ「Tokimeki」が公式ディレクトリに掲載されました！ - Spuit
公式テーマディレクトリにアップロードしていたWordPressテーマ「Tokimeki」のステータスが「live」になり、晴れて公開状態になったので、軽く紹介＆公式ディレクトリのあれこれを備忘録代わりに。 Tokimeki – WordPress.org 「Tokimeki」は、ブログ・ニュースサイト・オウンドメディアなどのWebサイトに適したWordPressテーマです。2カラム・レスポンシブで、schema.orgによる構造化マークアップを施したパンくずリストなどを備えています。 ヘッダーにはサイトロゴやメニュー、ソーシャルリンクを設置することができます。各種ボタンやリンクの色、コピーライトの表記などはカスタマイザーから変更が可能。 全体的にアイキャッチ画像が設定されていること前提のデザインとなっていて、投稿一覧や関連記事ではサイズの異なるアイキャッチ画像を同じアスペクト比で表示させる
セブンのコーヒーマシンが超進化！ レジに並ばず買える便利さが凄い - エキサイトニュース
セブン-イレブン内で展開している「セブンカフェ」で、レジに並ばなくても購入できる新型コーヒーマシンが一部店舗に導入され、その便利さがTwitterで話題となっている。 意外と面倒だった注文方法 これまではレジで注文をしてから、ホット用カップを受け取る必要があった。アイスコーヒーの場合は冷凍ケースからアイス用カップを取り出すところからだ。その後、レジ横にある専用マシンを操作し、やっとコーヒーがカップに注がれる。 ホットにしろアイスにしろ、レジでお金を払わなければいけないことは意外と面倒だったようで「コーヒー頼むのにわざわざレジに並ぶのがめんどくせぇ」「レジに行列ができてると頼む気なくす」という声もあった。 11月1日、Twitterに「顧客が本当に必要だったもの」というコメントとともに新型マシンの写真を投稿された。 「レジに並ばずすぐ買えます！」と書かれた大きなポップにある通り、新型マシンに
svgcleaner - SVGファイルのサイズ軽減
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画面の高画質化に伴って注目されているのがSVGです。ベクターベースなので拡大縮小に左右されることなく綺麗に表示できます。今後、画像サイズが上がれば上がるほど、ニーズが高くなっていくと思われます。 そんなSVGですが、余計な情報が多いとサイズが肥大化してしまいます。そこで使ってみたいのがsvgcleanerです。 svgcleanerの使い方 メイン画面です。SVGファイルを登録しました。 クリーンアップを実行しました。1.38%削られたようです。 フォルダを登録してまとめて処理もできます。フォルダ全体では35%も削減されました。 svgcleanerにはファイルを編集した履歴に伴う情報が多数入っています。それらの多くは表示上は不要な情報でしょう。そうした情報を削り落とすことでサイズ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
キューブを使った立体的なグラフィックを描画できる「obelisk.js」:phpspot開発日誌
Engadget | Technology News & Reviews
投稿タイプのアーカイブページのURLを取得する - get_post_type_archive_link | 覚えておきたいWordPress関数 - 今村だけがよくわかるブログ
レスポンシブなtableの為のスクリプト・「resTables」