2023-05-11

Googleフォームに自作のCSSをあてカスタマイズする

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。

しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。

Googleフォームを作成する

www.google.com

HTMLで同じ項目のフォームを作成する

Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する

name属性は階層の深い所にあるので「entry.」で検索し、name属性の値を取得しましょう。この時name属性が「name="entry.00001234_sentinel"」のようになっている項目は「entry.00001234」の部分だけ取ってきます。

「input type="hiddin"」を使ってgoogleにデータを送信する

<!-- まとめて値をgoogle formに送る -->
<input type="hidden" name="" value="<?php echo $name ?>">
<input type="hidden" name="" value="<?php echo $email ?>">
<input type="hidden" name="" value="<?php echo $gender ?>">
<input type="hidden" name="" value="<?php echo $message ?>">

以上で動かすことは可能ですが、Googleフォームは「送信ボタン」を押すとGoogleフォームのサンクスページに飛んでしまう為、自作のサンクスページにリンク先を変更させます。

サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへajaxでページ遷移させましょう。

$(function(){
$('#g-form').submit(function (event) {
var formData = $('#g-form').serialize();
$.ajax({
  url: "google FormのURL",
  data: formData,
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function(){
      window.location.href = "thanks.html";
      },
    200: function(){
     //失敗したときの処理
      }
    }
  });
//googleformへのページ遷移をキャンセル
event.preventDefault();
});
});

※formタグに#g-formを付ける

これでCSSだけでGoogleフォームが自由にカスタマイズ出来るようになります。スニペットなどを使ってリッチなフォームを作ってみましょう。

copypet.jp

エラーチェック

万が一、確認画面からアクセスしてしまった際にそのままではpostで値が送られていない為エラーになってしまうので、それを回避するために値が空だったら入力画面にリダイレクトさせる処理を行います。

isset関数

issetを使う事で変数がセットされているか確認する事が出来ます。
あたまに「!」を付ける事で逆の意味になるので、以下の記述で「$_POST['name']」に値がセットされていなかったら、という意味になります。

!(isset($_POST['name']))

//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる
if(!(isset($_POST['name']))){
 header('Location:index.html');
 exit;
}

入力画面に戻るボタン

<button type="button" onclick=history.back()>戻る</button>

2023-05-11

世界トップレベルのデザイナーやデザインスタジオのポートフォリオサイト

okcclabs.com

igma.im

www.thedigitalpanda.com

www.marco.fyi

https://www.marco.fyi/

2023-05-08

WordPressテンプレートその2

WordPress

投稿記事に設定したタグを表示

<?php
$posttags1 = get_the_tags();
if ( $posttags1 ) {
  foreach ( $posttags1 as $tag1 ) {
    echo $tag1->name; 
    echo ' '; 

  }
}
?>

投稿記事に設定したタグのスラッグを表示

<?php $posttags = get_the_tags(); if ( $posttags ) { foreach ( $posttags as $tag ) { echo $tag->slug . ' ';} } ?>

投稿記事のアイキャッチ画像機能を有効にする

投稿記事のアイキャッチ画像機能を有効にする場合「functions.php」に以下を記述する

// すべてのアイキャッチ画像の有効化
add_theme_support('post-thumbnails');

カテゴリー毎にアイキャッチ画像を設定する

//	カテゴリーごとのアイキャッチ画像の設定
function default_category_eyecatch() {

global $post;
$user_eyecatch = has_post_thumbnail($post->ID);            
if (!$user_eyecatch)  {
$preset_image = get_children("post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
if ($preset_image) {				  
foreach ($preset_image as $attachment_id => $attachment) {
set_post_thumbnail($post->ID, $attachment);
}
}
else if ( in_category('6') ) {
set_post_thumbnail($post->ID, '27');
}
else if ( in_category('カテゴリーID') ) {
set_post_thumbnail($post->ID, '画像ID');
}
else {
set_post_thumbnail($post->ID, '画像ID');
wp_reset_postdata();
}					   
}                       
}
add_action('the_post', 'default_category_eyecatch');

?>

2023-05-01

:checkedと:notを使ってcssでフィルタリング

CSS応用

cssのセレクタの「隣接セレクタ」「擬似クラス」「擬似要素」などを使用する事で、今までjQuery等を使わないと出来なかった事がcssのみで出来るようになります。

:checked

inputのラジオボタン、チェックボックスの2つのみで使用可能。チェックしたinput要素に「:checked」セレクタが付与される。

:not

notを使う事で指定した要素以外の要素を選択する事が出来る

<div>
<h1>Lorem ipsum dolor sit.</h1>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit.</p>
</div>

css

div :not(p){
color: red;
}

フィルタリングの考え方

フィルタリングをかけたい要素に「data-category」属性を設定（複数可の場合は内容の“一部”が一致する指定がcssで必要）しておく
ラジオボタンのidに各カテゴリー名を設定する
各カテゴリーのラジオボタンがcheckedになったら、対応している「data-category」属性を持った要素以外を非表示にさせる
全てボタンを押したら、全ての要素が表示に

[id="all"]:checked ~ .targets>.target-box{
display: block;
}


[id="カテゴリー名"]:checked ~ .targets>.target-box:not([data-category*="カテゴリー名"]){
display: none;
}

webliker.info

2023-04-28

タイムラインをサイトに埋め込む

ポートフォリオ制作

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。

Vertical Timeline

codyhouse.co

さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。

github.com

<div class="cd-timeline js-cd-timeline">
<div class="container max-width-lg cd-timeline__container">


<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 1</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2019/10</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->




<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->


</div><!-- container -->
</div><!-- cd-timeline -->