![[jQuery] “URLとタイトルをコピー” ボタンを実装する](https://metrograph.jp/wp-data/wp-content/uploads/2016/12/template.jpg)
[jQuery] “URLとタイトルをコピー” ボタンを実装する
42+ 41+ 9+ 12+ 10+ Chromeのみ iOSは機種やブラウザに関わらずiOS10が必要みたい(要検証) Androidの標準ブラウザは恐らく全滅、Chromeは新しめのものならだいじょうぶっぽい(要検証) PCはモダンブラウザなら大体だいじょうぶ。 デモは下部のボタンから シェアボ […]
web
![[JS] flatpickr.jsを使ってみる](https://metrograph.jp/wp-data/wp-content/uploads/2016/08/flatpickr.jpg)
[JS] flatpickr.jsを使ってみる
flatpickr flatpickrは、jQueryに依存せず、単独で動作する軽量なDatepickerです。 flatpickr 実装 <head> <link rel=”stylesheet” href=”https://unpkg.com/flatpickr/dist/fl […]
web![[WordPress] テーマやプラグインのアップデートを非表示にする](https://metrograph.jp/wp-data/wp-content/uploads/2016/04/theme_update.png)
[WordPress] テーマやプラグインのアップデートを非表示にする
ほんとはアップデートしたほうがよいのだけれど WordPressには、WordPress本体やプラグイン、テーマがアップデートされた時に「WordPress 4.X が利用可能です！更新してください。」等と通知してくれる機能があります。 が、この親切な機能のおかげで、納品後にクライアントが良かれと思 […]
web![[WordPress] ダッシュボードの不要なメニューを非表示にする](https://metrograph.jp/wp-data/wp-content/uploads/2016/04/dashboard.png)
[WordPress] ダッシュボードの不要なメニューを非表示にする
肥大化したダッシュボードメニューは事故を招く カスタム投稿やプラグインを追加していくと、だんだんと増えて見づらくなっていくダッシュボードのメニュー。 製作時は問題ないのだけど、納品時は不必要なメニューを整理してあげたほうが、なにかとメリットが多いのです。 たとえば、プラグインメニューが表示されている […]
web![[CSS] Firefoxでborderが表示されない場合の対処](https://metrograph.jp/wp-data/wp-content/uploads/2016/03/firefox-border.png)
[CSS] Firefoxでborderが表示されない場合の対処
Firefoxでtd要素のborderが表示されない td要素にborderを指定しても、borderが表示されないことがあります。 td { position: relative; border: 1px solid #000; background: #ccc; } こんなようなスタイルを当てた […]
web![[CSS] Androidでタップ時、オレンジの枠が消えない場合](https://metrograph.jp/wp-data/wp-content/uploads/2015/09/template.jpg)
[CSS] Androidでタップ時、オレンジの枠が消えない場合
Androidで何かしらの要素をタップした時やフォーカスが当たった時、オレンジ色の枠が表示されます(色は機種によって違うらしい)。 このオレンジのド畜生野郎が、案外デザインを邪魔してくるので、消してやろうといろいろ調べてみました。 ネット上に転がっている情報では消えなかった #honyarara { […]
web![[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する](https://metrograph.jp/wp-data/wp-content/uploads/2015/08/template.jpg)
[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する
対応 対応 対応 対応 対応 対応 CSSのみで実装する場合 [CSSのみ] 続きを読むボタンをCSSで実装する アニメーションする必要がなければCSSでいけます。 jQueryで実装する 長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デ […]
web![[jQuery] マウスが乗っていない要素に効果をつける](https://metrograph.jp/wp-data/wp-content/uploads/2015/04/blur.jpg)
[jQuery] マウスが乗っていない要素に効果をつける
jQueryのnot()メソッドを使用して、マウスが乗っていない要素がぼやけるような効果をつけてみます。 デモはこちら ソース HTML <ul id=”fade”> <li><a href=””>link1</a></li> <li […]
web![[CSS] テキスト選択時の文字色・背景色を設定する](https://metrograph.jp/wp-data/wp-content/uploads/2015/03/select.jpg)
[CSS] テキスト選択時の文字色・背景色を設定する
対応 対応(-moz-) 9~ 対応 未対応 4.4~ テキストを選択(反転)した時のスタイルを指定するには、::selection擬似要素を使用します。 Firefoxは、ベンダープレフィックス付きの::-moz-selectionを指定しないと適用されないので注意してください。 IE8以下は未対 […]
web![[CSS] 傾斜したグローバルメニュー](https://metrograph.jp/wp-data/wp-content/uploads/2015/03/tilt.jpg)
[CSS] 傾斜したグローバルメニュー
対応 対応 9~(-ms-) 対応 対応 対応(-webkit-) 斜めになった横並びメニュー Codepenに面白いカタチのメニューがあったので、試してみました。 CSS3のtransformプロパティを使用するため、対応ブラウザは各モダンブラウザとIE9+。 ※CSSは最低限必要なプロパティのみ […]
web![[CSS] フォントのアンチエイリアス設定](https://metrograph.jp/wp-data/wp-content/uploads/2015/03/smoothing1.jpg)
[CSS] フォントのアンチエイリアス設定
Macのみ Macのみ 未対応 未対応 未対応 未対応 CSS3のfont-smoothingプロパティを使用することで、フォントのアンチエイリアスを調節することができます。 ※Windowsはブラウザに関わらず対応していません Mac版のSafariやOpera、ChromeなどのWebkit系と […]
web