タグ: CSS
-
標準のブロックと少量のコードでタブコンテンツを作る方法
ページ内のタブ切り替えは、内容が長くなってしまうのを防ぐのにいい方法ですし、何よりHTML上には出力されているので検索エンジンからきちんと内容を認識してもらえるのでとても好都合です。 しかしながらWo…
-
標準の「詳細」ブロックを使って「続きを見る」コンテンツを作る
WordPressの投稿や固定ページでは、基本的に本文のすべてのコンテンツが表示されるようになっています。 これをニュースサイトのように途中まで表示させて、それから下は「続きを見る」ボタンをクリックす…
-
クエリーループブロック内のタイトルを1行表示に強制する方法(メモ)
WordPressのブロックエディターにおける最高の便利ブロックであるクエリーループブロック。いろいろな切り口でサイト内の情報を抽出して、リストやカード形式で表示でき、必要であればページ送りも付けるこ…
-
ブロックテーマでサイトの背景画像を設定する5つの方法
Twenty Twenty-Two(TT2)テーマでサイト全体の背景画像を設定したいけど、テーマエディターでは背景色しか設定できないという問題を解消する方法を紹介します。
-
クエリーループのカード全体をクリック可能にする方法(メモ)
テーマ内にPHPでコード書いたり、ショートコードにしたり、特別なプラグインを使わなくても本当に簡単に投稿リストの挿入ができる「クエリーループブロック」。Twenty Twenty-Fourなどをはじめ…
-
画面サイズに関わらずクエリーループ内のコンテンツの高さを揃える方法
クエリーループブロックで作成した横並びの一覧。現在、このサイトのトップページもTT3テーマのデフォルトのまま、横3列で表示されるようにしているのですが、1366×768のノートではいい感じに…
-
プラグインなしでサイト内に英語の代替ページを作る方法
WordPressには、同一サイト内に多言語(他の言語)のページを作成するプラグインがいくつもあり、どれも結構便利に使えるものの、どうなってるの?を知りたいのであえてプラグインなしで構築した時の備忘録…
-
標準のコードブロックをprism.jsを使ってちょっと格好よくハイライト表示させる方法
WordPressで何かのコードを紹介するときに使う、「コード」ブロック。 背景色などは付けられるものの、ちょっとアレ(ダサい)じゃないですか? 本ページは、WordPressのコード表示をちょっとお…
-
子カテゴリーのみのリストを表示させるショートコードの作り方
WordPressのブロックエディターで標準装備されている「カテゴリー一覧」ブロック、簡単にカテゴリーの一覧を表示でき、以下のようなオプションがあります。 ただ、その中の一部カテゴリーの一覧を表示させ…
-
スタイルコードに出てくる文字サイズ「em」と「rem」の違い、使い分けの仕方(メモ)
スタイルコード(CSSに記述するコード)で文字の大きさを指定するときなどに使う「em」と「rem」、理解して使いわけていますか? コピペで..というような参考ページのスタイルコードをそのまま貼り付けて…
-
アイキャッチ画像付き、最終更新日基準で前後の投稿へのリンクを表示するショートコード
前後の投稿を出力する方法を紹介している多くのページでは、「get_previous_post()」「previous_post_link()」関数を使ったものが多いのですが、これだと公開日基準になって…
-
標準のdetailsブロック(詳細ブロック)をスムーズに開閉させる方法(メモ)
WordPressの「詳細ブロック」ご存じですか?数々のブロックの中にひっそりとあるので気づいてすらいない方も多いのでは? このブロックを使うと、タイトルをクリックしたら中身がバーンと展開される、開閉…
-
ボタンをクリックすると現在の画面に被せてコンテンツを表示させるショートコードの作り方
WordPressで、ボタンをクリックすると画面全体を覆う別のコンテンツがふわっと表示される機能をショートコードで実装する方法を紹介します。 何かの補足事項を表示させたり、規約的なものを表示させる際に…
-
WordPress標準のリンクカードのデザインをカスタマイズする方法いろいろ
段落ブロックなどに内部リンクURLを貼るなどすると、自動で表示される、WordPressの内部リンクカード。 知らないと何気にリンクURLを貼り付けてびっくりする方もいるでしょう。 ただ、文字がリンク…
-
親要素全体をクリック可能にする恐らく一番簡単な方法
カード化したコンテンツ全体をリンク(クリック可能)にしたいと考えた時、どのようにしていますか? よくやるし、よく紹介されているのは以下のようなHTMLで、子要素Aのリンクを全体に広げる方法ですね。 親…
Loading posts…
No more posts