Skip to content

Instantly share code, notes, and snippets.

Avatar
😎
ブログ書いてます

noriposo norilog4

😎
ブログ書いてます
View GitHub Profile
@norilog4
norilog4 / contact-form.html
Last active Mar 22, 2020
Contact Form 7 お問い合わせフォームのデザイン
View contact-form.html
<table class="inquiry">
<tr>
<th>
<span class="haveto">必須</span><span>お名前</span>
</th>
<td>
[text* your-name class:textsp placeholder"鈴木 花子"]
</td>
</tr>
<tr>
@norilog4
norilog4 / contact-form.css
Created Mar 22, 2020
Contact form 7 シンプルデザイン CSS
View contact-form.css
/************************************
** お問い合わせフォームの入力
************************************/
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
@norilog4
norilog4 / style.css
Created Mar 14, 2020
動く蛍光ペン風マーカーの実装CSS
View style.css
.marker-animation.active{
background-position: -100% .5em;
}
.marker-animation {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-repeat: repeat-x;
@norilog4
norilog4 / marker.js
Created Mar 14, 2020
動く蛍光ペン風マーカーのスクリプト
View marker.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){ // マーカーの動きをつける
$(".marker-animation").each(function(){
var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
var scroll = $(window).scrollTop(); //スクロールの位置を取得
var windowHeight = $(window).height(); //ウインドウの高さを取得
if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
$(this).addClass('active'); //クラス「active」を与える
}
@norilog4
norilog4 / shiny-button.html
Created Mar 9, 2020
光るボタンのソースコード
View shiny-button.html
赤色のボタン
[redshiny]<a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-download"></i> ヘッダー画像テンプレートダウンロード</a>[/redshiny]
黄色のボタン
[yellowshiny]<a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-cart-arrow-down"></i> 商品をカートへ追加</a>[/yellowshiny]
青色のボタン
[blueshiny]<a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-messenger"></i> メッセンジャーでメッセージを送る</a>[/blueshiny]
緑色のボタン
[greenshiny]<a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-tree"></i> 植樹を行う(緑の募金サイト)</a>[/greenshiny]
@norilog4
norilog4 / shiny-button.css
Created Mar 9, 2020
光るボタン4色のデザインCSSコード(赤色・黄色・青色・緑色)
View shiny-button.css
/************************************
** 光る赤いボタン
************************************/
.red-shiny a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
font-weight: bold ;
@norilog4
norilog4 / functions.php
Created Mar 9, 2020
赤色ボタンのショートコードを追加
View functions.php
/*赤い光るボタンをショートコード化*/
function ShinyBtn( $atts, $content = null ) {
return '<div class="red-shiny">' . $content . '</div>';
}
add_shortcode('redshiny', 'ShinyBtn');
@norilog4
norilog4 / functions.php
Created Mar 9, 2020
黄色ボタンのショートコードを追加
View functions.php
/*黄色い光るボタンをショートコード化*/
function shinyyellow( $atts, $content = null ) {
return '<div class="yellow-shiny">' . $content . '</div>';
}
add_shortcode('yellowshiny', 'shinyyellow');
@norilog4
norilog4 / functions.php
Created Mar 9, 2020
青色ボタンのショートコードを追加
View functions.php
/*青い光るボタンをショートコード化*/
function shinyblue( $atts, $content = null ) {
return '<div class="blue-shiny">' . $content . '</div>';
}
add_shortcode('blueshiny', 'shinyblue');
@norilog4
norilog4 / functions.php
Created Mar 9, 2020
緑色ボタンのショートコードを追加
View functions.php
/*緑の光るボタンをショートコード化*/
function shinygreen( $atts, $content = null ) {
return '<div class="green-shiny">' . $content . '</div>';
}
add_shortcode('greenshiny', 'shinygreen');
You can’t perform that action at this time.