あくまでも「初心者」のWeb奮闘日記です
始めた人に役に立つにゃん
前から気になってた光るボタン…
タダー！
ついにできました！
目次
Advertisement
参考したボタンサンプルはこちらのサイトから
ありがとうございます
【LPで効果抜群】キラリと光るボタンアニメーション10選【CSS】
初心者にもできるありがたいブログ！
Advertisement
【体験談】初心者がなぜつまづくか
初心者は、初めてなので全体が分かりません。
全体が分からないから、だいたい失敗します。しかし、失敗するのは、進んでる証拠でもあります。
失敗しながら、その都度の軌道修正が必ず必要になります。
全体をつかんでから始めようと思ったら、「何もしないまま」１０年でも経過してしまうのがオチです。
それでは、初心者はどうすればいいの？
とりあえず、やりたいという気持ちの大きなエネルギーで始めてしまうおう！そして、「先人の声を素直に聞くこと」「誰でもできる再現性を見つけること」、つまり何が引っかかってるのかを丁寧に解決していくことです！
光るボタンを作る過程
基本のボタンを作れるようになる
開発者による開発者向けのリソースのサイトを利用して、HTMLとCSSでボタンを作れるようになりました。
そこから色々なボタンをカスタムしていきました。ワードプレスやテーマにもボタンはあるんですけど、お気に入りのボタンをカスタムできる技術を手に入れられたことは大きいです。
キラキラ光るボタンを作りたい
よく見かける光沢のボタン…欲しい…
興味があって、早速作って見ることにしました。
問題：いつものように追加CSSにCSSコードを入れても、動かない…
しかし、さまざまなボタンのコードを見つけて、CSSの部分を「追加CSS」に入れても動きません
初心者には、構造も全体像も見えないので、小さな違いに気がつきません。
CSSのコードを書いてるような上級者が間違うはずがありません。どこかに小さな違いがあるはず…
全体が見えない初心者は、トライ&エラーを通じて、小さな違いを見つける必要があります。
解決の糸口
↓ こちらのサイトを見ていたら、CSSを入れている場所が他にもあることがわかりました。
WordPress:CSSだけでキラリと光るボタンを設置する方法
外観＞テーマエディターのページのスタイルシート(syle.css)に入れるようです。
これを参考にして私のワードプレスとテーマで「当てはまりそうな部分」へ入れてみました。
外観＞テーマファイルエディター
Stylesheetに入れてみました
結果は何も動きがありませんでした。
Style-user.cssに入れてみました。
こちらで、結果が出ました！！
分析 ：初心者には初心者のやり方がある
上級者を参考にして、わからなくても、とにかく手を動かして、「トライ・エラー」を繰り返して、小さな違いに気がついていくことが大事です。
*同じ初心者のお役に立てたら嬉しいです。
初心者にありがたいサーバーはこちら。
ブログがおかしくなっても復元が簡単にできる♪
とても助かりました。