サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
metrograph.jp
2018.01.28 記事の表記を見直しました iPod Classic 160GB 最終型のHDDが壊れて2年ほど放置していたのだけど、ついに修理することにした。やっぱり、iPhoneもiPod touchも持つなんて持ち腐れ感あるし、かといってiPhoneには音楽が入り切らないし……。 というわけでいろいろ調べて、純正HDDを取り外し、かわりにSDカードを使う方法を試してみることに。 ※iPodの開腹作業は自己責任でお願いします 作業のポイント 作業前にSDをexFATでフォーマットする なるべく開腹用の工具を揃えておく HDDのリボンケーブルにくっついているメッシュスペーサーは捨てない 復元エラーが出てもめげない 必要なパーツを揃える まずはパーツ集め。 なんと全部Amazonで手に入ったし、プライム対応だったので翌日届いた。すげぇ。 2017年9月現在、合計14,436円でした。こ
web creative others [WordPress]さくらサーバでWordPressをSSL対応させる さくらのSSL対応はちょっとやっかい さくらは他のサーバとくらべ、SSL対応時に特殊な対応が必要になります。 編集する必要はあるのは、 wp-config.php rootの.htaccess です。 wp-config.php if( isset($_SERVER[‘HTTP_X_SAKURA_F […] 2018.03.23 web [WordPress] “この投稿用のCSSをアップ”機能をカスタムフィールドで作成する ページ追加のたびにテンプレも追加すると工数がかかる キャンペーンなどで固定ページが増える運用のサイトは、固定ページを作るたびにテンプレートの追加・修正工数が増えてしまうので、なるべくダッシュボード側で完結させたい場合があります。 そんな時は、ダッシュボード
Firefoxでtd要素のborderが表示されない td要素にborderを指定しても、borderが表示されないことがあります。 td { position: relative; border: 1px solid #000; background: #ccc; } こんなようなスタイルを当てたとき、Chromeなどではきちんと表示されるのだけど、Firefoxだけ表示されないのです。 原因はposition? デベロッパーツールでtd要素をいじってみたら、どうもpositionが指定されているとborderが表示されなくなるらしい。 かと言ってpositionを外すと意図したデザインが出来ないし、どうしたものか……と悩んでいたら、あっさり解決しました。 CSSのみで対処できた td { z-index: -1; position: relative; border: 1px soli
Androidで何かしらの要素をタップした時やフォーカスが当たった時、オレンジ色の枠が表示されます(色は機種によって違うらしい)。 このオレンジのド畜生野郎が、案外デザインを邪魔してくるので、消してやろうといろいろ調べてみました。 ネット上に転がっている情報では消えなかった #honyarara { -webkit-tap-highlight-color: rgba(0,0,0,0); } これで消えるぞ!的な情報がごろごろ出てきますが、これだとしぶとく表示されます。 驚異的生命力。Gかよ。 これで消えた #honyarara { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-box-shadow: none; box-shadow: none; outline: none; } どうやらあの忌まわしきオレンジのド畜生はbox-sh
概要 長い文章や項目の多いフォームなどの高さを制限して、クリックで表示したいときに便利な「続きを読む」 「もっと見る」ボタン。 要素をグラデーションで隠して、ボタンをクリックすると全文を表示してくれます。 UIとして適切かはともかくとして、どうしてもページの高さを節約したいときなどに便利です。 最近では、ヤフー知恵袋の2つめ以降の回答などで見かけますね。 仕組みとしては、チェックボックスを用いて、チェックされたら兄弟要素を表示状態にするというものです。 デモはこちら [jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装するから随分と時間が立っておりますが、アニメーションさせなければjQuery使うほどでもねぇなぁ、と思ったので、今のところ一番簡単な方法をメモ替わりに書いておきます。 もっといい方法あるで!!という方はコメントやらついったーやらで教えてくださいませ。
flatpickrは、jQueryに依存せず、単独で動作する軽量なDatepickerです。 flatpickr 実装 <head> <link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css"> <script src="https://unpkg.com/flatpickr"></script> </head> flatpickrの最新バージョンは、CDNで読み込むことができます。 <head>内へ上記を書くだけで、導入は完了である。 かんたんだね。 使ってみよう <input class="flatpickr" type="text" placeholder="Select Date.."> HTMLはinputに任意のIDかクラスをつけるだけです。 後ほど、このクラスかIDを指定して
iOSは機種やブラウザに関わらずiOS10が必要みたい(要検証) Androidの標準ブラウザは恐らく全滅、Chromeは新しめのものならだいじょうぶっぽい(要検証) PCはモダンブラウザなら大体だいじょうぶ。 デモは下部のボタンから シェアボタンってあんまり使わないよね スマホでシェアボタンをタップすると、ブラウザでSNSが開いて、いちいちログインする必要がありますよね。 でも、SNSはアプリしか使わないので、ログイン情報なんて覚えていない……という人はかなり多いのです。 PCではURLは問題ないのだけど、タイトルがうまくコピー出来ないサイトが多い(どうしても周辺の余計な文字も選択してしまう)。 記事をシェアする場合、シェアボタンでSNSへ飛ぶのではなく“タイトルとURLをコピー”し、使い慣れた方法でSNSに投稿する、というほうが使いやすい人も多いのではないでしょうか。 色々調べてみると
長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit
テキストを選択(反転)した時のスタイルを指定するには、::selection擬似要素を使用します。 Firefoxは、ベンダープレフィックス付きの::-moz-selectionを指定しないと適用されないので注意してください。 IE8以下は未対応のため、指定してもデフォルトのスタイルで表示されます。 ::selectionの使い方 ::selection { background: #000; color: #fff; } //Firefox ::-moz-selection { background: #000; color: #fff; } 要素を指定しなければサイト全体に適用されます。 .example::selection { background: #000; color: #fff; } 要素やクラスを指定すると、その範囲のみ適用されます。 ::selectionで使用できるプ
斜めになった横並びメニュー Codepenに面白いカタチのメニューがあったので、試してみました。 CSS3のtransformプロパティを使用するため、対応ブラウザは各モダンブラウザとIE9+。 ※CSSは最低限必要なプロパティのみ記述しています デモはこちら HTML <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ul> ul{ transform: skew(-20deg); } まずはulにtransform: skew(-20deg);を指定。数値はお好みで。 li{ float: left; margin: 0 1px; background: #3397de; }
CSS3のfont-smoothingプロパティを使用することで、フォントのアンチエイリアスを調節することができます。 ※Windowsはブラウザに関わらず対応していません Mac版のSafariやOpera、ChromeなどのWebkit系とFirefoxのみ、プレフィックス付きで独自実装しているみたいです。 WebkitとFirefoxで別のプレフィックスをつける必要があり、値も違ってくるので注意が必要です。 アンチエイリアス調節のデモ(効果が見えるのはMacのみ) Webkit用CSS Webkitには-webkit-を付与。 .example{ -webkit-font-smoothing: none; //ぎざぎざ -webkit-font-smoothing: antialiased; //なめらか -webkit-font-smoothing: subpixel-antial
このページを最初にブックマークしてみませんか?
『metrograph.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く