穴倉日記。‐No 自作 No Life‐

お盆なのに今一つ天気も良くないし、出撃もできずダラダラとネット徘徊しては
無駄にポチッとしてしまって、ウヒョヒョと喜ぶ間もなく
もっと安い店をみつけちゃって
怒りの遣り場もなく悶々としている、哀れな皆さまコンニチハ。


「ボンヤスミ」　という漢字を知らない自分にちょっと引いている、
なにを隠そうマスヲ｡です　（*´∀｀）ﾉ


暇を持て余してPCに向かっているならこの際、ブログデザインを少しイジってみませんか？
「維持っているので結構です」というアナタ、ブラウザの「戻る」からお戻りください　（σﾟ∀ﾟ）σ

皆さんが気になっているであろうカスタムの一つがコレでしょう。

気になるでしょ？　　気になってたでしょ？　　　　







･･･気にしろ！　コラー！　

ヽ（＃ﾟДﾟ）ﾉ┌┛ｶﾞｯ（ﾉ`Д´）ﾉ

　　　


リンクが動くのもさることながら、タイトルが影文字です。
ワタシの知る限り、ナチュラムブログでこの加工は見たことが無いですし。
まぁ　いわゆるアレです。　　マスヲ｡オリジナルなのですけど。

ちょっとこの辺、順を追って解説してみますね。








①動くリンクについて


手順１　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さんのブログリンクからなにか買ってあげてください。　　皆さんが（σﾟ∀ﾟ）σ