全幅背景内のコンテンツ幅コンテンツ、幅広コンテンツ、背景画像有り、無しなどのテストを再度まとめて行う。
全幅背景内の段落
背景にbg-wrapperクラス、背景色（グレー）指定
段落には何も指定せず。編集画面では、コンテンツ幅になるが、フロントでは、背景側のパディングの内側に広がる。エディタとフロントの見た目が不一致になる。
テスト
幅500px, 高さ50pxにセットしたら、width=500 height=50 と同時にインラインスタイルでピクセル指定されている。柔軟に利用するには、クラス指定で幅を上位要素の幅一杯に広げる必要がある。
もしくは、バックグラウンドにするか。
クラシックブロック(tinymce)では、消されたが、カスタムHTMLならsvgを書き込むことができた。useを使えば、複数も書ける。svg自体は、サイズを指定しなければ、デフォルトの300×150で表示される。
カスタム画像表示用ショートコードのテストです。
この投稿だけ、上に何かがあるような。
[a5short fn=custom-img slug=station]
[a5short fn=custom-img slug=station content="bottom right dark"]館山駅西口
画像のキャプションを追加すると 抜粋文として表示します。
タイトルバックブロックを作成し、タイトルの背景として上に引き上げたい。
クラスを指定して引き上げることはできた。
グループで囲んで、背景色を付けている。タイトルが見えるようにするため、透明度を付けている。
引き上げる高さの指定や、タイトルを手前に表示したりするには、タイトル側で高さを指定したり、リラティブにすることでコントロールしたいが、エディタ側ではタイトルをさわることができない。何か、方法は無いものか。
持ち上げる数字を大きくすると、パンくずの背景にもなる。
ここは段落
背景色のグラデーションでは、デュオトーンにはできない。（できるが、結構難しい。）片側を透明にすることもできないのかも知れない。カラムズの片方を空にすれば、それなりのことはできるかも知れないが、画像を貼るなら。やはり、上がどこできれるか、サイズが欲しい。
作ってみてからの微調整というのは有りかも知れない。ただし、この方法を使うのは固定ページのみ。投稿では、モアリンク形式の一覧が崩れて見えることがある。
結果的には、スクリプト側でタイトルを非表示にし、タイトルブロックを利用するのが、一番やり易いのでは無いかと思う。
抜粋文にタグを書いたら、聞いている。多分、ゲットしてエコーしているので、フィルタリングされていない。？
幅広、全幅ブロックよりも画面サイズが小さくなった時に、縦スクロールバーがあると、左右のパディングがその半分だけ狭くなってしまうのを何とかしたい。
通常のコンテンツ幅
通常のコンテンツ幅であれば、画面が狭くなっても、左右に1remのパディングがあり、その中に収まる。
オレンジは、段落をグループで囲んだもの。
幅広でも、全幅でも背景色を指定すれば、上下に1.25em,左右に2.375emのパディングがセットされる。これを利用すれば良いのでは無いか。背景を白にしたり、透明にしたりすれば、応用が聞きそうな気もする。
して、アイキャッチを削除して再度公開保存すれば、投稿IDがあるので、該当するカテゴリの画像を選択させることができる。
アイキャッチ画像がセットされていない時に、予め用意した画像をセットするようにした。
テスト中。現時点では何も表示しない。デバッグ中。過去の記述と同じにしてみた。実行されていないような気がするが。キーが違っていた。単純なミスもあった。できるようにはなったが、セーブポストアクションは、固定ページでは動いていないのかも知れない。固定ページでも動いていることは確認できた。が、固定ページ用のカテゴリーを取得しようとして、フォールスが返ってきているらしい。
新規投稿時にはカテゴリーを指定しても、投稿自体にIDが無いので、カテゴリー用の画像を選択しない。かといって、更新時のみ作業をするようにしたのでは、デフォルトとしてセットする意味が無い。
slider-multiというスラッグ名で始まるメディアを探して、スライダーとして表示します。
メディアでは無く、特定のカテゴリーに属する投稿を取得し、スタイルを整えれば、投稿スライダーとしても利用できる。（作業：未）
段落用の簡単なパターンを作ってみる。
パディングとマージンを余分に付与し、枠線を付けてみる。
パディングとマージンを余分に付与し、枠線を付けてみる。
ダメだった。インラインタグだけ書いてパターン登録して、パターンの選択、エディタ内への挿入、投稿表示まではできたが、再度編集画面に入ると、このブロックには、不正なコンテンツ（？）が含まれているという表示がされ、結局消されてしまう。クラス名だけなら補完してくれたが、インラインのスタイルはダメらしい。
別のサンプルを参考にしてみても、インラインでスタイルを書き込んだものは無さそうで、殆どは、クラスを追加して、外部シートでスタイルを当てている。これなら、再利用ブロックでも使える。再利用ブロックのデメリットは、通常のブロックにすることを忘れて、大本を書き直してしまうことが有りがちなことである。これは、再利用ブロックの専用の投稿を作って、複製をいくつかその中に置いておくことで解決できるかも知れない。
オリジナルボタンを作ってみる。更新。
オリジナルなボタンを追加してみた。元々のボタンブロックに、ラベルを記入して、スタイルを指定しただけのものをコピーして作っている。クラスは、高度な設定を開くと付与されているのがわかる。が、スタイルシートには何も追加していないので、デフォルトスタイルのままになっている。
が、簡単に作れることはわかった。
パターンの作成処理スクリプトを削除してみた。オリジナルボタン自体が消えるかエラーになるかと思ったが、そのまま表示されている。クラスも付与されたままになっている。この下のボタンと全く同じ。作成されたパターンが表示されているだけということか。複雑なスタイルを当てていると崩れるだけのことなのかもしれない。
続きを読む »»投稿一覧などのグリッド表示のスタイルをテストする。
- 投稿の画像
- 投稿
- 投稿
- 投稿
余分なタグを作成しないのでリストが最適かと思ったが、リスト項目内での改行が段落や見出しにならない。項目内の文字を選択してもグループで囲むことはできない。段落をドラッグしてもリスト項目内にドロップすることができない。
パターンでは、グループをリストで囲み、更にグループで囲んでいる。エディタ上ではできないということか。パターンを作らなくてはならないということか。投稿一覧パターンでは、グリッドでは無く、フレックスを使っているので、メディアクエリーで幅を指定している。要検討。！
投稿のタイトル
余分なタグを作成しないのでリストが最適かと思ったが、リスト項目内での改行が段落や見出しにならない。項目内の文字を選択してもグループで囲むことはできない。段落をグループで囲んでいるが、同様にドロップできない。グループを選択して、その外側をグループで囲むこともできない。
別にグループを作成してもその中にいれることができない。カラムで囲むことはできる
投稿のタイトル
余分なタグを作成しないのでリストが最適かと思ったが、リスト項目内での改行が段落や見出しにならない。項目内の文字を選択してもグループで囲むことはできない。段落をグループで囲んでいるが、同様にドロップできない。グループを選択して、その外側をグループで囲むこともできない。
別にグループを作成してもその中にいれることができない。カラムで囲むことはできる
一時的に使いたいスタイルを、カスタムHTMLに書いて使えるかどうかのテスト
この段落の下に、 .colored{color:red;} と書いた、スタイルタグがある。
.colored{color:red;}この段落にクラスを付与して、上のスタイルが適用されるかどうかをテストしてみる。
プレビュー画面では赤くなっているが、エディタ上ではスタイルは効いていない。
エディタ上で、編集しながらスタイルを確認することが目的なので使えないことになる。
.green{color:green;}
クラシックブロックを使って書いてみる。
クラシックブロックでも、フロントでは色が付くが、エディタ上では適用されない。スタイルの記述位置に変なアイコンが表示される。