Luxeritas カスタマイズ(外観) サムネイル (アイキャッチ)

2017/10/24Luxeritas カスタマイズ(外観)

このサイトはPCやインターネットの話題についてのブログなので、画像は説明にたくさん必要です。文字だと私の文章力の問題があるので説明に分かりにくさが伴ってしまい、さらに、こちらで勝手にわかっているつもりで話しを進めていきがちになります。そこで、できるだけ実際の画像を示して話しを進めています。

当初は、画像が多めのこのサイトにアイキャッチ画像まで入れるとごちゃごちゃし過ぎの印象になってしますので不必要だと考えていました。ただ、話しが込み入ってくるほどにサイトの場所とか示す時に字で書き連ねるよりアイキャッチで説明的でもない画像を入れるとバランス良くなると考えを改めて、それでアイキャッチ画像を挿入しています。一部足りていない記事もありますけど。アイキャッチ画像描いていくのも面倒になるときもあります。

文字だけつらつら並ぶトップページになるより画像からも内容が判断できるグリッドデザインをトップページに採用しました。どちらが良い悪いでは無いですし、画像入れるとやることが増えるのでこのあたりは時間の余裕と好みの問題だとは思います。

サムネイルの表示/非表示切り替え

グリッドデザインや一覧表示、関連記事の表示などで、サムネイル(アイキャッチ画像)の表示or非表示が選択できます。
Luxeritas062
「サムネイル表示」にレ点チェックがあって、アイキャッチ画像が設定されているとグリッドデザイン、一覧表示、カテゴリー表示、関連記事などでアイキャッチ画像と抜粋記事が表示されます。

「No Image のサムネイル表示」にレ点チェックがあって画像が設定されていない記事には「No Image」と表示されます。

Luxeritas063
「サムネイル表示」レ点チェックを外せば、サムネイル=アイキャッチ画像が消えて抜粋記事の文字だけ並びます。「No Image のサムネイル表示」にレ点チェックがあっても無くても画像表示しない設定ですから結果は同じで画像無しのまま変わりはありません。

画像に対するテキスト(抜粋)の配置

Luxeritas065
「画像の右 (画像下への回り込み非許可)」を選択していると、画像の右側に文字が表示されます。画像下には不許可となっています。ただしスマホなど小デバイスでは下にも表示されます。

「画像の右 (画像下への回り込み許可)」←これはPCでも下にも表示されます。

Luxeritas066
「画像の下」を選択するとテキストは下に全て表示されます。

サムネイルの表示サイズ

一つの記事を表示する記事ページでは無く、ホームページ、カテゴリーページではサムネイルと記事の抜粋が並べて表示されます。通常スタイルとタイル型 ( グリッドレイアウト )とカード型 ( グリッドレイアウト )と表示方法が3種類あって、ホームページは通常スタイル、カテゴリーはタイル型、アーカイブはグリッド型表示にするとかそれぞれ分けて設定もできますし、全てグリッド型表示と統一もできます。

それぞれ設定するためにはいったんカスタマイズ(外観)→「サムネイル(アイキャッチ)」メニューから抜けます。
Luxeritas070「サムネイル(アイキャッチ)」メニューの一番左上に「<」マークがあるのでクリックしてカスタマイズ(外観)メニューを表示させます。
xserverwordpress240_thumb3
左側のメニューから「グリッドレイアウト」をクリックして「リスト型トップページ」「カテゴリー」「アーカイブ」をどの表示にするか選択します。

Luxeritas カスタマイズ(外観) グリッドレイアウト

通常スタイル
Luxeritas071

一覧表示をどういうスタイルで表示するか決めたら再び、Luxeritas カスタマイズ(外観) →サムネイル (アイキャッチ)に戻ります。通常スタイルでの画像の表示を見てみます。

Luxeritas068
まずは通常スタイルでのサムネイル表示編集です。
サムネイル表示の大きさを変えられます。ブルダウンメニューにnormal(150px), medium(300px), large(640px), full(元の大きさ)と4種類あるものの、アップロードした画像が例えば150pxだとmedium(300px), large(640px)を選択しても拡大されて表示されることは無く、150pxのままです。逆に大きな画像300pxをアップロードしてnormal(150px)をここで選択した場合150pxに縮小表示はされます。

Luxeritas069
例えば最大値の640px設定にしてみます。サムネイルで640pxの大きさでアップロードした画像は無いので、640pxまで拡大されることも無く、アップロードした時の最大値の画像がそれぞれ表示されました。512px四方の画像はその512px四方、150px四方の大きさでアップロードした画像は150px四方で表示されました。640pxでアップロードされた画像があった場合には640pxで表示されると思われます。

ただし、「表示スタイル」を「normal(150px)」にしたら512px四方の画像も285px四方の画像も全てが150px四方に統一されて表示されました。縮小表示はされるようです。

アイキャッチの大きさが揃っていないと散漫なイメージなるので小さいアイキャッチサイズに合わせて統一感を出す必要があります。逆に大きな画像に合わせるには小さな画像を削除して大きな画像のサイズに合わせてアップロードし直す必要があります。意図して大きなアイキャッチと小さいアイキャッチを混在させる事があるのかわかりませんけど、それ以外はこの設定を大きくした場合には確認が必要です。

タイル型 ( グリッドレイアウト )

Luxeritas072
ブルダウンメニューに通常スタイルにもあったnormal(150px), medium(300px), large(640px), full(元の大きさ)に加えてtile(320 x 180px crop)があります。
Luxeritas073
medium(300px)で300px四方のキャッチアイコンを表示しています。ここで「medium(300px)」から「tile(320 x 180px crop)」に変更してみます。

Luxeritas074
上下が180pxに切り取られて表示されます。幅は300pxから320pxに広がっています。元のアップロードした画像の大きさが320px以上だったからです。上下を刈り取られた状態で表示されていますが、画像じたいは無事なのでまたmedium(300px)に戻せば切り取られて表示されていた部分も戻ります。

横幅いっぱい ( width: 100% ) と 中央揃え ( align: center )

通常スタイルとカード型 ( グリッドレイアウト )とは違って、タイル型 ( グリッドレイアウト )にはタイルのように等距離に並べるために二つの機能がついています。わかりやすいので「中央揃え ( align: center )」からチェックして有効にしてみます。
Luxeritas076
アイキャッチアイコンがあってその下に記事内容抜粋が表示されますが、このままだとキャッチアイコンが抜粋記事表示より幅が小さいので左に寄っています。large(640px)を選択していますがアップロードしたアイキャッチ画像は150pxなので表示が150pxになっています。normal(150px)を選択しても抜粋記事の幅は変わらないので表示はアイキャッチ画像が左寄りのままです。タイル型と言うわりに画像が左に偏っていると違和感があります。「中央揃え」を選択しないで「横幅いっぱい」(width: 100%)だけチェックしても記事の幅にある分だけ画像が引き伸ばされて表示されることはありません。変化はありません。

Luxeritas077
画像が512px四方でアップロードしてある場合は抜粋記事の幅と同じく表示されました。この状態で、画像表示をmedium(300px)にすると画像が抜粋記事の幅より小さくなります。400pxくらいの幅は必要なようです。カスタマイズ(外観)に戻って、「グリッドレイアウト」メニューから「タイル型(最大3列)」にするとアイキャッチ150px四方が少し左寄り、「タイル型(最大4列)」にすると150px四方のアイキャッチと抜粋記事の幅はほとんど同じで均一に並びます。

Luxeritas078
「グリッドレイアウト」メニューで「タイル型(最大4列)」に設定して、サムネイル(アイキャッチ)メニューでタイル型 ( グリッドレイアウト )「Large(640px)」を選択して「横幅いっぱい」(width: 100%)と「中央揃え」も選択してありますが、「Large(640px)」以外の小さい表示150pxにしても変化はありません。「tile(320 x 180px crop)」にすると上下が切り取られますけど。それ以外の表示する大きさを変えても「横幅いっぱい」(width: 100%)と「中央揃え」も選択を外しても変化はありません。このようにデザインで幅が限定されると画像の表示幅を大きくしても中央揃え、横幅いっぱいもできないので変わりはありません。

このようにグリッドレイアウトでは列の数によって一つの記事の表示幅が限られるので、サムネイル (アイキャッチ)でサムネイルの大きさ、表示を設定してもその表示幅の制約の範囲内での大きさになります。

これまで150px四方でアップロードした場合、サムネイル設定をlarge(640px)を選択したところで150px四方にしか表示されないと書いてきましたけど引き延ばして表示される設定もあります。
Luxeritas079
Luxeritas080
「中央揃え」「横幅いっぱい」(width: 100%)の二つ共選択して画像をlarge(640px)選択してあります。
二つ選択することで150pxの画像を幅一杯にして表示してくれます。ただ引き延ばすので画像じたいは粗く、少しぼやけた画像になるので注意が必要です。

ダッシュボード→Luxeritas→カスタマイズ(外観)攻略法

Luxeritas27062
サイトタイトル変更とサイトアイコンを設定手順説明
Luxeritas27162
横幅、記事一覧、パンくずリンク、関連記事とナビ表示
Luxeritas27262
タイル型、カード型グリッドレイアウト表示手順説明
Luxeritas27352
カラム変更とサイドバーなどの領域分離or結合を選択
Luxeritas27462
ヘッダー/フッターのカスタマイズ
Luxeritas27542
コンテンツ&サイド枠線とサイドバー幅変更
Luxeritas27682
コメント欄の表示or非表示、枠線
Luxeritas27742
キャッチフレーズ、ホーム、PAGE TOP変更
Luxeritas27832
メタ情報の表示or非表示と配置
Luxeritas27972
サムネイル(アイキャッチ)大きさと配置
Luxeritas28042
フォントの変更
Luxeritas28162
タイトル、記事など文字サイズの変更
Luxeritas28232
文字色の編集
Luxeritas28432
背景色と枠線色の編集
Luxeritas28372
背景とタイトルとロゴ画像挿入による編集
Luxeritas28532
パンくずリンクの配置変更と編集
Luxeritas28772
ヘッダーナビ(グローバルナビ)編集
Luxeritas28832
ヘッダー上の帯状メニュー編集
私の目次設定カスタマイズ解説ページへのリンクボタン画像[60]
Luxeritasオリジナル目次の挿入とカスタマイズ
Luxeritas28932
マウスオンアニメーション

Posted by クチコミ探し