Habakiriのオフキャンバスナビゲーションについて
フッターを固定してオフキャンバスナビゲーションメニューのレイヤーに隠れないようにしたい。
ということで。
オフキャンバスナビゲーションが出たときに下になるレイヤー(グレーで覆われる範囲)は、id:contentsで指定されている。なので、ヘッダーやフッターなどナビゲーション下のレイヤーから出したい場合は、id:contentsの外に出せばいい。
<div id="container"> <header> <div id="contents"> <div class="sub-page-contents"> <footer> </div> </div>
これを
<div id="container"> <header> <div id="contents"> <div class="sub-page-contents"> </div> <footer> </div>
こんな感じに。
で、footerに対して、オフキャンバスナビゲーションを開いた時の動作・レイアウトを追記して完了。
Habakiriのオフキャンバスナビゲーション
ナビゲーションを閉じたときにぱっと切り替わるのが納得いかなかったので。
.responsive-nav-contents, .off-canvas-nav { transition: transform 0.2s ease-out; -ms-transition: transform 0.2s ease-out; -moz-transition: transform 0.2s ease-out; -webkit-transition: transform 0.2s ease-out; }
これでたぶんなんとかなった。なってるはず。
テーブルタグのレスポンシブ対応
参考:https://liginc.co.jp/330259
サイトがなくなると困るので、こちらにもメモ。
(1)テーブル→リスト
HTML
<table> <thead> <tr> <th>Big heading</th> <th>Big heading</th> <th>Big heading</th> <th>Big heading</th> </tr> </thead> <tbody> <tr> <th>Title</th> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <th>Title</th> <td>Content</td> <td>Content</td> <td>Content</td> </tr> </tbody> </table>
SCSS
@media only screen and (max-width:420px){ table{ tr{ display: block; width: 100%; } thead{ display: none; } tbody{ display: block; width: 100%; overflow: hidden; th{ list-style:none; } td{ margin-left: 40px; } th,td{ width: 100%; display: list-item; } } } }
(2)HTML+CSS+JS/縦ライン重視?
HTML
<table class="js-target"> <thead> <tr> <th>Big heading1</th> <th>Big heading2</th> <th>Big heading3</th> <th>Big heading4</th> </tr> </thead> <tbody> <tr> <td>Content1</td> <td>Content2</td> <td>Content3</td> <td>Content4</td> </tr> <tr> <td>Content5</td> <td>Content6</td> <td>Content7</td> <td>Content8</td> </tr> </tbody> </table>
SCSS
@media only screen and (max-width:420px){ table{ border-bottom:1px solid #ccc; tr{ display: block; width: 100%; } tbody{ display: block; width: 100%; overflow: hidden; th{ list-style:none; } td{ margin-left: 0px; border:1px solid #ccc; border-bottom: none; } th,td{ width: 100%; display: block; } } } .table-head{ display: none !important; } .row{ margin-bottom: 30px; border-bottom: 1px solid #ccc; } .table{ .column{ width: 100%; display: block; border:1px solid #ccc; border-bottom: none; position:relative; } } tbody{ position:relative; .column{ &:before{ content: attr(data-label); display: block; margin-bottom: 10px; font-weight: bold; color: #000; font-size:18px; } } } }
JS
let $target = $('.js-target'); $target.each(function(){ let i = '', $target_thead_col = $(this).find('thead th').length; for ( i=0; i<= $target_thead_col; i++){ let $target_col_label = $(this).find('tr th:nth-child('+ i +')').text(); $(this).find('tr td:nth-child('+ i +')').replaceWith(function(){ return $('<div class="column" data-label="'+ $target_col_label +'">').append($(this).contents()); }); } $(this).find('td').replaceWith(function(){ return $('<div class="column">').append($(this).contents()); }); $(this).find('th').replaceWith(function(){ return $('<div class="column">').append($(this).contents()); }); $(this).find('tr').replaceWith(function(){ return $('<div class="row">').append($(this).contents()); }); $(this).find('thead').replaceWith(function(){ return $('<div class="table-head">').append($(this).contents()); }); $(this).replaceWith(function(){ return $('<div class="table">').append($(this).contents()); }); });
あとはテーブルをDIVで囲って、DIVタグに対してover-flow:scroll設定する方法(テーブル全体をスクロール)と
テーブルヘッドを固定にしてコンテンツ部分だけスクロールする方法。
PDFで出力する帳票に項目を追加する(ver2.13.2)
左上、宛名(個人名)の上の行に会社名を追加した。
data/class/SC_Fpdf.phpを
$text = $this->arrDisp['order_company_name'].' 様'; $this->lfText(27, 55, $text, 10); //購入企業名 $text = $this->arrDisp['order_name01'].' '.$this->arrDisp['order_name02'].' 様'; $this->lfText(27, 59, $text, 11); //購入者氏名
こんな感じ。
追加できる項目はたぶん、dtb_orderテーブルの項目と推測。
lfTextの引数の中身は
引数1:PDFに出力する際の、左からの位置
引数2:PDFに出力する際の、上からの位置
引数3:内容
引数4:フォントサイズ
ちなみに位置・フォントサイズの単位はたぶんポイント(Pt)だとどっかにあった気がする。
Habakiriのカスタマイズ
Wordpressのテーマ「Habakiri」で、entry-metaをカスタマイズした。entry-metaは、投稿記事の更新日とかカテゴリとかある部分のところ。
マニュアル https://habakiri.2inc.org/manual/filter-hooks/では、フィルターフックが使える。
実際、たとえば空タグの追加なんかはこっちでもテストできた。
functions.php
function my_habakiri_entry_meta( $entry_meta ) { $entry_meta .= '<li></li>'; return $entry_meta; } add_filter( 'habakiri_entry_meta', 'my_habakiri_entry_meta' );
ただ、すでに入っている$entry_metaの中身を空にするのはできても、そこから新しく入れなおすのにちょっと失敗した。
クラスの外ということでか、inc/class.entry-meta.phpの中身をコピーしても動かない。
動かなかった例(たぶん)
function my_habakiri_entry_meta( $entry_meta ) { $entry_meta = $this->published(); $entry_meta .= $this->updated(); $entry_meta .= $this->author(); $entry_meta .= $this->categories(); $entry_meta .= $this->tags(); $entry_meta .= $this->taxonomies(); return $entry_meta; } add_filter( 'habakiri_entry_meta', 'my_habakiri_entry_meta' );
根本的に書き方が間違ってるだけかもしれないが、おそらくはpublished()などはprotectedのため、クラスの外からは使えない、ということだろう。たぶん。
自力で$entry_metaの中身を書けばいいとも思ったが、どうせだったらすでにあるものを利用したい。
なので、思い切って、class:Habakiri_Entry_Metaを上書きしてみることにした。
まず、modules/entry-meta.phpを子テーマディレクトリにコピー。
中身を
class my_Habakiri_Entry_Meta extends Habakiri_Entry_Meta { public function display() { do_action( 'habakiri_before_entry_meta' ); ?> <div class="entry-meta"> <ul class="entry-meta__list"> <?php $entry_meta = $this->published(); $entry_meta .= $this->categories(); $entry_meta .= $this->tags(); $entry_meta .= $this->taxonomies(); echo apply_filters( 'habakiri_entry_meta', $entry_meta ); ?> </ul> <!-- end .entry-meta --></div> <?php do_action( 'habakiri_after_entry_meta' ); } } $EnetryMeta = new my_Habakiri_Entry_Meta(); $EnetryMeta->display();
とすると、とりあえずうまく動いたっぽい。
これ、よく考えたら、リストじゃなくって定義タグにしたい、とかいうときにも使えるかも。