「ストーク」のカスタマイズを解説します。
ストークでブログを作る | カスタマイズ 1 サイト基本情報 サイトカラー設定 の続き カスタマイズ2 になります。
サイトロゴ・アイコン / グローバル設定 / トップページ設定 / 記事一覧ページ設定 の4つの設定内容について解説します。
サイトロゴ・アイコン
ロゴ画像をアップロード・・・ ロゴ画像を設定します。
今回アップロードした画像は形式 = gif サイズ 32 × 32 ピクセルです。
グローバル設定
ヘッダー下お知らせテキスト・・・ 赤枠へ入力した文字が表されます。文字色はサイトカラー設定から変更可能です。フォントやサイズの変更はできません。
ヘッダー下お知らせテキスト・・・ 入力したURLへ赤枠からリンクができます。
お知らせ背景色・・・ お知らせバーの色が選択できます。
〔ヘッダー〕ロゴレイアウト・・・ 左側に配置を選択すると赤丸部分にロゴが配置されます。
・左側に配置― ロゴが左側の赤丸の位置に表示されます。
・中央に配置― ロゴが中央の赤丸の位置に表示されます。
〔ヘッダー〕背景設定・・・ コンテンツ幅を選択すると赤枠の大きさで表示されます。
・コンテンツ幅― ヘッダーが赤枠の大きさ(コンテンツの幅)で表示されます。
・フルサイズ(横幅いっぱい)― ヘッダーが赤枠の大きさ(横幅いっぱい)で表示されます。
〔全体〕メインカラム表示位置・・・ メインカラムの位置が設定できます。
・メインカラム左側(デフォルト)― 赤枠の位置にメインカラムが表示されます。
・メインカラム右側― 赤枠の位置にメインカラムが表示されます。
トップページ設定
英語表示テキスト(大テキスト)・・・ ブログ名を入力します。フォントやサイズの変更はできません。文字色の変更はこの設定画面でもできますしサイトカラー設定からも変更可能です。
日本語表示テキスト(小テキスト)・・・ ブログ内容等の補助的説明を入力します。フォントやサイズの変更はできません。文字色の変更はこの設定画面でもできますしサイトカラー設定からも変更可能です。
ヘッダー背景画像・・・ ヘッダー背景画面へ画像を設定することができます。ここで設定した画像は、形式 = .Png サイズ = 4000×3000 ピクセルです。
ヘッダー背景サイズ・・・ ヘッダー背景サイズは4種類の設定が可能です。ここで使用しているチョウの画像は 形式 = .Png サイズ = 4000×3000 ピクセルです。
各サイズを設定した時の変化がわかるようにしました。
・縦横AUTO― 元の画像サイズは 4000×3000 ピクセル です。画像全体の青枠の部分が表示されています。
・横100％― 元の画像サイズは 4000×3000 ピクセル です。画像全体の青枠の部分が表示されています。
・縦100％― 元の画像サイズは 4000×3000 ピクセル です。画像全体が表示されています。
・サイズ調整しない― 元の画像サイズは 4000×3000 ピクセル です。画像全体の青枠の部分が表示されています。
ヘッダー背景サイズの、サイズ調整しない場合の最大サイズを調べてみました。
調整なしで下ように表示されるサイズは 1400 × 480 ピクセルです。上部はヘッダーで少し見えなくなります。下部は少し切れて見えなくなります。このサイズと見えなくなる部分を意識して画像を撮影したり加工すると良いでしょう。
元の画像は下のような形です。ヘッダー背景の最大サイズは 1400 × 480 ピクセル 程度になることがわかりました。
画素数の高いスマホやデジカメで撮影した画像は、パソコンのモニターの解像度(フルハイビジョンモニターは207万画素)で表示されますから、モニターの解像度より画素数の高い画像は見た目は同じになります。データー容量が増えてブログが重くなって動作が悪くなってしまいます。ブログで指定された画像サイズに近い解像度で撮影をするか、画像編集ソフトなどでWEB用データに変換することが望ましいです。詳しくは 〝ブログに最適の画像サイズを考える〟 ご一読ください。
ヘッダー背景繰り返し・・・ ヘッダー背景繰り返しは4種類の設定が可能です。ここで使用しているチョウの画像は サイズ 4000×3000 ピクセル です。ヘッダー背景サイズは縦100％に設定してあります。
・繰り返し表示― 画像はサイズ 4000×3000 ピクセルでヘッダー背景サイズを縦100％に設定した場合は横方向に繰り返されます。
・横方向に繰り返し・縦方向に繰り返し― 元画像のサイズと形状、ヘッダー背景サイズでの設定によって背景の繰り返しが有効になり表示ができます。(表示例はありません。)
・繰り返ししない― ヘッダー背景サイズで設定した状態のままで表示されます。
ヘッダーボタンURL・・・ リンクさせたいURLを入力するとヘッダーボタンをクリックしたときに移動できるようになります。
ヘッダーボタンテキスト・・・ 文字を入力するとヘッダーボタンに表示されます。フォントやサイズの変更はできません。
ヘッダーテキストカラー・・・ ヘッダーテキストで入力した文字の文字色の設定ができます。文字色の変更はこの設定画面でもできますしサイトカラー設定からも変更可能です。
ヘッダーボタンテキストカラー・・・ ヘッダーボタンテキストで入力した文字の文字色の設定ができます。
ヘッダーボタン背景カラー・・・ ヘッダーボタンの色の設定ができます。
テキストレイアウト・・・ 赤丸部分の位置が設定できます。 中央よせ・左よせ・右よせの3つから選択できます。(下の表示例は左よせの設定になります。)
〔PC〕トップページ記事レイアウト・・・ 4種類の記事の表示方法を選択できます。
・シンプル― 横幅いっぱいに記事が表示され、縦に並びます。(横線が記事の間に入ります。)
・カード型― 横に2つの記事が表示され、縦に並びます。(横線が記事の間に入ります。)
・マガジン型― 横に2つの記事が表示され、縦に並びます。(横線が記事の間に入りません。)
・ビック― 横幅いっぱいに記事が表示され、縦はシングル設定の3倍の大きさで表示されて並びます。(横線が記事の間に入りません。)
設定の名称と場所の関係がわからず、何処の色が変わったのか、文字入力しても反映された場所が何処なのか探しても見つけられない事があり苦労しました。
少しでもわかりやすく解説されていればと思います。
コメントを残す