WordPressプラグイン【MetaSlider】Enter Manuallyを使う際の注意点

デザイン
2023年最新!おすすめのレンタルサーバー


今なら実質半額!月額495(税込)で超高速サーバーが使用可能!

今なら「星のリゾート宿泊券」「iPad」などの豪華賞品が当たるチャンス!

10日間お試し無料!2023年2月2日まで!
エックスサーバー 公式サイトはこちら >

 

以前WordPressにMetaSliderプラグインを実装する方法を案内しましたが、Enter Manuallyを使って記事のリンクを設置すると問題が発生するので、今回はその点についてご案内致します。

問題点

こちらの方法、一見問題なく完成している様に見えるのですが、1つ重大な欠陥があります

entermanuallyでテキストを入力すると、この下の、テキスト部分のタップ・クリックが効きません。

確認出来ているでしょうか?

リンク付きの画像の上に、リンク無しのテキストが貼りにベタ貼りになっていて、画像のリンクがタップ・クリック出来ない状態になっているのです。

今回はその解決方法をご案内致します。

解決方法

まず、テキストの入力方法ですが、

この様に、文字のみ入れてはいけません。

こうすると、文字の部分のタップ・クリックが出来ません。

ですので、この文字列をaタグ化(リンク化)します。

ただ、そのままaタグ化してはダメです。

そのままaタグを入れてしまうと、青文字、下線が入ってしまい、デザインが崩れてしまいます。

ですので、インラインスタイルを用いて次の様にコードを追加します。

文字色の無効化  : color:inherit;

テキスト装飾の無効化  : text-decoration : none;

マウスホバー時のカーソル変化👆の無効化 : cursor:default;

<コピペで使えるサンプルコード>

<a href="リンク先のアドレス" style="cursor:default;color:inherit;text-decoration:none;">キャプション</a>

この様に指定してあげると、デザインも崩れることなく、全面でタップ・クリック出来る様に仕上がります。

MetaSliderは、素晴らしいプラグインですが、ここを直すとユーザビリティが向上しますので、ぜひ参考にしてみてください。

最後まで読んで頂きありがとうございました。

 

 

コメント

タイトルとURLをコピーしました