パンくずリスト
参考サイト
- コピペでOK！WordPressのプラグインを使わずにパンくずリストを表示させる実装方法
https://www.torat.jp/breadcrumb/
function.php にパンくずリストを作るコードを追加して、ショートコード作成をして読み出す
<?php breadcrumb(); ?>これだとブロックテーマだと使用出来ないので、ショートコード作成する。
【WordPress】超便利! 関数を呼び出すショートコードの使い方
[breadcrumb]スクロールアップ
記事を読んだ時にトップに戻るスクロール
/**
* bodyタグ開始に挿入
*/
add_action( 'wp_body_open', function() {
?>
<!-- ここから挿入したいソースコードなどスタート -->
<a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>
<!-- ここまで -->
<?php
});
/* ページトップに戻るボタンの設置*/
html {
scroll-behavior: smooth;
}
.pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 30px;
bottom: 30px;
background: #fff;
border: solid 2px #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
/* 矢印のデザイン */
.pagetop__arrow {
height: 10px;
width: 10px;
border-top: 3px solid #000;
border-right: 3px solid #000;
transform: translateY(20%) rotate(-45deg);
}
/* マウスオーバーで色を変える */
@media (hover: hover) and (pointer: fine) {
.pagetop:hover, .pagetop:hover .pagetop__arrow {
border-color: #3293e7;
}
}ウェブサイトを印刷用に最適化
印刷用CSSの製作
印刷用にprint.cssを作成する
最終的にはprint.cssといるファイルにしてトップで読み込ませる
<link rel="stylesheet" type="text/css" media="print" href="print.css">
タイトル・フッターを作る
印刷時に非表示のブロックを消す
※参考ページ（基本）
https://zenn.dev/azukiazusa/articles/d8459f81d52d59
※印刷にも対応したウェブサイトを作成する方法
https://www.itti.jp/web-design/how-to-create-a-print-ready-website/
印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決
https://webtan.impress.co.jp/e/2015/07/28/20508
※ずれなくWebページを印刷させるためのCSSティップス集
https://qiita.com/silane1001/items/618099c67c7426522dc7
印刷用CSSの定義を指定する
@media print {
.no-print {
display: none;
}
}<p class="no-print" style="color: red;">ここは印刷時に非表示になります。</p>PCとスマホで表示を分ける
参考 【HTML/CSS】パソコンとスマホで表示内容を切り替える方法
PCのみ表示する、スマホのみ表示するというのをメディアクエリを使って
<div class="for-pc">
パソコンの時に表示する内容
</div>
<div class="for-sp">
スマホの時に表示する内容
</div>.for-pc { display:block; }
.for-sp { display:none; }
@media only screen and (max-width : 767px){
.for-pc { display:none; }
.for-sp { display:block; }
}767pxを境にして切り替えるって事です。