無料テンプレートCocoonスキン Calm(カーム)のエントリーカード

エントリーカード

Cocoonスキン Calm(カーム)のエントリーカード

Calm(カーム)のエントリーカード

ブログのメインエリアに最初に表示されるエントリーカード。

そのエントリーカードのカテゴリーラベルにかなり手を加えました。

 

カードタイプが縦1列

無料テンプレートCocoonスキン カームのインデックスページ

 

カードタイプが縦2列

ラベルを斜めにして、フォントの位置やサイズを調整。

さらに、エントリーカードにマウスを乗せると、カテゴリのラベルがギュイーンって感じでフォントが大きくなりながら中央部分に寄っていきます。

ここまで変更するつもりはなかったんですが^^

カテゴリーの注意点

Calmでのカテゴリーには注意点があります。

カテゴリー名は最大10文字程度まで

カテゴリーのラベルを斜めにした関係で、カテゴリー名は全角で最大10文字までにしてください。

それより長いと多分はみ出ます。

解像度が小さい画面では、カテゴリーのラベルは斜めになりません

スマホなどの小さい解像度の場合、カテゴリーのラベルを斜めにするとカテゴリー名が収まらないので、標準のままにしました。

だから、スマホなどではラベルは斜めになりません。

※ただし、スマホでも投稿ページのアイキャッチはカテゴリーラベルが斜めになります。

ちなみに、横が1030ピクセル以上だとインデックスページのラベルは斜めになるようにしています。

エントリーカードのカードタイプは縦3列は非推奨

これもカテゴリーのラベルを斜めにした影響ですが、カードのタイプを3列にすると解像度によっては、カテゴリ名がはみ出たり、ラベルが切れたりします。

これを対応するには今の僕のスキルでは無理です^^

なので、カテゴリーのラベルを斜めで使いたい場合は3列以外(赤線以外)にしてください。

3列でも解像度によっては、下の画像のようにきちんとカテゴリーのラベルが表示されますが、解像度に影響されるので1列か2列が無難です。

 

カードタイプが縦3列

コメント

タイトルとURLをコピーしました