やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

MacのPagesで台本を書く

台本、つまりこのようなレイアウトを実現する

(今回は横書きです)

タブの設定

タブキーを押した際のインデントの幅(?)が一定になるようにする。

  1. 表示 > ルーラを表示
  2. セリフの最初のところにカーソルを合わせる
  3. ルーラ上の丁度よいところ(4のあたり)をクリックする

*参考
MacのPagesでタブストップを設定する - Apple サポート (日本)

ぶら下げインデントの設定

セリフが複数行に及んでもインデントが効くようにする。

  1. サイドバーの「フォーマット」から、レイアウト > インデント の「左」を 適宜(2cmとか)設定する

*参考
Pagesでぶら下げインデント - 日々適当


これで台本レイアウトが実現する。

段組み、ダメ、絶対

セリフのレイアウトに「段組み」を使うべきではない。

段組みは、おそらく一時的なカラムレイアウトに使うものであり、

ページをまたいで設定することができない。

段組みを使って台本レイアウトをやろうとすると、

ページをまたいだセリフを書く度に酷い目に合うぞ。(やった人)

SWELLのlightbox(luminous.js)で画像拡大時にもキャプションを表示させる

大好きなWordPressテーマ、SWELL。
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ


SWELLにはlightbox機能(Luminous Lightbox)が標準搭載されており、

別途で画像にリンクを設定していない場合は、画像をクリックすると拡大表示されます。

 

この拡大表示の時に、キャプションも一緒に表示させたい!

オプションで選べれば良いのだが、今のところ用意されていない。

 

紆余曲折を経たが…

半日かけてあちこちいじくり回した結果、
カスタムJSの欄に以下を書くことで、
figcationの中身を画像拡大時にも表示させることに成功した。

※下記は画像単体ではなくギャラリーの場合。
単体の時は、 new LuminousGallerynew Luminousにしたり色々する

const luminousOpts = {
  sourceAttribute: 'data-luminous',
  caption: (trigger) => {
    return trigger.parentElement.querySelector('figcaption').textContent;
  },
} 
const luminousGalleryElems = document.querySelectorAll('.luminous');
if( luminousGalleryElems.length > 0 ) {
new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
} 

figcaptionじゃなくてaltの場合はこう

const luminousOpts = {
  sourceAttribute: 'data-luminous',
  caption: (trigger) => {
    return trigger.parentElement.querySelector('img').getAttribute('alt');
  },
} 
const luminousGalleryElems = document.querySelectorAll('.luminous');
if( luminousGalleryElems.length > 0 ) {
  new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
} 

optionのsourceAttribute はトリガーの指定部分で、
普通は a要素の href を指定するんだけど
SWELLの場合は画像をaタグで囲わずに、imgに data-luminous="画像URL" というのを付加してそれをトリガーにしてる。

しかし二重に実行されてしまう

キャプションが表示されて喜んだのもつかの間、
これをカスタムJSに書き込んだことで、
もともと実行されているLuminousに Luminousを重ねがけしてしまっているので
画像拡大Lightboxが二重に表示されていまい、「閉じる」を2回押す羽目に。

これじゃダメだ、でもどうすれば……?

禁忌!テーマファイル直接編集

絶対にやらない方がいいんだけど、やってしまった。
テーマファイルの直接編集。

  • wp-content/themes/swell/build/js/front

ここに「set_luminous.min.js」というファイルがあり、
luminousのoptionなどが設定されている。

その中の sourceAttribute: 'data-luminous' が書いてある箇所に狙いを定め、
以下のような感じでcaptionの設定を捩じ込む。

/* 前略 */
const luminousOpts = {
  sourceAttribute: 'data-luminous',
  caption: (trigger) => {
    return trigger.parentElement.querySelector('figcaption').textContent;
  },
} 
function o(){var o; /* 中略 */
		0<n.length&&new LuminousGallery(n,{arrowNavigation:!0},luminousOpts)}))})();
/* 以下略 */

(カスタムJSに書いたやつは削除する)

これで無事に「画像拡大時にもキャプション表示」という念願は叶ったけど
力技で解決しちゃった感がある。
テーマを更新したりした時に、きっと困るであろう。
そのうちオプションで選べるように進化するといいな…。

CSSの細かい調整

下記をカスタマイズの追加CSSに追記。
( !important ばっかりでダサい)

/* キャプションが2行になっても下端が切れないように */
.lum-lightbox-inner img {
    max-height: 96% !important;
}
@media only screen and (max-width:480px) {
	.lum-lightbox-inner img {
    max-height: 84vh !important;
	}
/* スマホでキャプションがスクロールされて消えるのを解決 */
	.lum-lightbox-position-helper {
    position: relative !important;
	}
/* スマホでキャプションが写真から離れて画面下端に固定されているのを剥がす */
	.lum-lightbox-caption {
		bottom:unset !important;
	}
}

WordPressのギャラリーのサムネイルの高さ(アスペクト比)を統一する

WordPressのブロックエディターの「ギャラリー」機能。

複数画像を並べるのに便利なんだけど、

横長画像と縦長画像が混在した場合、縦長画像の方に高さが統一されるため

横長サムネの行と縦長サムネの行が存在してしまったりして、

見た目がちょっと微妙だった。

  • サムネイルを正方形にしたい!
  • でもクリックして表示される拡大画像は、元のアスペクト比のままにしたい!


これらの希望を叶える解決策が、ありました

iframeのレスポンシブ対応の時によく使う、アレ。

※テーマ「SWELL」を使っています。クラス指定とかは各自良い感じにしてください

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image{
    position:relative;
}
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image::before{
    content:"";
    display: block;
    padding-top: 100%; /*正方形。16:9にしたい場合は56.25%*/
}
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


参考
CSSだけでアスペクト比を固定するテク - Qiita


これで正方形のタイル状に揃った瞬間、めちゃ気持ちよかった。

インスタみたいで美しい!

 

ちなみにクリックして表示される拡大画像は、ちゃんと横長・縦長のままです。

なお、スマホで拡大画像が切れないように、以下も追記してます。

@media only screen and (max-width:480px) {
	.lum-lightbox-inner img{
		width:100%;
	}
}