Cocoon のカスタマイズ

iOSのSafari、横向きで表示が崩れる

横に向けると文字が大きくなる グリッド揃えに関する記事を書いていた時、ふと手持ちのiPhoneで、表示を傾けると急に文字が大きくなった。(タイトル画像参照) ルビの振ってある「行取ぎょうど」がcss通りの大きさなのだが...

WordPressでInDesignの様な文字組−その②

グリッドが表示できるようになったので、各タグがグリッド揃えになる様に位置調整をしていきます。 ←などの余白部分をクリック・タップするとグリッド表示のon/offが可能になっておりますので、お好みに応じて使い分けてください。 ...

WordPressでInDesignの様な文字組−その①

WordPress上での文字組み、段落幅の調整はそれなりに形にはなってきたので、次は高さの調整に取り組んでいきます。目指すイメージはInDesignのレイアウトグリッドです。 まずはグリッドの表示から これまでのスクリーン...
2019.02.06
スポンサーリンク

和欧間スペースの調整−その①

前回の記事で念願の和欧間スペース(和文と欧文の間にアキを作る)を実装できました。が、早速と修正案&問題点が発生しましたので調整します。 既存の半角スペース除去は不要 まずはカンタンなものから。と言いますか訂正です。...

ひらがなとカタカナの文字間が詰まってしまう

以前のテーマ、「段落を整えて表示する」シリーズを作成していた頃からチョイチョイ気になっていました。 「なんか文字が詰まって見えるなぁ、、、」 恐る恐る調べてみました。 ペアカーニングっぽいのが効いてる? ...

AMP用と通常用とでcssを使い分ける

以前の記事で、AMPページでもサイトの印象が変わらぬ様、配色や装飾に必要なミニマムなcssとしてamp.cssを作成し、50KB制限に収める手法を試みました。ですが、Cocoonの仕様ではAMPページではamp.cssとstyle.css...

段落を整えて表示する−その⑩

前回、cssセレクタをまとめることに効果が無いばかりか悪影響を生じていたので、cssを削減するべく、次の二点に取り組みます。 4〜6カラム 機能制限的な事は出来るだけ避けたかったのですが、4〜6カラムのベタ組みを取り止めま...

段落を整えて表示する−その⑨

css を削減するべく、実際に記事として公開されている AMP ページの html ソース(のスタイルシート部分)を眺めていました。 「WordPress」・「Cocoon親テーマ」・「自作スキン」と書き出されているスタイル...

段落を整えて表示する−その⑧

えー、前回。AMPテストを試みた処、見事に50KBオーバーでした;; AMP 対応も目指したいので、対策を講じます。 AMP 対応を目指して まず大前提として。このスキンで容量制限に引っかかっている主犯格はカラム間マ...

段落を整えて表示する−その⑦

やりたい事は出来てきたのですが、力技すぎてコードが肥大化しているため、コードの削減を試みます。 どう削減するか 例えば、あるメディアクエリ内に .blank-box .wp-block-columns.has-2-c...
スポンサーリンク