WordPress Sliding Underline Effect – 超連結式樣設計

max

6 年前

WordPress Sliding Underline Effect 今天介紹的超連結式樣設計，目的在幫助站內文章提高點擊率，這是改善網站 SEO 的第一步。

有使用 Yoast SEO 外掛程式的朋友，應該會感覺到最近在編輯文章時，要達到綠燈的機會越來越高，多半的原因是因為 SEO 針對文章內容的設計提示，越來越容易讓編輯者檢視並進行修改。如果您的網站經營一段時間，發覺自己網站的文章內容點擊率沒有顯著提升，那麼我們建議您透過 Yoast SEO 外掛程式的設計協助，可以逐步改善網站文章內容的點擊成效。今天分享的文章重點不是 SEO 外掛程式的說明，而是其中的一項功能 internal links 站內連結，透過超連結的式樣設計，進一步達到提升站內其他文章內容的點閱率。

WordPress Sliding Underline Effect

今天分享的是樣設計是我個人非常喜歡的效果，滑鼠移到連結文字時，出現連結文字底線的滑動效果，透過這樣類似動態的提醒效果，希望可以吸引訪客的目光並進行點擊。
舉例來說，想要建置文字連結的滑鼠移動效果是底線由左至右滑動，定義式樣設計的語法如下：

.slide-left-right
{
text-decoration:none;
display: inline-block;
color:black;
}
/* 這裡可以修改線條粗細 */
.slide-left-right:after 
{
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease; /* 這裡設計線條滑動時間與背景色，預設是設計 0.5秒。*/
-webkit-transition: width .5s ease, background-color .5s ease; /* Chrome and Safari */
-moz-transition: width .5s ease, background-color .5s ease; /* FireFox */
}
/* 這裡可以修改線條顏色 */
.slide-left-right:hover:after 
{
width: 100%;
background: black;
}

.slide-left-right

{

text-decoration:none;

display: inline-block;

color:black;

}

/* 這裡可以修改線條粗細 */

.slide-left-right:after

{

content: '';

display: block;

height: 3px;

width: 0;

background: transparent;

transition: width .5s ease, background-color .5s ease; /* 這裡設計線條滑動時間與背景色，預設是設計 0.5秒。*/

-webkit-transition: width .5s ease, background-color .5s ease; /* Chrome and Safari */

-moz-transition: width .5s ease, background-color .5s ease; /* FireFox */

}

/* 這裡可以修改線條顏色 */

.slide-left-right:hover:after

{

width: 100%;

background: black;

}

參考的文章：CSS sliding underline effect on hover 文章內容還示範了其他幾種效果，有興趣的朋友可以前往參考。

結論

隨著網站的逐步建置完成，如何讓自己的網站內容可以獲得更好的搜尋效果，每一位管理者都需要花費時間，去觀察與調整網站內容的呈現方式。這些過程或許可以透過某些外掛程式的協助，也或許透過某些式樣設計的修改，讓網站內容呈現更好的展示效果。找到最適合自己網站的營運模式，當然是網站管理者的責任與目標，希望分享的內容可以幫助大家獲得實質的改善。

WordPress Sliding Underline Effect

結論

相關文章推薦：WordPress Link Hover Effects – 文章連結效果