Skip to content

Instantly share code, notes, and snippets.

View norilog4's full-sized avatar
😎
ブログ書いてます

noriposo norilog4

😎
ブログ書いてます
View GitHub Profile
@norilog4
norilog4 / sango-kanren-sample.css
Last active January 10, 2021 01:05
SANGO関連記事ショートコードの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 December 17, 2020 14:25
クリックされやすいCSSボタンのデザイン 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 December 17, 2020 14:17
クリックされやすいCSSボタンのデザイン 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 March 22, 2020 17:55
Contact form 7 シンプルデザイン 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 January 10, 2021 01:08
Contact Form 7 お問い合わせフォームのデザイン
<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 March 14, 2020 19:19
動く蛍光ペン風マーカーのスクリプト
<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 March 14, 2020 19:11
動く蛍光ペン風マーカーの実装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 March 9, 2020 09:08
光るボタンの動作テスト用
赤色のボタン
[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 March 9, 2020 09:00
緑色ボタンのショートコードを追加
/*緑の光るボタンをショートコード化*/
function shinygreen( $atts, $content = null ) {
return '<div class="green-shiny">' . $content . '</div>';
}
add_shortcode('greenshiny', 'shinygreen');
@norilog4
norilog4 / functions.php
Created March 9, 2020 08:59
青色ボタンのショートコードを追加
/*青い光るボタンをショートコード化*/
function shinyblue( $atts, $content = null ) {
return '<div class="blue-shiny">' . $content . '</div>';
}
add_shortcode('blueshiny', 'shinyblue');