html
<a href="#" class="btn bgleft"><span>7-1-1 背景が流れる（左から右）</span></a>css
/*== ボタン共通設定 */
.btn {
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
overflow: hidden;
/* ボーダーの形状 */
text-decoration: none;
display: inline-block;
border: 1px solid #555;
/* ボーダーの色と太さ */
padding: 10px 30px;
text-align: center;
outline: none;
/*アニメーションの指定*/
transition: ease .2s;
}
/*ボタン内spanの形状*/
.btn span {
position: relative;
z-index: 3; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
color: #333;
}
.btn:hover span {
color: #fff;
}
/*== 背景が流れる（左から右） */
.bgleft:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
/*色や形状*/
background: #333;/*背景色*/
width: 100%;
height: 100%;
/*アニメーション*/
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
transform-origin: left top; /*右から左の場合はleftにする*/
}
/*hoverした際の形状*/
.bgleft:hover:before {
transform-origin: left top;
transform: scale(1, 1);
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
padding: 100px 0;
text-align: center;
}
p {
margin: 0 0 10px 0;
}
html
<button class="btn cap" data-tippy-content="<div class='inner-cap'>
<p>続きは会員登録をしたら読むことができます。</p>
<p>ツールチップにはHTMLも使えます。</p></div>">
ボタン
</button>
CSS
/*========= レイアウトのためのCSS ===============*/
.btn {
display:block;
outline: none;
background:#333;
color: #fff;
border-radius: 10px;
padding: 10px 50px;
margin: 0 auto;
}
.btn:hover {
background: #056AA9;
}
span {
background: linear-gradient(transparent 60%, #ffff66 60%);
cursor: pointer;
}
a {
color:#333;
}
a:hover {
text-decoration: none;
}
JS
tippy('.cap', {
//指定した要素にツールチップが出現
placement: 'top-start',
//ツールチップの表示位置⇒top、top-start、top-end、right、right-start、right-end、bottom、bottom-start、bottom-end、left、left-start、left-end。指定をしなくてもtopに表示
animation: 'shift-toward-subtle',
//ツールチップ出現の動き。動きを指定するにはhttps://unpkg.com/browse/tippy.js@5.0.3/animations/から任意の動きを選び<head>内に読み込むことが必要。使用できる動き⇒shift-away、shift-away-subtle、shift-away-extreme、shift-toward、shift-toward-subtle、shift-toward-extreme、scale、scale-subtle、scale-extreme、perspective、perspective-subtle、perspective-extreme。指定をしなくてもfadeで表示
theme: 'light-border',
//ツールチップのテーマの色。色を指定するにはhttps://unpkg.com/browse/tippy.js@5.0.3/themes/からテーマを選び<head>内に読み込んで指定する。テーマの種類⇒light、light-border、material、translucent。指定をしなくても黒色で表示
duration: 200,
//ツールチップの出現の速さをミリ秒単位で指定
}
)
html
<ul id="page-link">
<li><a href="#area-1">Area1</a></li>
<li><a href="#area-2">Area2</a></li>
<li><a href="#area-3">Area3</a></li>
</ul>
<h1 class="area" id="area-1">テキスト</h1>
<h1 class="area" id="area-2">テキスト</h1>
<h1 class="area" id="area-3">テキスト</h1>
JS
$('#page-link a[href*="#"]').click(function () {
var elmHash = $(this).attr('href');
// ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得.
var pos = $(elmHash).offset().top;
// idの上部の距離を取得.
$('body,html').animate({scrollTop: pos}, 500);
//取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール.
return false;
});html
<div class="openbtn1"><span></span><span></span><span></span></div>
CSS
/*==================================================
5-2-1 3本線が×に
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn1 {
position: relative;/*ボタン内側の基点となるためrelativeを指定*/
background:#57a2c7;
cursor: pointer;
width: 50px;
height:50px;
border-radius: 5px;
}
/*ボタン内側*/
.openbtn1 span {
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 45%;
}
.openbtn1 span:nth-of-type(1) {
top:15px;
}
.openbtn1 span:nth-of-type(2) {
top:23px;
}
.openbtn1 span:nth-of-type(3) {
top:31px;
}
/*activeクラスが付与されると線が回転して×に*/
.openbtn1.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
/*真ん中の線は透過*/
.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn1.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
/*========= レイアウトのためのCSS ===============*/
body {
background:#f3f3f3;
padding:20px;
}
a {
color: #333;
text-decoration: none;
}
.lead {
margin:20px 0 0 0;
}
.btn-block {
width:200px;
padding: 30px;
}
JS
$(".openbtn1").click(function () {
$(this).toggleClass('active');
});
<?php the_excerpt(); ?>下記はfunctionに記載する。
「続きを読む」のパーマリンクを設定する
function tuzuki_excerpt_more( $post ) {
return '...'
. '<br>'
. '<i class="fa fa-caret-right" aria-hidden="true"></i>'
. '<a href="' . get_permalink( $post->ID ) . '">'
. '続きを読む'
. '</a>';
}
add_filter( 'excerpt_more', 'tuzuki_excerpt_more' );
<?php the_excerpt(); ?>で文字数を決める
function kazu_excerpt_length( $length ) {
return 100;
}
add_filter( 'excerpt_length', 'kazu_excerpt_length' );
文字数制限をしたい本文のテンプレートタグの代わりに下記のコードを記述。
<?php
if(mb_strlen($post->post_content, 'UTF-8')>120){
$content= mb_substr(strip_tags($post->post_content), 0, 120, 'UTF-8');
echo $content.'……';
} else {
echo strip_tags(->post_content);
}
?>
本文がHTMLタグも含め120文字より多い場合は、HTMLタグを削除した120文字を表示し、最後に「……」を付ける。
本文がHTMLタグも含め120文字以下の場合は、HTMLタグを外して全文表示。
文字数制限をしたい本文のテンプレートタグの代わりに下記のコードを記述。
<?php
if(mb_strlen($post->post_content, 'UTF-8')>120){
$content= mb_substr(strip_tags(apply_filters('the_content', $post->post_content), '<br><p><span>'), 0,120, 'UTF-8');
echo $content.'……';
} else {
echo strip_tags(apply_filters('the_content', $post->post_content),'<br><p><span>');
}
?>
本文がHTMLタグも含め120文字より多い場合は、
タグとタグとタグを残しそれ以外のHTMLタグを削除した120文字を表示し、最後に「……」を付ける。
本文がHTMLタグも含め120文字以下の場合は、
タグとタグとタグを残しそれ以外のHTMLタグを削除し全文を表示。
※補足：上記の「コードの例。」の3行目と6行目、
「strip_tags」の第1引数で渡す文字列を「$post->post_content」にしてしまうと、HTMLタグが全部無くなってしまう(というか、「$post->post_content」はWordpressが自動で加工・変換する前の生のデータ)ので、「$post->post_content」の代わりに「apply_filters(‘the_content’, $post->post_content)」を記述。
引用元：https://www.oikawa-sekkei.com/web/design/wordpress/wp-strip_tags.html