最新記事
カテゴリーアーカイブ
11月の人気記事ランキング
タグクラウド
プロフィール
美少女フィギュアのアフィリエイターさんの画像
美少女フィギュアのアフィリエイター
アフィリエイター。おもにホビーの物販アフィリエイトをしています。いつか自分の土地を手に入れて、そこに自分の美少女フィギュア専門店と無料ギャラリーを開業するのが目標です。
リンク集
検索
ファン


広告なし。このブログと同じものがカンタンに5つまで無料で作れます⇒ ファンブログはこちら

2023年04月08日

ファンブログにヘッダー画像を設置する方法。

20230408_215526.jpg

美少女フィギュアのアフィリエイターです。

お待たせしました。ファンブログのヘッダー画像(トップ絵)を設置する方法をお教えいたします。

そもそも、なぜブログにヘッダー画像が必要なのか。

・読者が一目で何のブログがわかる
・見た目がよい
・自分のブログに惚れる


といったメリットがあります。

反対に「ブログのテーマや内容と無関係なヘッダー」でもないかぎり、デメリットは少ない でしょう。

人は見た目が9割 という書籍が売れたのは記憶に新しいですよね。そういうことです。

では始めましょう。

20230408_202808.jpg

まずはパソコン(PC)のヘッダー画像を用意します。

サイズは横1000px、縦は200〜300pxが良いでしょう。

画像は横長かつ背景が白系であれば、自分で撮影したものでかまいません。

背景を白系にすると黒文字のブログタイトルが読みやすくなります。

20230408_204418.jpg

画像管理で用意した画像をアップロードします。

赤く囲んだ「タイトル」をクリックします。

20230408_204414.jpg

別ウィンドウで上の画面が開きます。「元ファイル」のURLをクリックします。

20230408_205318.jpg

黒い画面のURLをメモする、またはコピーしておきます。

このURLは後で使います。

20230408_202419.jpg

次にデザインを選びます。

デザイン→シンプル(カスタム向け)を選びます。おススメはカスタム向け01(右カラム)です。

20230408_210046.jpg

CSSを編集します。

デザインから「デザイン設定」をクリックし、赤い線で囲んだCSSの欄の「編集」をクリックします。

20230408_211304.jpg

CSSを下がっていくと「ヘッダー」のプログラムがみつかります。

赤い線をひいた「background-color:#ffffff;」を削除します。

その空白に

background:url(さきほどメモまたはコピーした画像のURL) left top no-repeat;

を張り付けてください。

20230408_213413.jpg

()かっこ内にさきほどメモまたはコピーした画像のURLを張り付けることを忘れずに。

あとはプレビューして、画像の高さと横幅を調整します。

画像の高さは赤線で囲んだpadding:20pxの数字を110pxや130pxに変更します。

横幅は900で調整してみました。

ペタリ。

20230408_213411.jpg

背景色が暗いため、ブログタイトルやブログ説明文は黒文字でなく白文字でも良いかもしれません。

20230408_215528.jpg

上の赤い線がブログタイトル、下の線がブログ説明文です。

333333と000000を両方とも白の「ffffff」に変更しました。

20230408_215526.jpg

いかがでしょうか。

慣れるまでは時間もかかりますが、慣れれば15分もかからずにヘッダー画像が設置できるようになります。

ヘッダー画像(トップ絵)はサイトの顔。

あなたのファンブログを素敵にカスタマイズしてください。

アフィリエイトに最適な無料ブログはA8.netのファンブログ



この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/11934938
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
Build a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: