皆さんが気になっているであろうカスタムの一つがコレでしょう。
気になるでしょ？ 気になってたでしょ？
･･･気にしろ！ コラー！
ヽ（＃ﾟДﾟ）ﾉ┌┛ｶﾞｯ（ﾉ`Д´）ﾉ
リンクが動くのもさることながら、タイトルが影文字です。
ワタシの知る限り、ナチュラムブログでこの加工は見たことが無いですし。
まぁ いわゆるアレです。 マスヲ｡オリジナルなのですけど。
ちょっとこの辺、順を追って解説してみますね。
①動くリンクについて
手順１ johnさんのやり方そのままです。詳しくは
ご本人に訊いてきてくださいｗ
コレをスタイルシートの最後に書き加えます。 文字の色（color）は
ココで探してきてくださいね。
こうすることで、リンク箇所にカーソルを乗せると、リンク自体が動くようになります。
「position」という配置方法で、relative（相対配置）するという指令です。
リンク（a）の上にマウスが乗った時（:hover）、右下に（topとleft）1pxずつ動かしています。
具体的にどの程度動くのかは、当ブログのそこらじゅうで確認してきてください。
できればお手元にクレジットカードとか持っていると、更に理解が深まると思いますよー。
②影文字タイトルについて
①で説明した「動くリンク」を応用しています。
正直いって、見た目よりもかなりアナログ作業です。そしてなにより面倒です。
面倒くさがりな方には、チカラ一杯オススメしません。
この加工は、TOP画像（タイトル画像）の差し替え作業が必須になります。
タイトル文字の加工なのですが、実は
背景画像のほうを加工しています。
ですので基本的に、TOP画像の交換はできるという態で説明させていただきますね。
とはいえ、まぁ 一応・・・ 軽く説明しちゃいますかー
･･･イイヒトすぎるな自分ｗｗｗ
用意する画像のサイズは テンプレートのカスタマイズから入ってスタイルシートから読み取れます。
この青ラインの数値が画像の入るべき枠の横幅。
ちょっと下に移動して。 赤ラインは画像のファイル名。青ラインが枠の高さ。
ここから読み取るべきは、画像の入るスペースの寸法です。
スペースにピッタリの画像を用意するのが普通なので、是非とも「横975px、縦500pxの画像」を用意しましょうね。
勿論、この数値はこのテンプレートにおける寸法ですので、それぞれのテンプレートによって違いますからね。
手順２ ってことで
「横975px、縦500pxの画像」をご用意させていただきました。
「大きなサイズの画像の撮り方」「画像のサイズ変更のやり方」なんかはブログカスタマイズと違う範疇ですので、ここでは割愛します。
手順３ コレを普通の手順でアップロードします。
リサイズしないように！ オリジナルサイズ（975×500）で投稿してくださいね。
手順４ 画像一覧に載りました。 そして赤枠で示した画像をクリックする。
手順５ コレコレ このアドレスをコピーして
手順６ このカッコ内を書き換えます。
コレで基本的にTOP画像の交換は完了です。 ふう。
あ いや！ 本題はココからなの！
手順７ 前述した動くリンク用のタグの数値を「３px」に書き換えます。
前述した
①を全て理解されていれば、この数値を書き換えたということの意味、わかりますよね？
「position」という配置方法で、relative（相対配置）するという指令です。
リンク（a）の上にマウスが乗った時（:hover）、右下に3pxずつ動かしています。
というふうに替えました。 さらに。
手順８ 赤ライン部の色を「＃000000」に置き換えます。
リンク（a）の上にマウスが乗った時（:hover）、文字を黒くします。 となります。
手順9
さぁ この状態でこのテンプレートを「登録」し、
「このテンプレートを使う」で
使用テンプレートを切り替えてみましょう。
そしてブログを
ネット上で確認してみましょう。
これで、
新しいTOP画に切り替わり、
タイトルにカーソルが乗った時だけ文字が右下に３pxずれて、黒くなる ようになりました♪
↑便宜上、カーソルが映ってませんがね、カーソルを乗せるとこういう状態ですよ。
おめでとうございます。これで背景となる画像は完成しました。
ここからは更に、見事なるチカラ技ですよー。
手順10 ネット上のブログ画面でカーソルをタイトルに乗せた状態で
プリントスクリーンしてください。
あ もちろん TOP画を全部網羅するようにね。
それを画像加工ソフト等に貼りつけ
横975px 縦500pxでキッチリ切り抜いてください。
ワタシはフリーソフトの
JTrimを愛用してます。 ま、この程度なら必要充分ですねー。
切り抜いたら、別の名前を付けて、しっかり保存しといてくださいね。
ここまでクリアできれば、完成したも同然です。 んじゃ ラストスパート！
手順11 切り抜いた画像について、手順３からやり直しのようにすすめていきます。
手順３−２ リサイズしないように注意して、アップロードします。
手順４−２ 画像一覧に載ったら、画像をクリック。
手順５−２ 現れた画像のアドレスをコピーして
手順６−２ カッコ内を書き換えます。
手順12 赤ラインの数値を1pxに戻します。
これで カーソルを載せた時の文字の動きが1pxに戻りました。
お？ なんとなくカラクリがわかってきましたか？ （´∀｀*）ｳﾌﾌ
手順13 赤ラインの色を「＃FFFFFF」に設定します。
これで通常時もカーソルを乗せた時も、文字の色は白です。 あ カーソルを乗せた時に動く量は１pxね。
そうそう 緑ラインの部分は下線の有無を示しますが、邪魔なので「下線無し」に設定しときますよ。
あとは「登録」してオワリです！
じゃ、 これで完成です！ お疲れさまでしたー
こうなっていれば正解っすねー。 なってるでしょ？
タイトル字のカスタムでありながら、基本的には背景画像をイジるという意味、お解りいただけましたでしょうかー？
要点としましてはね。
・文字の影の部分は、元の文字から右下に３pxズレる位置に設定し、背景画像に貼りつける。
・元の文字は、カーソルを乗せた時だけ右下に１pxだけ動くように設定する。
おやおや 文字で表すと随分と簡単ですことｗ これだけで済めば話は至極簡単なのだけどねぇ･･･
ワタシはPC関連は素人ですし、この方法も手探りで到達した方法です。もっとイイやり方があるのかもしれません。
もともとPCが苦手な素人が、素人なりに苦労して到達したので、
すっきりとした解説ができないぶん、上級者には手間のかかる説明をしているのだと思います。
その代わり、手探りのヒトの気持ちがわかるぶんだけ、そのチカラにはなれるのではないかな、と。
この記事を書くのもかなり時間がかかっていますし、別に教える義理もないのだけれど
誰かのお役に立てたのなら、その苦労も報われるかな、と思っています。
理解できているかどうか、それはちょっと自信ありませんけどねーｗｗｗ
この記事自体はリンクフリーですが、お役に立てたならいつでもコメントやトラックバックを頂けると嬉しいです。
「できたよー」と一言いただければ、近日動作チェックに伺いますのでねー。
また「ココがちょっとわからなかった」という声もお待ちしてます。わかりやすく解説し直しできるかもしれませんので。
最後になりましたが、このカスタムは
johnさんの記事からインスパイアされたものであります。
篤く御礼を申し上げます。 お礼にjohnさんのブログリンクからなにか買ってあげてください。 皆さんが（σﾟ∀ﾟ）σ