Skip to content

Instantly share code, notes, and snippets.

Avatar
😎
ブログ書いてます

noriposo norilog4

😎
ブログ書いてます
View GitHub Profile
@norilog4
norilog4 / sango-kanren-sample.css
Last active Jan 10, 2021
SANGO関連記事ショートコードのCSSデザイン
View sango-kanren-sample.css
/*--------------------------------------
SANGO関連記事ショートコードのデザインカスタマイズ
--------------------------------------*/
.entry-content a.linkto.table{
margin:2em 0;
border:solid 1px #555; /* 線の太さ・色 */
background:none;
transition: .3s;
}
.entry-content a.linkto.table img{
@norilog4
norilog4 / btn-sample.css
Created Dec 17, 2020
クリックされやすいCSSボタンのデザイン css
View btn-sample.css
/*--------------------------------------
コンバージョンアップボタン 吹き出し赤色(中央寄せ)
--------------------------------------*/
.button2,
a.button2,
button.button2 {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
@norilog4
norilog4 / btn-sample.html
Created Dec 17, 2020
クリックされやすいCSSボタンのデザイン html
View btn-sample.html
<div class="button2-c-wrap">
<a href="" class="button2 button2-c"><span>ノウハウ資料を見たい方はコチラ!</span><br><i class="far fa-file-alt"></i>資料請求をする(無料)</a>
</div>
<div class="button1-wrap">
<a href="" class="button1 button1-c"><span>Adobe XDのサンプルファイルはこちら</span><br><i class="fas fa-file-download"></i> テンプレートをダウンロードする(無料)</a>
</div>
<div class="button3-wrap">
<a href="" class="button3 button3-c"><span>お気軽にお問い合わせください!</span><br>お問い合わせする <i class="far fa-envelope"></i></a>
@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 / contact-form.html
Last active Jan 10, 2021
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 / 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 / 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 / shiny-button.html
Created Mar 9, 2020
光るボタンの動作テスト用
View shiny-button.html
赤色のボタン
[redshiny]<a href="" target="_blank" rel="noopener noreferrer"> ここにテキストを入力</a>[/redshiny]
黄色のボタン
[yellowshiny]<a href="" target="_blank" rel="noopener noreferrer"> ここにテキストを入力</a>[/yellowshiny]
青色のボタン
[blueshiny]<a href="" target="_blank" rel="noopener noreferrer"> ここにテキストを入力</a>[/blueshiny]
緑色のボタン
[greenshiny]<a href="" target="_blank" rel="noopener noreferrer"> ここにテキストを入力</a>[/greenshiny]
@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');
@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');