★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

「 フク郎 」一覧

TwitterとWordPressの連携に必要なTwitterアプリの作り方

TwitterとWordPressの連携に必要なTwitterアプリの作り方

WordPressとTwitterを連携して使いたい場合に必要なのがTwitterアプリケーションの作成です。Twitterアプリケーションには連携に必要なAPIキー・シークレットやアクセス権などが含まれWordPressだけでなく外部のサービスとTwitterを連携させたい場合は必ず必要になります。アプリというと作るのが難しそうに聞こえてしまいますが、作成手順はそれほど複雑でなく誰でも作れます。そこでここではTwitterとWordPressの連携に必要なTwitterアプリを作成する手順を解説します。

jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法

jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法

CSS3では要素にアニメーション効果をつけるアニメーションプロパティを使うと要素に対して様々なアニメーション効果をつけられるようになりました。ここではそのアニメーションプロパティとjQueryを使って1つ1つの文字がばらばらに上下に揺れるようなアニメーション効果をつける方法について解説します。

画面をスクロールすると追従してくるボタンをCSSだけで作る方法

画面をスクロールすると追従してくるボタンをCSSだけで作る方法

画面をスクロールするとそれに追従するようなボタンはCSSだけで作ることが可能です。作り方はとても簡単でPCやスマホの表示領域(viewport)に対して位置を固定するようにpositionプロパティと位置を調整するだけです。ここではその作り方とスクリプトと組み合わせて記事トップに戻るボタンを作る方法などを解説します。

jQuery呼び出しの3つのタイミング【インライン、$(document).load、$(window).ready】

jQuery呼び出しの3つのタイミング【インライン、$(document).load、$(window).ready】

jQuery関数を呼び出すタイミングは3つに分けられます。要素の書き換えやCSSの変更、画像の大きさを取得したい場合はただjQuery関数を書くだけでは動かず、適切なタイミングで実行する必要があります。ここではjQueryの呼び出しをするための3つのタイミングとその中でどのような処理を書くべきかについて解説します。

preタグ内のソースコードを画面端で折り返す方法

preタグ内のソースコードを画面端で折り返す方法

ソースコードの表示にはpreタグとcodeタグが使われますが、preタグは文章の内容をそのまま表示する要素なので1行が長いコードだとスクロールバーが表示されてしまいます。そこでpreタグにCSSを適用してソースコードが要素の端まで来た時に自動で改行を入れて折り返す方法について解説します。

WordPressでjavascriptを使って広告をランダム表示する方法

WordPressでjavascriptを使って広告をランダム表示する方法

javascriptを使うと広告をただ表示するだけでなくページを更新するたびに違う種類の広告をランダム表示できます。WordPressで広告をランダム表示するには記事内とサイドバーなどの固定領域で方法が違うのでここではスクリプトで広告切り替えする方法とそれぞれの場所でランダム切り替えする方法をそれぞれ解説します。

要素表示時に回転・拡大・スライドしてアニメ表示する方法とアニメーション例

要素表示時に回転・拡大・スライドしてアニメ表示する方法とアニメーション例

何か動作があった時にただ要素を表示するだけでなく回転や拡大などのアニメーション効果をつけるとユーザーに興味を持ってもらいやすくなります。ここではCSSのtransformプロパティとjQueryのcss関数を使って要素に変形効果をつけ、ユニークなアニメ表示をする方法と実際のアニメ表示の例について紹介します。

個別ページにJavaScriptを埋め込めるWPプラグイン”Scripts n Styles”の紹介

個別ページにJavaScriptを埋め込めるWPプラグイン”Scripts n Styles”の紹介

WordPressでは個別ページにscriptタグを設置してその中にスクリプトを書くと各行にbrタグが挿入されてしまい、スクリプトが実行できません。そこでここでは各ページの編集画面でJavascriptの記述ができる「Scripts n Styles」というプラグインの導入・使い方を解説します。スクリプトだけでなくCSSなども記述できるのでとても役立ちます。