Chrome のデベロッパーツール【検証】でローカルに保存した CSS ファイルを使う ― Workspace の追加と CSS ファイルのマッピング

CSS ファイルのマッピングはとても便利だ 。でも、作業開始位置には注意が必用だ!

 

はじめに:

注意!

ここで説明している Chrome DevTools のマッピング機能は 2017年12月に削除されたため、local host 上のウェブサイトを Filesystem タブ上で開発する場合を除いて、この記事の内容はほとんど無効になった

マッピングに代わる Local Overrides(ローカルオーバーライド)機能が、Chrome Canary DevTools にインプリメントされている。
外部サーバー上のウェブサイトを開発する場合は、Overrides タブ上でこの機能を使うと良い。ローカルオーバーライドの設定と使い方については、次の記事を参考にして頂きたい。

追記:(2018/03/08)

参考記事リストの末尾の記事は 2018年 2月28日の投稿だ。
この中で通常版の Chrome DevTools でもローカルオーバーライドが使用可能になったことを報告しているが、今のところリストの先頭の記事に書いてある設定が必要条件になっている。これもいずれアップデートにより変わるものと予測しているが、今はとりあえずその設定を参考にして頂きたい。

参考記事:

最近ちょっと理由があって、固定ページのレイアウトを『Twenty Fourteen を使って Twenty Sixteen ライクに』する計画を立てていた。

で、この記事を書きながら、そちらの方を ―― マッピング活用の実地研修を兼ねて ―― 色々いじっていたら、思いのほか短時間でテスト運用ができるまで仕上がってしまった。

今は、そのスタイルを【VST プラグイン関連のメモ帳】の 3 本のページに適用して様子を見ている。サブタイトルには、その時に、複数の CSS を処理しようとして混乱してしまった自分自身への反省の意が込められている。…このページを読む

Chrome のデベロッパーツール【検証】と WordPress は相性が悪いのか? ― WordPress Ver 4.8 で CSS ファイルのマッピングができなくなった件

今までできていた事が突然できなくなるのは、良い気持ちがしない ―― ということ・・・WordPress での実例。

はじめに:

注意!

ここで説明している Chrome DevTools のマッピング機能は 2017年12月に廃止されたため、この記事の内容は全面的に無効になった。

マッピングに代わる Local Overrides(ローカルオーバーライド)機能が、Chrome Canary DevTools にインプリメントされている。この機能の使い方については下のリンクを参考にして頂きたい。
ただ、Chrome Canary では今後何が起きるかわからないので、私自身は今でもこの記事の設定を継続している。

参考記事:

去年の 4月 11日の記事「Chrome のデベロッパーツールでサンプル CSS を・・・以下省略」の追記(今年 5月 28日付け)で、通常の Chrome では実行できなくなったサーバーとクライアント側(local)の CSS ファイルのマッピングは、 Google Chrome Canary では実行可能である云々・・・と書いた。

ところがだ・・・その追記からひと月も経たないうちに、Chrome Canary でもマッピングができない事案が発生していたので、とても驚いた。

この問題はこれから説明する解決方法で片付いたのだが、思いがけない付録まで付いてきた。どういう訳か、通常の Google Chrome でも再びマッピングができるようになっていたのだ!いったい何が起きているのだろう・・・?

これは WordPress のテーマ Twenty Fourteen の子テーマを作ろうと思い立った時の話だ。…このページを読む

Chrome のデベロッパーツール【検証】でアクション疑似クラスを作成する ― div 要素の【展開/折り畳み】もそれなりには・・・

アクション疑似クラスを作ってみる ―― WordPress での実例。

はじめに:

この章では、第 1 章で作ったクラス型スタイルを利用して、アクション疑似クラス型スタイル(アクション疑似クラス)を作ってみる。

応用例では、div 要素のアコーディオン的な【展開/折り畳み】を、WordPress では順必須の簡単なショートコードと、幾つかのスタイルを組み合わせることで実現している。

そのサンプルコード中では、クラス型、ID 型、要素型の各スタイルをあえて混在させてあるので、そこをいじると動作がどう変わるのか ―― または変わらないのか、ということを各位ご自分で試してみて頂きたい。…このページを読む

Chrome のデベロッパーツール【検証】で CSS のスタイルを作成する ― まずは既存のスタイルを利用して

とにかく【検証】のツールに触ってみる・・・まずは [ + ] ボタン(プラスボタン)をクリックしてみよう!―― WordPress での実例。

はじめに:

前回は、習うより慣れた方が速い・・・という趣旨で書いた。その方向性は今後も変わらない。

特に、これから CSS  に取り組みたいと考えている人には『解説なんか読む前に、ひたすら【検証】をいじり倒してみる』というやり方を強くお勧めする 。
画面の収拾がつかなくなったら、画面更新ですべてをマッサラに戻して、またチャレンジすれば良いのだ ―― ということで、今回は新しいスタイルの作成にチャレンジする。…このページを読む

Chrome のデベロッパーツールでサンプル CSS を編集してみる ― 習うのも良いが、慣れた方がもっと良い【検証】の話

【検証】の機能を理解したければ、何でも良いからとにかく使ってみるのが早道だ ―― WordPress での実例。

今回はスタイルシート(CSS)のスタイルの、特にプロパティの編集について説明するが、サンプルとして簡単な  div 要素のレイアウトと、その表示をコントロールする CSS を用意したので、【検証】を使って色々遊んでみて頂きたい。

ブラウザの幅を縮小していくと、このサイトの 2 個のサイドバーの表示状態に同期してサンプルのレイアウトも変化する。これは、このサイトで実際に使っている Twenty Fourteen の style.css の子クラス、custom-style.css の動作を簡単にシミュレートした動きだ。

ただし、このシミュレーションは PC でしか確認できない。モバイルデバイスでは、残念だが画面変化は見られない。
…このページを読む

Chrome のデベロッパーツール 【検証】 は強力な開発ツールだ ― 最初は要素の検証から

WordPress テーマのカスタマイズには Chrome の 【検証】 が必須アイテムだと思う件。

WordPress のテーマ Twenty Fourteen 用に作成した子スタイルシート(CSS)を編集するにあたり、Google Chrome のデベロッパーツールの【検証】の機能を少し真面目に追いかけてみた。

実際に使ったのは CSS スタイルの編集機能だけだが、ほんの数回触っただけでも、これはものすごく強力な機能であることが分かった。
初めて体験したこの機能の印象が強烈だったので、忘れないうちに書いておこうと図と簡単なコマ送り動画を用意したら、それだけでも結構な量になった。

なので、今回は編集前の準備段階と編集機能を使わない要素の検証方法についてだけにして、編集機能については続きで書くことにした。
でも、それは今回のを書き終えてまた色々調べてからにしようと思っているので、少し時間が空くかもしれない。
…このページを読む

MIDI Yoke と loopMIDI ― Windows 10 で使う仮想 MIDI ケーブル

Domino も Reaper も Cubase LE5 も Windows 10 で問題なし。でも MIDI Yoke では問題が・・・ 。

2 月 24 日 に OS を Windows 10 にアップグレードした。

Windows 8.1 に不満はなかったのだが、以前の記事で書いた「Microsoft Update で必ず大量のエラーが発生する」という状況は何とかしたかったので、OS のクリーンインストール、PC のリフレッシュ、Windows 10(Win 10) へのアップグレードという選択肢の中で、一番工数と時間が省けそうな Win 10 へのアップグレードで様子をみることにしたのだ。

Win 10 上の動作が心配だったのは FFFTP、xampp、などのかなり使用頻度の高い 32 bit ソフトウエアだが、それについては今のところ問題になるような現象は発生していない。また、これらの次に大切な Domino、Cubase LE5(Cubase)、Reaper v0.999(Reaper)、Viena などの DTM 関連の 32 bit ソフトについても、問題となるような現象は発生しなかった。

問題が発生したのは、Domino と 2 本の DAW ソフトが使う仮想 MIDI ケーブルの MIDI Yoke だ。…このページを読む

Google AdSense に迷惑ソフトウエアの広告が配信された件

ReimageRepair には気を付けよう・・・と書いた記事に ReimageRepair の広告が配信された話。

2 月 5 日のことだ(6 日だったかも知れない)。
PC 関連の記事を開いて AdSense をチェックしてみたところ、ウィルス対策ソフトの広告が配信されていたので、Google のツール Google Publisher Toolbar でスポンサーサイトの URL を確認してみた。

で、そのあと何がどうなったのかというと ――

  • 1)まず URL が ReimagePlus だったので Google 宛にメッセージを送信してから URL をブロック(※)
  • 2)画面を更新して確認。ReimagePlus は表示されなくなった。
  • 3)今度は画面上に何やら地図関係の広告が表示されているので  URL をチェック。スポンサーが MindSpark だったので (※)を実行。画面を更新。
  • 4)画面上にいやな予感の天気予報の広告が表示されているのでムニャムニャ・・・。
  • 5)URL が予想通り WeatherBlink だったので頭に血が上る  !!

―― という、迷惑ソフトダウンロードサイト配信の 3 連発をくらってしまった。…このページを読む

WordPress のテーマ切り替えプラグイン jonradio Multiple Themes を使ってみた

固定ページのテーマを Twenty Sixteen に変更 ―― その 3。

このサイトのテーマ Twenty Fourteen のデフォルトのテキスト表示領域の幅は 474 px だが、それでは狭すぎるので、私は 605 px に広げて使っている。ブログはこれで十分満足だ。

でも固定ページを 3 カラムのテーマで表示するとちょっとタイト過ぎるので、できるものなら何とかしたいという漠然(ばくぜん)とした思いはあった。…このページを読む

Twenty Sixteen のフォントを Twenty Fourteen のフォント設定に変えてみた ― その他色々

固定ページのテーマを Twenty Sixteen に変更 ―― その 2。

固定ページの一部の表示を Twenty Sixteen に変更したことは前回報告した。
その時、フォントやウィジェットの配置などをチョコチョコいじった・・・と書いたが、本当にそんな感じだったのだ。

デフォルトテーマの Twenty Fourteen の表示に近づけたくて、フォントのところを数行、ウィジェットのところを数行、余分な空白を削除したくて @media screen のところを・・・なんて調子でやっていたので、もしアップデート通知なんかが来たらちょっと慌てなきゃならない状況だった。

そういう諸々(もろもろ)を少しずつ整理してきて、ずっと @import ディレクティブ(命令)で間に合わせていたフォントの件も前回の記事を契機に整理することができたので、今回はそのあたりの概略を報告する。
以下のコードウインドウに実際に使っているコードと CSS の一部、または全部を載せるので、申し訳ないがそれをもって詳細説明に代えさせて頂きたい。…このページを読む

年をとっても出来ることはある・・・例えばDTMだって!