カスタマイズの覚書
これやりたい→やってみる→すぐやり方忘れる、というのの繰り返しではしょうがないので、調べたことと追加したプラグイン、実装した内容とその場所などを記していくことにします。
目次を入れたい
記事の冒頭で、見出しを取得して表示するアレ。テーマのJinと同じ開発元で、目次プラグインを配信していたので、ゲット。有効化して、目次を実装。簡単にできました。ひとまずこれで使っていきたいと思います。
プラグイン:Rich Table of Contents
追尾サイドメニュー
スクロール後もついてくるメニューは【ウィジット】の追尾サイドメニューから設定できます。【ウィジット】は、未設定のものは【カスタマイズ】には表示されないので、未設定の場合は管理画面のサイドメニューにある【ウィジット】から編集できます。
動的な表作成
標準のテーブルには、フィルターや並び替えの機能がない。
より高機能なテーブル作成プラグインを探してみた。
プラグイン:tablepress
表を作るプラグイン。フィルターや並び替えができる。CSSでカスタマイズできる。(CSSが扱えればカスタマイズ性が高い)。表データをインポートできる。
表のカスタマイズ
ダッシュボードのtablepress、「プラグインのオプション」の「CustomStyling」にCSSのコードを記述してカスタマイズできる。
.tablepress_01 {
font-size: 12px;
width: 100%;
}
.tablepress-id-11 .column-1 {
font-size: 11px;
text-align: center;
}
作成した表に割り振られたIDで指定して、カスタマイズができる。
セルの幅を指定
セルの幅を指定する場合は、ショートコードを入力するときに同時に指定できる。
[table id=12 column_widths="80px|320px|130px|30px|20px|"/]
左から、各カラムの幅を指定。%も使える。その場合は、合計が100%になるように割り振る。
長い表をスマホでスクロールする
これはなかなか思い通りに出来なかった。スクロールする設定自体は【white-space: nowrap】で改行をしない指定にすればすぐにできたが、当時作っていた表では特定のセルで改行がしたかった。
こちらのサイトに書かれていた方法で解決しました。↓
.tablepress-id-12 .column-2 {
min-width: 150px;
white-space: normal;
}
Tweetやタイムラインの埋込
↑こんな感じでX(旧Twitter)のタイムラインを埋め込むには、https://publish.twitter.com/#にアクセスし、HTMLのショートコードを取得する。高さと幅、色、言語を指定できる。