
【SVG】WordPressでSVG形式を使う方法
WordPressでSVG形式は初期設定ではサポートされていません。しかしPNGやJPEGにない特性を活かしてはっきり鮮明にロゴなどを配置したい方も多いでしょう。SVGの作り方からメディアライブラリへのアップロードの許可、表示の仕方を書いていきます。 文字のアウトライン化は「書式」-「文字のアウトライン化」を選んでクリック。 「複製を保存」または「別名で保存」をクリック。 形式をSVG形式にして保 […]
Read Moreメンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ
WordPressでSVG形式は初期設定ではサポートされていません。しかしPNGやJPEGにない特性を活かしてはっきり鮮明にロゴなどを配置したい方も多いでしょう。SVGの作り方からメディアライブラリへのアップロードの許可、表示の仕方を書いていきます。 文字のアウトライン化は「書式」-「文字のアウトライン化」を選んでクリック。 「複製を保存」または「別名で保存」をクリック。 形式をSVG形式にして保 […]
Read MorejQueryです。 $(function(){ $.fn.autoKana(‘#name’, ‘#furi_name’, { katakana : true //true:カタカナ、false:ひらがな(デフォルト) }); //フォーカスされたとき $(“#name”).focus(function(){ $(this).css(“background-color”, “#fff”); $(th […]
Read More次にCSSはこちら。 @charset “utf-8”; *{ box-sizing: border-box; } html{ font-size: 1em; } body{ margin: 0; padding: 1.2em; font-family: Helvetica, Arial, sans-serif; color: #212121; } h1{ margin: 0; } p{ marg […]
Read More授業でフォームについて詳しく勉強したので、その改変版を載せます。利用の想定は専門学校の資料請求のフォームです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>フォーム</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>申し込み情報</h1> <form class="h-adr" action=""> <div class="nameForm"> <label class="label" for="name"><span class="shimei">氏名</span><span class="required">必須</span></label> <input type="text" name="name" id="name" required> </div> <div class="furiNameForm"> <label class="label2" for="furi_name"><span class="furi">フリガナ</span><span class="required">必須</span></label> <input type="text" name="furi_name" name="furi_name" id="furi_name" required> </div> <div class="genderForm"> 性別<span class="required">必須</span> <label class="gender"><input type="radio" name="gender" value="0" id="man" required>男</label> <label class="gender"><input type="radio" name="gender" value="1" id="woman" required>女</label> </div> </div> <div class="gradeFrom"> 学年<span class="required">必須</span> <label class="grade"><input type="radio" value="0" name="grade" id="grade1" required>高校1年生</label> <label class="grade"><input type="radio" value="1" name="grade" id="grade2" required>高校2年生</label> <label class="grade"><input type="radio" value="2" name="grade" id="grade3" required>高校3年生</label> </div> <div class="schoolNameForm"> <label class="label3" for="schoolName">学校名<span class="required">必須</span></label> <input type="text" id="schoolName" required> </div> <div class="adr-num"> <span>住所</span><p class="adr-txt">郵便番号を入力すると自動で住所が入力されます</p> <span class="p-country-name" style="display:none;">Japan</span> <label class="adr label4" for="adr-num">〒<span class="required">必須</span></label> <input type="number" class="p-postal-code" size="7" id="adr-num" required> </div> <div class="adr-reg"> <label class="adr label5" for="adr-reg">都道府県<span class="required">必須</span></label> <input type="text" class="p-region" id="adr-reg" required> </div> <div class="adr-loc"> <label class="adr label6" for="adr-loc">市区町村<span class="required">必須</span></label> <input type="text" class="p-locality" id="adr-loc" required> </div> <div class="adr-str"> <label class="adr label7" for="adr-str">番地<span class="required">必須</span></label> <input type="text" class="p-street-address" id="adr-str" required> </div> <div class="adr-other"> <label class="adr label8" for="adr-other">マンション名</label> <input type="text" class="p-extended-address" id="adr-other"> </div> <div class="tel"> <label class="telForm label9" for="tel">電話番号<span class="required">必須</span></label> <input type="number" id="tel" required> </div> <div class="mail"> <label class="mailForm label10" for="mail">メールアドレス<span class="required">必須</span></label> <input type="email" id="mail" required> </div> <label class="attendant">付き添い(ご家族など)<input type="checkbox" name="attendantCheckbox" value="check" id="attendant"></label> <div class="family-wrap"> <label class="family" for="family1"><input type="radio" name="family" id="family1" value="0">1人</label> <label class="family" for="family2"><input type="radio" name="family" id="family2" value="1">2人</label> <label class="family" for="family3"><input type="radio" name="family" id="family3" value="2">3人</label> </div> <label class="contact">お問合せ <textarea name="" id="" cols="30" rows="10"></textarea></label> <label class="info">個人情報の保護に関する事項 <input type="checkbox" id="info"></label> <input type="submit" id="submit" value="申し込む"> <div class="telephone"> <p>お急ぎの方はお電話でも承っております。</p> <h2><a href="tel:0000111222">0000-111-222</a></h2> </div> </form> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="jquery.autoKana.js"></script><!-- ふりがなの自動変換 --> <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script><!-- 郵便番号変換 --> <script src="script.js"></script> </body> </html> |
フリガナと郵便番号は入れると自動入力されるものを使っています。自動入力された部分については入力された時点で背景の色が緑になるようにするなど改善点は多いですが、フォームについてじっくり勉強する機会がありよかったです。 次の記 […]
Read MoreAdobe製品が使えるなら、動画やオーディオの変換にはMediaEncoderがおすすめですが、ogg形式にははじめから対応していないのでプラグインを入れます。 まずプラグインをDLします。 https://github.com/fnordware/AdobeOgg#download ご自分のOSに合わせてDLしてください。 ReadMe.txtの中に・・・ Mac: Ogg Premiere.b […]
Read Morefooter 要素は文書やセクションのフッターを表します。著者情報や関連記事への記述する場合によく利用されます。footer 要素はセクションの最初に置いても問題ありません。 コンテンツモデル フローコンテンツ。ただし子要素にヘッディングコンテンツ、セクショニングコンテンツ、header要素、footer要素、address要素を含むことは不可 使用できる文脈 フローコンテンツが期待される場所
Read Moreこんにちは。ブログをしばらく書けなかったので反省しています。がんばって書いていきます。 header要素は文書やセクションのヘッダーを表します。文書やセクションの冒頭となる見出しや概要、ナビゲーションのリンクなどを記述する場合によく利用されます。 Webサイトでヘッダーは例えば会社の場合会社のロゴ、検索フォーム、メインのナビゲーションメニューなどを含むことが多いです。 コンテンツ パブパブルコンテ […]
Read MoreGoogleアナリティクスがサイトに流入してきた後のユーザーの動向なら、Google Search Console(グーグルサーチコンソール)はサイト流入前の動向にあたります。 実際に検索されたキーワード、どんなワードで検索され何位に表示されているのか、クリックされた回数、クリック率など。SEO的にも知っておきたいことばかりです。アナリティクスを入れたら連携させましょう。 サーチコンソールに登録し […]
Read Moreこんにちは。 今更ですがアナリティクスの設置をちゃんとしたのでそのことについて書きます。 Googleアナリティクスは無料で使える便利なアクセス解析ツールです。どんな経路でサイト訪問者がサイトを訪れたか、サイトの中でどういう動きをして、どれほど滞在してどのページで離脱したか・・・等々、いろいろわかってしまうすごいツールです。 設置方法は以下にまとめました。 Googleアカウントを作成する goo […]
Read More外部ファイルにしたCSSファイルを読み込む方法です。 ファイルへのパスはindex.html(トップページ)があるディレクトリにcssというフォルダがありそこにstyle.cssがある場合は以下になります。 CSSを読み込んでも表示が変わらない場合はブラウザのキャッシュ(表示速度を上げるためにブラウザが保存している情報)を消してみましょう。 簡単ですが今日のブログはここまでにしておきます。 卒業制 […]
Read More