【簡単】WordPress子テーマの導入方法&何なのか?を解説
『WordPressテーマをカスタマイズしようと思い調べたところ【テーマを直接編集するのはNG!子テーマを導入しましょう】という情報を目にしたが、やり方が分からないので教えて欲しい。そもそも子テーマが何なのか?もイマイチ理解できてないので分かりやすい解説を見たい。』
上記のような悩みを解決する記事を用意しました。
WordPressにスクロールアニメーションを実装する3つの方法
アニメーションでグリグリ動かせ!
※2018年5月投稿、2020年6月最終更新。
ランディングページからブログまで様々なシーンで活用され続けている、基本Webギミック「スクロールアニメーション」。
強調したい要素へ目を引くことができる・読み進めることを促進できるといったメリットがあり、また単純にカッコいいことから、導入してみたい方もいるでしょう。
今回はWordPressサイトに、スクロールアニメーションを実装する方法を3つ紹介します。
【jQueryの基本のキ】CSSメソッドで複数プロパティを指定するコード
ど忘れしがちな「.CSS();」の複数指定構文
CSSのセレクタと値を設定できるjQueryのCSSメソッド。
どこかをクリックしたら、ちょっとしたスタイルをあてたりする際などに、とても便利です。
ただ、このCSSメソッドにおいて、複数プロパティを指定する際の構文をど忘れすることがあります。
今回は、コピペOK!な形でCSSメソッドの複数指定コードを紹介します。
【CSS】親要素に依存せずブラウザ幅100%にする指定とは?
親要素を無視して画面幅100%指定できる?
要素の横幅を指定するCSSプロパティ「width」。
あるHTML要素にこのwidthを指定した場合、HTML上の親要素から影響を受けたり、影響を与えたりします。
ただ、例えば画面いっぱいの背景画像を一部エリアにのみ表現したい場合など、親要素を無視して横幅を指定したいケースもあるでしょう。
今回は、widthプロパティの値として使用する、親要素を無視して画面幅100%を指定できる単位を紹介します。
【コピペコード有り】後から追加した要素にイベント発生させる方法
クリックしても動かない!どうする??
appendイベントやbeforeイベントで、後から追加されるHTML要素。
jQueryのプラグインなどに良くある形態です。
そして上記の追加要素にクリックイベントを設定したいケースってあると思います。
で、「よし、ググったところonメソッドなら大丈夫なんだな」と思って、「$(’selector’).on(’click’, function() 〜」と記載。
しかし、該当要素をクリックしても何も反応しない!
一体、何がいけないのでしょうか?
子テーマって何?【WordPressカスタマイズ基本編】
今さら聞けない!子テーマについて。
WordPressでサイト・ブログを作成するとき、既に制作済みのテーマを使用することが多いと思います。
さらに一般的には、そのテーマを目的に合ったデザインなどにカスタマイズして使用することになるでしょう。
その際に便利なのが、子テーマと呼ばれる仕組みを活用することです。
今回は「子テーマとは何か?」および、その作成手順について解説します。
Facebookライクボックスの横幅をスマホサイズ100%に!
LikeBoxはみ出してませんか?
フェイスブックページを運営されている方なら、通常WEBサイトにライクボックスを設置されていると思います。
ただ、サイトをいわゆるレスポンシブデザインにされた場合、ブラウザ幅を狭く(=スマホなどで表示)した際に、ライクボックスが横にはみ出してしまうことが多々あります。
これは、LikeBoxを構成しているパーツの横幅が、px指定で固定されているせいです。
そんな場合、スマホ表示用のCSSに、次のソースを追記してみていただければと思います。
表現が広がる!疑似要素・疑似クラス一覧【CSS1&2編】
この基本、見落としてない?!
CSSシリーズ第三回は、疑似要素と疑似クラス。
といっても、CSS3で追加された疑似クラスがけっこう多いため今回はレベル1と2のみ、すなわち疑似要素&疑似クラスの基本を網羅したいと思います。
合い言葉は「疑似要素と疑似クラスで表現の幅を広げよう!」