TECH Chromeのデベロッパーツールでa:hoverのstyleを表示する方法
下記ページで、ボタン用のCSSを紹介しました。💡CSS │ ささやかに浮き上がるボタンを最速で作る │ 盛れてません。このCSSを作るときに、マウスをホバーさせたときのアンダーラインが消えなくて、Google Chromeのデベロッパーツー...
CSS
TECH 
TECH CSS │ ささやかに浮き上がるボタンを最速で作る
CSSでフワッと浮き上がる控えめなボタンを作ってみました。CSSに下記のように記載して、.modest_button { padding: 0.5em 2em; display: inline-block; text-align: cent...
TECH CSS │ コードとインラインコードのstyleを最速でちょっとマシにする
当サイトでは、コードやインラインコードがちょいちょい出てくるのですが、使っているLION BLOGのテーマでは、デフォルトのままだとスタイルがイマイチ。今回はこれをちょっと変更してみます。追加CSSでデザインを変える例によって→→に移動し、...
TECH CSS │ 大きな文字の表示を最速で実現する
こちらの記事で、当blogで初めて、「大きな文字」の表現をしたんですけど、フツーにWordPressの機能ではこの「大きな文字」を入力できません(入力をサポートするようなテーマはあるかもしれません)。テーマ等を導入せずに、カンタンに「大きな...
TECH CSS │ ボックスデザイン(囲み枠)を最速で実現する
WordPressで記事を書いていると、こういうボックスデザイン(囲み枠)を使いたくなるシーンがあります。これを最速で実現します。ボックスデザイン用のstyleを定義するWordPressの場合、→からを選択し、下記CSSを追加します。.b...
TECH LION BLOG │ CSS │ モバイル表示時の文字サイズを調整する
当サイトのWordPressはLION BLOGという無料テーマを使っているんですが、モバイル表示時のフォントサイズがちょっと小さい。Google Search Consoleにも怒られる始末。このGoogle Search Console...
TECH CSS │ 蛍光ペンのような表現を最速で実現する
よくウェブページで、蛍光ペンでアンダーラインを引いたような表現(←これですね)を見かけるのですが、これを最速で実現します。蛍光ペン用のstyleを定義するWordPressの場合、→からを選択し、下記CSSを追加します。.pink_line...
TECH WordPress │ CSS │ box-shadowで画像の周りに影をつける
このブログではわりとスクリーンショットを貼り付けることが多く、しばしばスクリーンショットって白い画像になりがち。白い背景のページに白い画像を貼り付けるとその境界が分からなくて、ちょっと見づらくなることがよくありました。例えばこんな感じ。とい...