メモ

サイトカスタマイズの覚書[メモ]

カスタマイズの覚書

 これやりたい→やってみる→すぐやり方忘れる、というのの繰り返しではしょうがないので、調べたことと追加したプラグイン、実装した内容とその場所などを記していくことにします。

目次を入れたい

 記事の冒頭で、見出しを取得して表示するアレ。テーマのJinと同じ開発元で、目次プラグインを配信していたので、ゲット。有効化して、目次を実装。簡単にできました。ひとまずこれで使っていきたいと思います。

プラグイン:Rich Table of Contents

https://jinr.jp/manual/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】で改行をしない指定にすればすぐにできたが、当時作っていた表では特定のセルで改行がしたかった。
こちらのサイトに書かれていた方法で解決しました。↓

https://wp-cocoon.com/community/customs/%E8%A1%A8%EF%BC%88%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%EF%BC%89%E3%81%AE%E3%82%BB%E3%83%AB%E3%81%AE%E6%A8%AA%E5%B9%85%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB/

.tablepress-id-12 .column-2 {
	min-width: 150px;
	white-space: normal;
}

Tweetやタイムラインの埋込

↑こんな感じでX(旧Twitter)のタイムラインを埋め込むには、https://publish.twitter.com/#にアクセスし、HTMLのショートコードを取得する。高さと幅、色、言語を指定できる。

COMMENT