SCSSで使うcubic-bezier値を変数化しておく - Qiita
元ネタ Easing Function http://easings.net/ja イージングアニメーションの種類がたくさんライブラリ化されていて、JSで使用できる。 Compass Ceaser プラグインを入れればSCSS上で ceaser($easing名) として呼び出すことが可能。 SCSS変数にした Ceaserプラグインを入れなくてもSCSS上で呼び出せるようにしたいと思って、 SCSSの変数として移植させていただいたのが下記。元ネタ のeasing名とcubic-bezier値をまま移植しています。 /* * Easing function * Original：http://easings.net/ */ $easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715); $easeOutSine: cubic-bezier(0.39, 0
Wordpress 検索結果から固定ページを除外したい - かもメモ
久しぶりにWordpressを触っています。忘れている事だらけで大変です！ さて、Wordpressの検索ですが昔は投稿のみが対象だったと記憶していますが 新しくなって固定ページも検索結果に含まれるようになったっぽいです。 固定ページを検索結果から除外したい で、固定ページは検索結果から外したいと思いググると 下記のようなpre_get_postsでqueryを書き換えるやり方が多く出てきました。 <?php /* functions.php */ function SearchFilter($query) { if ($query->is_search) { $query->set('post_type', 'post'); } return $query; } add_filter('pre_get_posts','SearchFilter'); しかし、上記の方法だと、 どのキーワー
JavaScriptのコード整形ツール
公開日: 2015/08/28 | 更新日: 2017/05/29 Minify処理などで難読化したJavaScriptのコードに、インデントや改行を付けて、分析したり確認しやすく整形するツールです。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。
【最新バージョン7.3対応】jQuery無しで動く神スライダー［Swiper］が便利すぎて。
今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・
解決！WordPress投稿画面のカテゴリーをカスタマイズする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
段田です。 WordPress案件で「投稿画面カテゴリーで親カテゴリーのチェックボックスを非表示にして欲しい」と要望があり対応しました。 なので今回は投稿画面のカテゴリーカスタマイズについて書きたいと思います。 ■実行プログラムについて カテゴリータブの表示制御は /wp-admin/includes/template.phpの wp_terms_checklistメソッドを使っています。 function wp_terms_checklist($post_id = 0, $args = array()) { $defaults = array( 'descendants_and_self' => 0, 'selected_cats' => false, 'popular_cats' => false, 'walker' => null, 'taxonomy' => 'category',
[WordPress] 固定ページの子ページかどうか条件分岐させる方法 - Qiita
色んな条件分岐タグがあるWordPressですが子ページかどうか調べるis_subpage()のような条件分岐タグはありません。毎回調べるのでメモしておきます。 固定ページの子ページかどうか判定
![[WordPress] 固定ページの子ページかどうか条件分岐させる方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b067c03a60cff7cb1cfdd7ca3e1aeb249a7f0464/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV29yZFByZXNzJTVEJTIwJUU1JTlCJUJBJUU1JUFFJTlBJUUzJTgzJTlBJUUzJTgzJUJDJUUzJTgyJUI4JUUzJTgxJUFFJUU1JUFEJTkwJUUzJTgzJTlBJUUzJTgzJUJDJUUzJTgyJUI4JUUzJTgxJThCJUUzJTgxJUE5JUUzJTgxJTg2JUUzJTgxJThCJUU2JTlEJUExJUU0JUJCJUI2JUU1JTg4JTg2JUU1JUIyJTkwJUUzJTgxJTk1JUUzJTgxJTlCJUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03ZTRkMGQxYTNjOGIxY2YwN2IyMTJjMzQ0MTM2NTg2ZQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0aGFua3MybXVzaWMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWE1ODMyY2MzNmYwMjBlNWIxZDE4OTFiYzliMDY4Yzli%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dfe2c83640a7d6b9e38bd3bf672a2af80)
なぜAMPなのか？HTML5+レスポンシブではダメな理由 | Crane & to.
AMP(Accelerated Mobile Pages)について一通り学んでも、なぜ AMP なのか？なぜ HTML5 + レスポンシブウェブデザインではダメなのか？なぜ Google は AMP を猛プッシュしているのか？なぜ巨大メディアが一斉にAMP化しはじめたのか？といった疑問が残ったままでしょう。 AMP(Accelerated Mobile Pages) = 高速レンダリングの技術 という面が強調されます。それはAMPの最優先課題だったとともに、数値化でき、誰でも簡単に体感できるからです。しかし、本当のAMPはレンダリングの高速化だけではなく、モバイルWeb全体の再構築にあります。 これまでの研究成果をもとに「本当のAMP」を徹底解説いたします。 ※研究過程につき一部弊社の私見が含まれております。 時代はパソコンからモバイルへ パソコンからのインターネット利用が急減したわけでは
ウェブ担当失格!? AMPプラグイン導入だけでAMP対応したつもりにならないために知っておきたいこと5選 | Crane & to.
ホームすべての記事ウェブ担当失格!? AMPプラグイン導入だけでAMP対応したつもりにならないために知っておきたいこと5選 既存ページをAMP対応ページにするのはとても手間がかかります。JavaScript や フォーム関連タグの全消去、外部CSSやインラインstyle属性値の消去、<img>、<iframe>タグの全変換 … これだけでも十分シンドイ作業ですが、残念ながらこれらの作業はほんの一部にすぎません。完了までのタスクは山積みです。 しかし、ウェブサイト（ホームページ）が幸運にもWordPressで作られているなら、バックアップをとってからAMPプラグインをインストールするだけでアンプ対応ページが生成できます。AMPプラグインは無料というのが信じられない程に素晴らしいプラグインで、WordPressのAMP対応のデファクトスタンダードになっています。 そのため「WordPressサ
Appleウェブサイトのレスポンシブなナビゲーションが「うまい！」と思う4つの理由
こんにちは。Appleも好きだけどAppleウェブサイトも大好きなRriverの渡辺です。 最近レスポンシブなナビゲーションについて考えていて良いアイディアを探しているんですが、結局Appleのウェブサイトにたどり着きました。Appleのウェブサイトは良く出来ていると思うところがたくさんあって、ナビゲーションも良く考えて作られているんですね。 ということで、今回はAppleウェブサイトのナビゲーションの検証を通して、マルチデバイス時代のレスポンシブなナビゲーションについて考えてみたいと思います。より良いナビゲーション構築の参考になれば幸いです！ 目次 マルチデバイス時代のナビゲーション 理由1： 3段階の「ナビゲーション」で確実にユーザを誘導している 理由2： 見せられるときは、しっかり見せている 理由3： コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙 理由4： その時必要なナビ
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
デザインセンス不要でWeb制作が捗る！登録ナシですぐ使える「HTML5/CSS3」の無料テンプレート12選＋α - paiza times
どうも、まさとらん（@0310lan）です。 ネット上には、Webサイトを効率よく制作できるように多種多様な高品質テンプレートが存在します。 そのまま利用しても良いし、開発やデザインの参考にしてみたり…など、その活用範囲は広いのですが、検索すると「有料・無料」「低品質・高品質」などが混在していて見つけるのが大変だったりします。 そこで今回は、「無料・高品質」なテンプレートの中から使用用途別にカテゴリを分けて、さらに面倒な「登録」も不要なモノだけを厳選してご紹介しようと思うので参考にしてみてください！ ■「ブログサイト」に最適なテンプレート！ 【 Spore 】 「Spore」は、モダンブラウザに対応したレスポンシブなテンプレートになっており、「ブログ」向けとして最適です。 ページのトップに位置するフルスクリーンのテーマ画像が印象的で、縦幅の違うカード状に並べられた記事はシンプルながらも、ア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MacにDrupal8をインストールする - Qiita