Probably the easiest way to make the entire parent element clickable

PubDate:

/ ModDate:

WordPressのカスタマイズ方法についての画像

<Description based on the Act on Premiums and Representations> The content on this site may include product promotions.



What do you do when you want to make the entire carded content a link (clickable)?

This is often done and is often introduced using HTML like the one below, which is a method to spread the link of child element A throughout.

<div class="oya-content">
    <div class="ko-content-a">
        <a href="">Child content contentA</a>
    </div>
    <div class="ko-content-b">
       Child content contentB
    </div>
</div>

It’s like adding “position:relative;” to the parent element and “position:absolute;” to the child element A with the link, expanding that element to the whole, and then specifying the position of the child element A. It will come true.

However, with this, specifying the position of content A in the child content is very troublesome, and the style code becomes very uncomfortable when trying to adapt it to various screen sizes.

Also, if you use something like “display:flex;”, the situation becomes increasingly complicated.

Therefore, this time, I will introduce two ways to make the entire parent element click (link) using a different method (I personally recommend [Method 2]).

The method introduced on this page is an example. Please check it yourself to determine whether it is correct as HTML coding.

[Method 1] Surround the entire content with link tags

This is quite a chore and was not recommended at all until a while ago. But before you know it, it has become acceptable (no longer seen as a problem), and you can sometimes see it written in the following way.

<a href="">
    <div class="oya-content">
        <div class="ko-content-a">
            Child content contentA
        </div>
        <div class="ko-content-b">
            Child content contentB
        </div>
    </div>
</a>

In terms of syntax, the anchor text part is the content enclosed in a div, so this is OK (maybe), but previously. .. Personally, I don’t want to use this method if possible because it comes with annotations like this.

By adding a class attribute to the a tag and writing style code for it, you can add some decoration etc. to only that content.

QA Analytics QA Analytics

[Method 2] Use a link without anchor (link text)

This is the method I personally recommend and works well without being influenced too much by the display element in the style code.

Write HTML like this.

<div class="oya-content">
    <a href="Link destination URL" aria-label="Purpose/content of link (instead of anchor)"></a>
    <div class="ko-content-a">
        <a href="">Child content contentA</a>
    </div>
    <div class="ko-content-b">
       Child content contentB
    </div>
</div>

The basic method is the same as the common form shown at the beginning, so write the style code as shown below to reflect the relationship between parent and child elements and link elements to the entire parent element.

.oya-content{
position:related;
}

.oya-content a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

There are four points to keep in mind when using this method:

  • Insert the completed a tag directly below the parent element
  • Do not put anchors (link text) in the a tag, and do not use the a tag in other parts.
  • Add “aria-label” attribute instead of anchor
  • Specify something other than the a tag for decoration when hovering

First, we will create a parent-child relationship using position, so we will create a structure where the link will be placed directly under the parent element.

Then, use the a tag only in this one place and do not use it anywhere else (if you use it, add a class to both to clearly separate them), and since there is no anchor, you can use Google PageSpeed Insights etc. to To avoid getting the message “No possible name specified,” add the “aria-label” attribute to clarify the meaning of this link (it seems that the title attribute would also work fine).

Finally, when you want to make a change, such as changing the background color when hovering, you usually use a pseudo element to control the a tag, but with this method, the a tag is placed on the content, so If you specify a style directly to the a tag with a pseudo element (:hover), it will not affect the contents and will be covered with the set background color, so be sure to add the pseudo element to the original class and write the style code. Let’s write.

The above seems unlikely, and I still have doubts as to whether this is really a good method, but it was a quick, easy-to-understand, and more reliable way to set links throughout the content.


This page is an English translation of the Japanese page. The information on the Japanese page may be more accurate because we maintain the Japanese page as the basis and not all content matches.
You can view the Japanese page by clicking the “View Japanese Page” button on the top right of the page, so please take a look.

If you found the content posted on this page or the reference code introduced helpful, please leave a comment in the comment section at the end of the page, or spread the word on SNS etc.

The methods and codes posted on this page have been confirmed to work in my environment as of the last update date. Please note that in principle, we will not respond even if we receive information about malfunctions or detailed customization methods in the comments section.

Until the end Thank you for reading.

The copyright and ownership of all content published on this page, including texts, images, and codes, belongs to this site, and reproduction is strictly prohibited.