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