大分県のweb関連・wordpress・PCサポートやってます
-
要素全体にリンクする
ブロックエディタで要素全体にリンクする方法を探すとリンクタグのみを入れて要素全体に適用する感じのものが多いです。 ブロックエディタの標準的な使い方では、こういう処理が出来ないので少し工夫します。 カス…
-
画像をマウスオーバーでズームする
画像の上にマウスが行くと画像がズームされるという処理をCSSのみで行います。wordpressのブロックエディタで使える様にしています。 サンプル 画像ブロックの高度な設定＞追加CSSクラスに img…
-
固定ページや投稿ごとにCSSやJavaScriptを追加したい
検索して見つけたけど、答えはこれだわ(笑) WordPress｜固定ページや投稿ごとにCSSやJavaScriptを追加する方法 とても素晴らしい情報をシェアしてくれてありがとうございます。 ※エラー…
-
スクロールすると表示するエフェクト
スクロールするとじわーっと表示するエフェクトです。CSSとJavascriptで設定します。このページのソースコード部分に設定しています。 今回はクラス名を「scroll-effect」に設定しました…
-
画像にテキストを重ねる
サンプル 画像の下部にテキストを重ねて表示する場合は以下の様に行います。CSSのみの設定で可能です。 オーバーレイする文字をこの段落に記述すると表示されます。グループで指定しているので、グループ内の画…
-
画像に文字をオーバーレイで表示
例 オーバーレイする文字をこの段落に記述すると表示されます。グループで指定しているので、グループ内の画像や他の段落なども表示します。 別の段落も表示されます。 ブロックのレイアウト 縦積みの下に画像と…
-
メディア別表示
PCのみ表示したい。スマホの時だけ表示したい。という場面で使えるCSSです。 使用例 PCのみ表示 PCのみ表示します。for-pc スマホのみ表示 スマホのみ表示します。for-mobile 段落に…
-
タグの装飾
デモ（HTML） gutenberg プラグイン ページビルダー HTMLソース ブロックテーマにもよるが、出力されるタグのHTMLソースは上記の様になります。 CSS設定 今回は、単語カードっぽいデ…
-
トップに戻る
トップに戻るを実装する 一定数スクロールすると矢印を表示して、トップに戻るようにします。矢印はFont Awesomeを使って表示します。 HTML的にはbodyタグの下にリンク貼って、CSSとJSで…