下記ページで、ボタン用のCSSを紹介しました。 💡CSS │ ささやかに浮き上がるボタンを最速で作る │ 盛れてません。 このCSSを作るときに、マウスをホバーさせたときのアンダーラインが消えなくて、Google Chromeのデベロッパーツールのお世話になったのですが、そのままだと「:hover擬似クラスのスタイル」が表示されないんですよね。 a:hoverのstyleを表示する […]
CSSでフワッと浮き上がる控えめなボタンを作ってみました。 CSSに下記のように記載して、 下記のようにclassにmodest_buttonを指定すると、 こんな感じのボタンが表示されます。 ボタン
当サイトではWordPressの無料テーマ「LION BLOG」を使用しています。 LION BLOGのAMPを有効にすると、Google Search Consoleの「AMP」に 許可されていない属性または属性値がHMTLタグにあります。 というエラーが表示されるようになります。 HMTLタグってなんなんですかね? HTMLタグの間違い? いちおうスクリーンショットを貼っておきますけど、たしか […]
Google Search Consoleの「パンくずリスト」に data-vocabulary.org スキーマのサポートは終了します っていうエラーが出ていたので、これを解消しました。 パンくずとは そもそも「パンくず」ってなんなのよ?というと、当ページの上に表示されている これです。 HOME → (カテゴリ) → (ページタイトル)のように、一般的にはトップページから該当ページへたどる道す […]
💡CSS │ 蛍光ペンのような表現を最速で実現する │ 盛れてません。 💡CSS │ ボックスデザイン(囲み枠)を最速で実現する │ 盛れてません。 これらのページで<span class="foo"></span>とか<p class="bar"></p>とかで文字列を囲むことにより、蛍光ペンや囲み枠の表現を実現する […]
当サイトでは、コードやインラインコードがちょいちょい出てくるのですが、使っているLION BLOGのテーマでは、デフォルトのままだとスタイルがイマイチ。 今回はこれをちょっと変更してみます。 追加CSSでデザインを変える 例によって[外観]→[カスタマイズ]→[追加CSS]に移動し、下記CSSを追加します。 そうすると、下記のように、よりコードとして見やすいフォント、見やすい表現に変わります。 以 […]
2021年3月にGoogleからFlutter 2が発表されました。こちらの記事によると、 「Flutter 2では、デスクトップ版を初期リリースとして、当社の『Stable』チャネルに移し、誰もが利用できるようにした」 グーグルがUIフレームワーク「Flutter 2」を発表–ウェブやデスクトップのアプリ開発にも対応 とのこと。いよいよ安定版チャネルでも、デスクトップアプリが開発でき […]
こちらの記事で、 当blogで初めて、「大きな文字」の表現をしたんですけど、フツーにWordPressの機能ではこの「大きな文字」を入力できません(入力をサポートするようなテーマはあるかもしれません)。 テーマ等を導入せずに、カンタンに「大きな文字」を入力する方法を紹介します。 HTMLとCSSによる「構造」と「見た目」の分離 「大きな文字」というのは文字の装飾にあたります。 ウェブサイト上の文章 […]
WordPressで記事を書いていると、 こういうボックスデザイン(囲み枠) を使いたくなるシーンがあります。これを最速で実現します。 ボックスデザイン用のstyleを定義する WordPressの場合、[外観]→[カスタマイズ]から[追加CSS]を選択し、下記CSSを追加します。 ボックスデザインを適用したいp要素にclassを設定する ボックスデザインを適用した箇所で「HTMLで編集」し、p要 […]
ブラウザのタブに表示されるアイコン、いわゆるfaviconが、このようにWordPressのものになっていて、 なかなか残念な状態だったので、このfaviconを変更するようにしました。 アイコンはイマイチですが、変更後はこんな感じになりました。 プラグインFavicon by RealFaviconGeneratorを導入する やり方はいろいろあると思いますが、プラグインでさくっと設定するのがW […]
