リンクやアーカイブのタイトルなどのテキストを置換する

部分的に、翻訳文字列を変更するくらいはCSSでも可能です

WordPressは、ベースが英文で翻訳ファイルを使って日本語表示を行いますが、日本語の翻訳ファイルが無く、リンクなどが英文で表示されることがあります。

翻訳用の関数が適切に使用されている場合は、チャイルドテーマ等で、独自の翻訳ファイルを作成してカスタマイズする事ができますが、PHPのスキルを必要とします。

条件が合えば、CSSでリンク文字列を変更するような事はCSSでも可能で、その方法を知っておくと便利です。

以下、:before、:after擬似要素を使ってリンク文字列をCSSで置換してみたいと思います。

HTML

<a href="http://example.com/archives/27941#more-27941" class="replace-link">Keep reading →</a>(このリンクを置換します)
<a href="http://example.com/archives/27941#more-27941">Keep reading →</a>(元のままのリンクです)

CSS

.replace-link{
 overflow:hidden;
 color:rgba(0,0,0,0); /* rgbaを使って文字を透明にします */
 width:2em;/* 変更後の文字列の長さに合わせます */
 height:1em;
 line-height:1;
 display:inline-block;
}
.replace-link:before{
 content:'詳細';
 color:rgba(0,0,0,1);
}

以下のコードでも、多くのブラウザで動作しますが、edgeを除くie11以下では、文字列が表示されません。

.replace-link{
 visibility:hidden;
 margin-right:-107px;/* 元表示されていた文字列幅分のネガティブマージンを与えます */
}
.replace-link:before{
 content:'詳細';
 visibility:visible;
}

https://connect.microsoft.com/IE/feedback/details/1449224/ie-11-the-descendants-of-an-invisible-visibility-hidden-element-should-be-visible-if-they-had-visibility-visible

Example

Keep reading →(このリンクを置換します)
Keep reading →(元のままのリンクです)


新着記事

コメントは受け付けていません。