あめぞう

CSS 2019.5.12

Webフォントの表示遅延をなくしたい

@font-faceに、font-display: swap;を書く。

@font-face {
font-family: ‘font’;
src: url(‘font.woff’) format(‘woff’);
font-display: swap;
}

Google Fontsの場合はパラメータを使用できます。

https://fonts.googleapis.com/css?family=Lato&display=swap

WordPress 2019.2.20

WordPressで自動整形を無効にする方法

functions.phpに書き込む

remove_filter( 'the_content', 'wpautop' );

jQuery 2018.6.10

iframeでコンテンツの長さに合わせて高さを自動調整

iframeのコンテンツに合わせてJavaScriptで自動的に高さを調整する方法

jQuery 2018.5.26

スムーススクロールを使いたい

https://sakic.jp/blog/web/smooth-scroll

$(function () {
  // 全てのアンカータグを対象にする
  $('a').click(function (e) {
    var anchor = $(this),
      href = anchor.attr('href'),
      pagename = window.location.href;
    // 現在のurlのハッシュ以降を削除
    pagename = pagename.replace(/#.*/, '');
    // リンク先のurlから現在の表示中のurlを削除
    href = href.replace(pagename, '');
    if (href.search(/^#/) >= 0) {
      // 整形したリンクがページ内リンクの場合はページ内スクロールの対象とする
      // 通常の遷移処理をキャンセル
      e.preventDefault();
      var speed = 500;
      // 前段階で整形したhrefを使用する
      // var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $("html, body").animate({
        scrollTop: position
      }, speed, "swing");
      // ロケーションバーの内容を書き換え
      location.hash = href;
      return false;
    }
  });
});

jQuery 2017.10.30

レスポンシブウェブデザインでイメージマップを使いたい

使い方はとてもかんたんです。

jQuery RWD Image Maps

1. 上のページから、「jquery.rwdImageMaps.min.js」をダウンロードします。
2. コードを貼り付けておしまい。

<script src="js/jquery.rwdImageMaps.min.js"></script>
<script>
  $(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
  });
</script>

CSS 2017.9.26

【CSS】IEでposition: fixed;をやったらガタガタ揺れる場合の対応策

<script>
  if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
    $('body').on("mousewheel", function () {
    event.preventDefault();
    var wd = event.wheelDelta;
    var csp = window.pageYOffset;
    window.scrollTo(0, csp - wd);
    });
  }
</script>

参考: https://social.msdn.microsoft.com/Forums/ie/ja-JP/9567fc32-016e-48e9-86e2-5fe51fd67402/new-bug-in-ie11-scrolling-positionfixed-backgroundimage-elements-jitters-badly?forum=iewebdevelopment

WordPress 2017.4.7

【WordPress】個別記事のテンプレートをカテゴリ別に分けたい

single.phpの内容を下記のように書き換えます。

<?php
if ( in_category('salon') ) {
  include(TEMPLATEPATH . '/single-salon.php');
} else if ( in_category('staff') ) {
  include(TEMPLATEPATH . '/single-staff.php');
} else {
  include(TEMPLATEPATH . '/single-default.php');
}
?>

WordPress 2017.1.28

【WordPress】ポストナビゲーション（次の記事・前の記事）をつけたい

Font Awesome呼び出しタグを貼り付けます
表示箇所にコードを貼り付けます

1. Font Awesomeのリンクを内に貼り付けます

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2. 表示箇所にコードを貼り付けます

<?php previous_post_link('%link','<i class="fa fa-chevron-circle-left"></i> %title'); ?>

<?php next_post_link('%link','%title <i class="fa fa-chevron-circle-right"></i>'); ?>

私はBootstrapを愛用しているので、こんな感じになります。

<div class="row">
	<div class="col-sm-6">
		<p><?php previous_post_link('%link','<i class="fa fa-chevron-circle-left"></i> %title'); ?></p>
	</div>
	<div class="col-sm-6">
		<p class="text-right"><?php next_post_link('%link','%title <i class="fa fa-chevron-circle-right"></i>'); ?></p>
	</div>
</div>

CSS 2017.1.18

【CSS】蛍光マーカーを引きたい

50%は太さ、
rgbはカラー、#123abcのように書いてももちろんOK、
最後の0%はお約束でそのまま。

background: -webkit-linear-gradient(transparent 50%, rgb(253,236,237) 0%);
background: -o-linear-gradient(transparent 50%, rgb(253,236,237) 0%);
background: linear-gradient(transparent 50%, rgb(253,236,237) 0%);

WordPress 2017.1.5

【WordPress】レスポンシブのページネーションを設置したい

下記ページを参考にします。

レスポンシブのページネーションを設置するには以下の手順がおすすめです。

Font Awesome呼び出しタグを貼り付ける
functions.phpにコードを貼り付ける
ページネーション用のスタイルシートを貼り付ける
ページネーション表示箇所にコードを貼り付ける

1. Font Awesomeのリンクを<head></head>内に貼り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2. function.phpにコードを貼り付けます。

/* ===============================================
# レスポンシブ ページネーション
=============================================== */
function responsive_pagination($pages = '', $range = 4){
$showitems = ($range * 2)+1;

global $paged;
if(empty($paged)) $paged = 1;

//ページ情報の取得
if($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages){
$pages = 1;
}
}

if(1 != $pages) {
echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
//先頭へ
echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>';
//1つ戻る
echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>Previous</span></a></li>';
//番号つきページ送りボタン
for ($i=1; $i <= $pages; $i++) {
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
}
}
//1つ進む
echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>Next</span></a></li>';
//最後尾へ
echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>';
echo '</ul>';
}
}

3. スタイルシートを貼り付けます。オリジナルとは違ってリンク色を変更しています。

/* ===============================================
# レスポンシブ ページネーション
=============================================== */
.pagination{
list-style-type: none;
padding-left: 0;
margin: 30px 0;
}

.pagination,
.pagination li a {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.pagination a {
font-weight: 300;
padding-top: 1px;
text-decoration:none;
border: 1px solid #ddd;
border-left-width: 0;
min-width:36px;
min-height:36px;
color: #333;
}

.pagination li:not([class*="current"]) a:hover {
background-color: #eee;
}

.pagination li:first-of-type a {
border-left-width: 1px;
}

.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
/* screen readers only */
position: absolute;
top: -9999px;
left: -9999px;
}

.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
display: inline-block;
font-family: Fontawesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

.pagination li.first a::before { content: "\f100"; }
.pagination li.last a::after { content: "\f101"; }

.pagination li.previous a::before { content: "\f104"; }
.pagination li.next a::after { content: "\f105"; }

.pagination li.current a {
background-color: #ddd;
cursor: default;
pointer-events: none;
}

.pagination > li:first-child > a {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}

.pagination > li:last-child > a {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}

.pagination>li>a, 
.pagination>li>span {
  color: rgba(0,0,0,1);
}
.pagination>li>a:focus, 
.pagination>li>a:hover, 
.pagination>li>span:focus, 
.pagination>li>span:hover {
  color: rgba(125,125,125,1);
}

@media only screen and ( max-width: 680px ) {
.pagination li.first,
.pagination li.last {
/* screen readers only */
position: absolute;
top: -9999px;
left: -9999px;
}

.pagination li.previous a { border-left-width: 1px; }
}

@media only screen and ( max-width: 500px ) {
.pagination li {
/* screen readers only */
position: absolute;
top: -9999px;
left: -9999px;
}

.pagination li.current,
.pagination li.first,
.pagination li.last,
.pagination li.previous,
.pagination li.next{
position: initial;
top: initial;
left: initial;
}

.pagination li.previous a { border-left-width: 0; }
}

@media only screen and ( max-width: 400px ) {
.pagination li.first,
.pagination li.last {
/* screen readers only */
position: absolute;
top: -9999px;
left: -9999px;
}

.pagination li.previous a { border-left-width: 1px; }
}

@media only screen and ( max-width: 240px ) { /* For watches? */
.pagination li { width: 50%;}

.pagination li.current {
order: 2;
width: 100%;
border-left-width: 1px;
}
}

4.ページネーション表示箇所にコードを貼り付けます。

<!--ページネーション-->
<?php if (function_exists('responsive_pagination')) {
responsive_pagination($additional_loop->max_num_pages);
} ?>

以上で完成です。