サイトやWordPressでポップアップを作る(X171)

★ターゲット:サイトでプログラミングしたい人♥

やあ! 私は虚空ウサ♥
ITで生計を立てたいチミ達のためにがんばるよ♥

プログラミングって今とっても需要あるよね~

でも複雑なコードだけ学ぼうとしてもイマイチ頭に入ってこないと思う。 プログラミングってサイト作ったりアプリ作ったりと実践ありきだと思うんだ。

というワケでこの回では、サイトを自分で作り、サイトにプログラミング要素を取り入れちゃおう★という回だっ! ついてキテネ♥

そうだな~、では今回は初心者向けに、サイトで何かボタン押したらポップアップウィンドウが出るように仕掛けを作ることをテーマにしちゃおう!

(1)ボタン作ってポップアップウィンドウ出そう!

サイトにはボタンを設置できるんだ。 ボタン+ポップアップウィンドウ相性がいいよ。 例えば〇×クイズなら、〇のボタンと×のボタンを作れば、それを押してなんらかの回答を出すことができるからねっ! 回答はポップアップウィンドウ(画面真ん中とかに出てくるヤツ)で表示させるボタンの設置方法はHTMLの知識になるんだけど、コードはね…

<button type=”submit”onClick=”alert(‘〇〇’);” >(ボタンの中の文字や画像)</button>

だね。 意外と簡単やろ?? 〇〇にはポップアップウィンドウで表示させる文言を決められるよ! (ボタンの中の文章や画像)っていうのは、ボタンの中に表示させる文字や画像を指定するんだ。

あ、WordPressだとデフォルトではJavaScript実装されてないのか、プラグインの導入が必要みたいだね汗




(2)WordPressでポップアップウィンドウ出すには?

かくいうこのブログはWordPressで書いてるんだけど、WordPressは初心者には使いやすくていいけど、慣れてくると自由度は低いことに気づく(‘◇’)ゞ コードの融通利かんし! JavaScriptも最初は使えないみたいで、ポップアップウィンドウとか出すにはプラグインをインストールするなどの方法があるみたいだね☆

調べたら「Popup Maker」というソフトがいいみたいだ☆インストールは左上の三本線→プラグイン→新規追加→プラグインの検索からできるよっ!

●ポップアップの作成

まずはポップアップウィンドウを作る作業からだね。まず編集画面がほとんど英語なので、分かりやすくするためマウス右クリックで日本語に翻訳しておこう。

やり方はWordPressトップ画面の左上の横三本線→「ポップアップを作成する」→「ポップアップ名、ポップアップタイトル、本文」を記述→画面下の「トリガー」→「新しいトリガーを追加」→「追加」→「追加」→「公開」でできるよ!

ポップアップ名というのは、他と区別するためのデータ名で、ポップアップタイトルは、ポップアップ画面の左上に表示される大文字だね。本文にはポップアップで表示させたい文字や画像、動画などを自由に記述できるよっ!

トリガーっていうのは、ポップアップが起動する条件のことだよ。これは2通りあって、何か文字や画像をクリックしたらポップアップが出るのか、一定時間経過したら自動でポップアップが出るのか指定できるんだ。デフォルトでは「クリック型」になってるよっ☆まあ、これが一番無難だからね(^^)

ポップアップが作成できたら、いよいよブログに導入する番だ。まず、作成したポップアップのコードをコピーしなければならない。やり方は左上の横三本線→「すべてのポップアップ」→使用したいポップアップタイトルの右横に表示された「popmake-〇〇〇〇」という文字をコピーしよう。そしてブログの編集画面を開き、ポップアップの起動条件にしたい文字や画像の部分を下記コードで囲もう。

<span class=”popmake-〇〇〇〇”>(対象の文字や画像)</span>

今日のテーマは理解できたね!??

『【Amazon Kindle版】いちばんやさしいWordPressの教本』:石川栄和ほか

WordPressは使いやすいけど、プラグインとかが英語で解説されていたり、分かりづらい点もあるので、本を読んでしっかり学んだほうがよいかもしれませんっ!著者はWordPressのテーマやプラグインの開発をてがける会社の社長さんなので安心ですっ!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です