MENU

フルワイドブロック全体をプラグイン無しでリンク化する方法【WordPress】

タイトルの通り。フルワイドブロック内のどこをクリックしてもリンクに飛べるようにする方法のメモ。

この記事執筆現在、このブログのフッター手前に配置しているOFUSEへのリンクがその実例。

目次

注意

諸々自己責任で実行してください。

私の環境において、私の望んだ通りには動作したが、他の環境において正しく動作するかはわかりません。

あと、当方のWebデザインやSEOなどの知識はほとんど無いので、それらにおいてこの方法が望ましいのか、望ましくないのかなどの判別もついていません。ご了承ください。

環境

  • WordPress: 6.7.2
  • SWELL: 2.13.0

WordPressのテーマはSWELLですが、下記の方法においては別にSWELL特有の機能を使っていないと思われるので、ほかテーマでも可能ではないかと推測される（検証などはしてしていない）

手順

1. リンク化していないコードを用意する

  • WordPressの任意のページにおいて、フルワイドブロックを用意してデザインを整える
  • コードエディターを開いて、該当部分のコードを取得する

下記は一例

<!-- wp:loos/full-wide -->
<div class="swell-block-fullWide pc-py-60 sp-py-40 alignfull" style="background-color:#f7f7f7"><div class="swell-block-fullWide__inner l-article"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">当ブログの応援はこちら (OFUSE)</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/full-wide -->

2-a. リンク化する（文字列にリンクの装飾をしない場合）

  • 下記の通りのコードを作成する
    • (リンク先のURL)はURLに変更する
    • #333333のところは、表示したい文字色に変更する
    • 「※この行を消して1.で取得したコードに変更」のところに1.で取得したコードを入れる
<a href="(リンク先のURL)" style="text-decoration:none; color:#333333;">
※この行を消して1.で取得したコードに変更
</a>

実際の例は次の通り

<a href="https://ofuse.me/kazukipage/" style="text-decoration:none; color:#333333;">
<!-- wp:loos/full-wide -->
<div class="swell-block-fullWide pc-py-60 sp-py-40 alignfull" style="background-color:#f7f7f7"><div class="swell-block-fullWide__inner l-article"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">当ブログの応援はこちら (OFUSE)</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/full-wide -->
</a>
  • ショートコードブロック内に入れれば、実際のページではフルワイドブロック全体のリンク化ができている

文字の色をいくつか個別に変えたい場合は<font>とかを使うといいかもしれない（やってないし、くわしくないからあまり偉いことは言えませんけど）

2-b. リンク化する（文字列にリンクの装飾をする場合）

  • 下記の通りのコードを作成する
    • (リンク先のURL)はURLに変更する
    • 「※この行を消して1.で取得したコードに変更」のところに1.で取得したコードを入れる
<a href="(リンク先のURL)">
※この行を消して1.で取得したコードに変更
</a>
  • ショートコードブロック内に入れれば、実際のページではフルワイドブロック全体のリンク化ができている

余談

しくみ？

HTML5では、インライン要素の中にブロック要素を入れてもよくなったらしいので、aの中にdivやらをつっこんでも大丈夫らしい

のかな？くわしくないけど

ヴィジェットならブロックで

ショートコードブロックの代わりに、ヴィジェットのブロックに入れて使うこともできる。というか私はそうしている。

blog
目次