分かりづらいサイトタイトルになってしまったが、ご紹介するのは下の画像のように任意の文字にスタイルを適用する方法だ。
そんなの「スタイルを適用したい文字をマークアップすればいい」と思われるかもしれない。
確かにサイトタイトル以外の箇所であれば
<h1 class=”site-title”>EZ-<span>SPARROW</span></h1>
のようにマークアップすれば確かに解決する。
しかし、サイトタイトルやキャッチフレーズに限って言えば、項目内にhtmlを使用することはできない。
また、サイトタイトルが関係してくるRSSやメタタグ等設定変更も若干手間である。
もちろん、画像で作成してしまう事も可能だが、
サイト構造上、テキストで表示させたいという場合は、一工夫必要になってくる。
方法としては、
- jqueryで文字数をカウントし、特定の文字数で<span>タグを挿入する
- jqueryで特定の文字を置き換える
といった方法が挙げられるが、二番目の特定の文字列で置き換えるのが手っ取り早いだろう。
jqueryで特定の文字を置き換える
下記のコードで.site-titleでマークアップされた要素内のSPARROWを<span>タグでくくる事ができる。
<script src="./jquery.min.js"></script>
<script>
$(function(){
//.site-title 要素内の特定の文字列を置換
$('.sitetitle').each(function(){
var txt = $(this).html();
$(this).html(txt.replace(/SPARROW/g,'SPARROW'));
});
});
</script>
WordPressでjqueryが動かないとき
ちなみにwordpressないで$(function)は利用できない場合が多い。その場合は下記のようなコードを追加しすれば動く場合がある。
<script type="text/javascript">
jQuery(function($){
// ここから＄が使用可能
ここにスクリプトをペースト
// ここまで
});
</script>