Luxeritas カスタマイズ(外観) サイト情報/サイトアイコン

2017/09/26Luxeritas カスタマイズ(外観)

サイトの細かな部分のカスタマイズをメニューから簡単にできるのがLuxeritasの良い所です。サイトアイコンって無くても良い部分ではありますけど、試しに付けてみるとサイトとして完成度が上がります。気分的なものですけど、ふとブラウザで見た時にオリジナルのマークがURLに付いているのってサイトのイメージが良くなります。小さいので無くても誰も困らないものですけどね。一度作成してしまえば変更する必要も無いので暇な時にでも作ってしまいましょう。

簡単に作成を助けるサイトもあるようです。あまり作り込んでも小さい表示ですからそういうサイトを利用するのも全然構わないものだと思います。作り込んでアレコレと考えて実際に見ると詰め込み過ぎると何なのか余計にわからなくなるので出来るだけシンプルに文字の一つとか画の一つでも分かるようにすることが重要です。
[toc]

ブラウザのサイトアイコン作成

「Luxeritas」→「カスタマイズ(外観)」→「サイト情報/サイトアイコン」で、できること

ブログやサイトの話題、テーマに少し合わなかったり、自分の好きな色に変えたい場合、子テーマのcssを変更していけばいいらしいのですが、私はスタイルシートの知識が余り無いので、すでに備わっている機能で何か変更できないか見てみようと思いました。まずサイトアイコンを作成して設定できるようなので試しに作って設定します。

サイトアイコンとは何か?

サイトアイコンはファビコンとも言うようです。
ブラウザで各サイトを開くとそのタブで何が表示されているのかわかるように画像と文字が出ます。
xserverwordpress91_1

ブラウザがGoogleとYahooを開いています。それぞれGoogle、Yahoo!JAPANという文字列の左に「G」「Y!」というロゴ画像があります。それうしたロゴ画像をサイトアイコン、ファビコンと言います。

LuxeritasテーマWordPressブログにサイトアイコン取り付ける手順

xserverwordpress88

「Luxeritas」親テーマと子テーマがインストールされていて、子テーマ有効化されています。カスタマイズしたい子サイトのダッシュボードを開くと左側のメニューに「Luxeritas」メニューがあります。クリックするとさらにメニューが開きます。

xserverwordpress89
「カスタマイズ(外観)」をクリックします。

xserverwordpress90
「サイト情報/サイトアイコン」をクリックします。

xserverwordpress92
上方に大きく
「カスタマイズ中
サイト情報/サイトアイ…」となっています。
一番下には「画像を選択」というボタンがあるのでクリックします。

xserverwordpress96
「画像を選択」ウィンドウが表示され「ファイルをアップロード」タブと「メディアライブラリ」タブがあります。すでにサイトアイコン用画像がアップロードされていればメディアライブラリからその画像を選択します。

xserverwordpress100

「メディアライブラリ」タブで画像を選択すると画像の外側に枠が表示されて右上に「レ点」がつきます。

選択した画像は「添付ファイルの詳細」として右側メニューに表示されます。通常の画像とは違うので「代替テキスト」など設定項目記入に意味があるのかはわかりません。
xserverwordpress102
試しに「タイトル」→海、代替テキスト→山と記入して「選択」ボタンをクリックして有効化してみました。このサイトのトップページを表示させてマウスをそのタブのサイトアイコンに合わせてみても「海」「山」も表示ないですね。サムネイル扱いでその画像の内容までは出ないので、特に設定はいらないですし意味は無いと今のところ判断しました。もちろん、なんらか記入しても問題ありません。

とりあえず正しいを選択して、右下にある選択ボタンをクリックすると設定完了です。

サイトアイコン設定してみた感想

デザインはシンプルにしないと表示が小さいので分かりません。わかりやすさと目立ちやすさを考えて好感を持たれてサイトの内容も感じさせることができたら、かなり意味が出てくると思います。サイト作成者側としてのサイトアイコンはタブで自身のサイトを何度も確認、表示されるでしょうから親しみある方がいいでしょうね。好きな配色、デザインなど。

Lexeritasテーマでのサイトアイコン

「ファイルを選択」ボタン下にあるように最大サイズ1MBで推奨画像サイズ512×512でブラウザのタブのマークに使うのですが割と大きめの画像を「Luxeritas」は推奨しています。その大きさでアップロードするとデータベースで小さい画像も自動的に作ったときに鮮明になるということでしょうか。もちろん推奨ですからそれ以外のサイズでも可能だと思います。512×512ですと割といろいろデザインしがちですけど、実際の表示はタブのマーク程度ですから色とかポイントとなる画像、字を一つに絞るか全体で一つのデザイン化させるなどわかりやすい方が良いと思います。最初に私が作ったサイトアイコンはちょっと作り過ぎました。小さく表示されるとごちゃごちゃしてマイナスなので簡略化しました。簡単過ぎて目に付かない感じではあります。わかりやすいと印象度はどうなのか?目に付きやすいのか?素通りするのか?判断難しいです。

設定、カスタマイズ変更の保存について

「<」 の部分で「「サイト情報/サイトアイコン」」クリックしたページ、つまり手前のページに戻ります。
xserverwordpress93
変更設定をして保存しないで「<」をクリックして前のページに戻ると変更はされません。

xserverwordpress95
変更してその変更を有効化するときには「保存して公開」ボタンをクリックする必要があります。「保存して公開」クリックすると変更が有効化されます。

サイトアイコン変更

サイトアイコンを変更するに至った経緯

いったん作ったサイトアイコンも気に入らなければすぐに変更可能です。
「Luxeritas」→「カスタマイズ(外観)」→「サイト情報/サイトアイコン」クリックして現在使用しているサイトアイコン画像が左側のメニュー下に表示されています。

xserverwordpress98
いったんサイトアイコン設定しましたが、野原に掲示板立てて「W」の文字が書かれているわけですが、ブラウザのタブで見るとそこまで認識できないですし、無駄に柱が「W」から伸びています。不格好でこれはいただけません。と言うわけでYahho!、GoogleみたいにW一文字にしました。真似したわけでも無いですけど、表示が小さいのでどんどん簡略化してこうなっていきました。

サイトアイコン変更手順

xserverwordpress97
「Luxeritas」→「カスタマイズ(外観)」→「サイト情報/サイトアイコン」ページ左メニューの下の方にすでに設定されたサイトアイコンが表示されています。
その下の「画像の変更」ボタンをクリックします。
「画像を選択」ウィンドウが表示されますので「ファイルをアップロード」タブで変更したい画像をアップロードして、(あるいはすでにアップロードしてある画像を選択するなら)「メディアリブラリ」に変更したい画像を選択しまして、右下の「選択」ボタンをクリックで変更できます。
xserverwordpress101

終わりに

「Luxeritas」ダッシュボード→「カスタマイズ(外観)」→「サイト情報/サイトアイコン」メニューでは次の3つの変更ができます。説明した「サイトアイコン」以外に
・サイトのタイトル
このサイトですと「クチコミ・ウェブサイト.com」
・キャッチフレーズ
このサイトですと「WordPress マルチサイトによるウェブサイト、ブログ投稿」

これらは変更したい場合、記入エリアに書き換えて丈上部の「保存して公開」ボタンをクリックします。

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

Luxeritas270
サイトタイトル変更とサイトアイコンを設定手順説明
Luxeritas271
横幅、記事一覧、パンくずリンク、関連記事とナビ表示
Luxeritas272
タイル型、カード型グリッドレイアウト表示手順説明
Luxeritas273
カラム変更とサイドバーなどの領域分離or結合を選択
Luxeritas274
ヘッダー/フッターのカスタマイズ
Luxeritas275
コンテンツ&サイド枠線とサイドバー幅変更
Luxeritas276
コメント欄の表示or非表示、枠線
Luxeritas277
キャッチフレーズ、ホーム、PAGE TOP変更
Luxeritas278
メタ情報の表示or非表示と配置
Luxeritas279
サムネイル(アイキャッチ)大きさと配置
Luxeritas280
フォントの変更
Luxeritas281
タイトル、記事など文字サイズの変更
Luxeritas282
文字色の編集
Luxeritas284
背景色と枠線色の編集
Luxeritas283
背景とタイトルとロゴ画像挿入による編集
Luxeritas285
パンくずリンクの配置変更と編集
Luxeritas287
ヘッダーナビ(グローバルナビ)編集
Luxeritas288
ヘッダー上の帯状メニュー編集
Luxeritas289
マウスオンアニメーション

Posted by クチコミ探し