メッセージボード設置後

当ブログリニューアルプロジェクト（笑）も、ようやくメッセジボードの設置が完了しました。

サイドメニューとのデザインのアンバランスさが素敵です。とっとと終わらせたい気持ちもあるのですが、こうしてパーツパーツでやっていると書きたいことや、やりたいことが増えてきて時間がかかりそうです。

メッセージボードを使って、難易度の違う3つの講座（テーマ）に、それぞれ★で3段階表示をしてみました。トップページには各3記事の掲載ですので、いままでの講座の評価をして一覧をつくりたいなーって、思ってます。

読者登録、すごくうれしいもんですね

当ブログに読者登録いただきましたみなさま、本当にありがとうございます。

仕事のあいまに、私なりに一生懸命記事を書いているつもりなのですが、いつも「これで分かってもらえるだろうか？」など悩みが尽きません。あれも書きたい、これも書きたいと思いつつも、なかなか思うようにすすまなかったりするとき、読者登録の際にいただけるメッセージが大きな励みになっております。

ほんとうにありがとうございます！

内心では、「こんなテーマを扱って欲しい」というリクエストをいただきたいと思いながらも、「ちゃんと応えられるだろうか？」と思うと躊躇するところもあり積極的に意思表示はしておりいませんが、もしリクエストをいただけるのでしたら大歓迎です。

時間はかかるかも知れませんが、記事にして回答させていただきたいと思います。

活字中毒がよろこぶブログ

あ、それと同時に、私、活字中毒なんですよね。所有している小説本なんかは、もう全部、おそらく最低3回以上読んでしまっていると思います。いまは新田次郎の『珊瑚』。おそらく4回目かと。音楽でも食でも何でもそうだんですが、作家主義みたいです。気に入ると、片っ端から読み、聴き、食べる＾＾；

僭越ないいかたになるかも知れませんが、登録いただいたみなさんのブログには共通してて「魂がコメられているなぁ」と感じいっております。まだすべては読ませていただけておらず、読んでいない蔵書が増えたような気分。これも二重にうれしいんですよね。

当ブログは技術的な話が多くなってしまいますので、眠たくならないか？　というのも大きなテーマだと思っています。ですから、「読者になっていただけたぶん筆力を鍛えないと」いけないなという目標もできました！

メッセージボードのCSS設定のリセット方法

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

当ブログのメッセージボードを新デザイン用に書き換える用意をしている際、メッセージボード上下の罫線、周囲のスペースの設定を変更する必要に迫られました。

編集可能CSSには、特にコメントも書かれておりませんので、どうすれば罫線を消せるか、スペースを調整できるかについて説明したいと思います。

メッセージボードの初期設定

編集可能CSSがページに読み込まれる前に、複数のアメブロの共通設定用CSSが先に読み込まれて基本的な設定が行われます。罫線とスペースの設定は、そのCSSのうちの一つでで次のように行われています。

.skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#fff;
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:16px 30px;
}

リセット方法

罫線を消し、領域周辺のスペース（padding）をリセットする（ゼロにする）ためには、編集可能CSSに以下の記述を追加すればOKです。

.skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */
	border:hidden;
}
.skinMessageBoard3{
	padding:0;
}

paddingについては、適宜調整していただければよいと思います。

いっぱい食べられる幸せをかみしめたい！

ブログネタ：いっぱい食べると満足？後悔する？参加中

私は満足派！

いっぱい食べるには、必ず理由があるもんですよね。少々大げさですが、人生を振り返ってみても…

育ち盛りなんで、いくらでも食べられる！
あまりに美味しくて、食が止まらない！
いっぱい食べられるお金がある！

幸せなことばかりなんです。

私の場合、ストレスを食べることでまぎらわすタイプではなく、アルコールで解消するタイプなので、飲み過ぎて後悔するってのは、そりゃー、あんた、数えきれないほど…

人、それぞれなんだと思いますが、食べられること、おいしいものを食べさせていただけることに、感謝、感謝です＾＾

いっぱい食べると満足？後悔する？

満足
後悔

超簡単なグローバルナビ設置方法

難易度表示付き記事一覧はこちらです

当ブログのグローバルナビは幾分複雑になってしまいましたので、「やってみよう！アメブロカスタマイズ」の記事として、当ブログの簡略版ナビの設置方法を解説したいと思います。

画像を一切使わず、テキストだけで構成しますので、

追加・修正が簡単です！
各メニューの幅を意識する必要がありませんので、面倒な幅計算も不要です！

とりあえず、設置してみる

手続きは簡単。編集可能CSSの最後とフリースペースに所定のソースコードを貼り付けるだけです。まずやってみて、ご自身のブログの雰囲気にあうかどうか確かめられた後に、実際のリンク設定や、色や文字サイズなどの調整をされてもよいのではないかと思います。

手順1：CSSの最後に下記のソースを加える

/* ■グローバルナビの設定■ */
/* -----clearfix----- */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* -----位置指定の起点ボックス----- */
.skinContentsArea{
	position: relative;
	padding-top: 58px; /* グローバルナビの高さ38ピクセル＋その下のマージン20px */
/* 注 ベースのcssにwidth:980px;の記述有り */
}

/* -----グローバルナビ設置部分----- */
div#gnav {
	position: absolute;
	top: 0;
	left: 0;
	width: 980px;
	margin: 0;
	padding: 0;
	border-top: 1px solid #000000; /* ←グローバルナビ上部ライン色 */
	border-bottom: 1px solid #000000; /* ←グローバルナビ下部ライン色 */
}
#gnav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: #000000; /* ←背景BLACKの場合 */
}
#gnav ul li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	font-size: 110%;
	font-weight: bold;
}
#gnav ul li a {
	display: block;
	float: left;
	height: 28px;
	margin: 0;
	padding: 8px 20px 0 20px;
	border-right: 1px dotted #666666; /* ←各メニューの仕切り線 */
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}
#gnav ul li a:link,
#gnav ul li a:visited {
	color: #ffffff;
	text-decoration: none;
}
#gnav ul li a:hover,
#gnav ul li a:active {
	background: #666666; /* ←オンマウスした時のメニュー背景の色 */
	color: #ffffff; /* ←オンマウスした時の文字の色 */
	text-decoration: none;
}

カスタマイズ対象の部分を黄色にしてコメントをつけています。後ほど説明しております。まずはこのまま貼り付けて確認されてみればいかがでしょうか？

それでご自身のブログにあわない部分があったら、黄色い文字の部分を調整しながらトライアンドエラーを繰り返されればよいのではないかと思います。

clearfixクラスが不要な方は削除して適宜HTMLソースを調整してください（←分かる方のみ）。

CSSに上記ソースを付け加えて更新した時点では、まだ大きく見た目は変更されません。

手順2：とりあえず設置確認する

とりあえずの確認が不要な方は、次にすすんでください。

フリースペースを使用して、グローバルナビのソースコードを設置します。すでにフリースペースを使用されている場合は、ソースを貼り付けて更新した段階でグローバルナビ設置が完了します。

まだフリーエリアを使用されていない場合は、まず「クイックリンク＞フリースペースの編集」でページを開き内容を編集します。［保存］ボタンを押した後、編集エリア上部の「サイドバーの配置」をクリックして、任意の場所に「フリースペース」を配置すれば設置が完了します。

確認用に一度設置してみようという方は、下記のソースコードをそのまま貼り付けてみてください。メニュー1～メニュー5までの5つのメニュー設置がされた状態を確認できます。

改行をすべて削除して貼りつけるようにしてください。

<div id="gnav" class="clearfix"><ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
<li><a href="">メニュー4</a></li>
<li><a href="">メニュー5</a></li>
</ul></div>

手順3：リンク設定したグローバルメニューを設置する

実際にメニューとリンク設定をして確認する場合は、下記のソースの黄色い文字部分を編集してください。

<div id="gnav" class="clearfix"><ul>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
</ul></div>

こちらも同様に改行を削除する必要がありますので、編集したファイルを一度保存しておいてから改行コードを削除するのがよいかと思います。

メニュー数を増やす場合は、<li><a href="[リンク先URL]">[メニュー名]</a></li>をコピー＆ペーストして行を増やして編集してください。

もし表示が崩れたりして、一時的に外したいときは、フリースペースをサイドバーの配置から外すか、フリースペースのペーストしたソースコードを削除すればOKです。

手順4：カスタマイズする

CSSコードの黄色い部分を編集することで、背景の色、文字の色、仕切り線の形式や色、オンマウスしたときの背景の色を変更することができます。是非チャレンジしてみてください！

だけど、メニュータイトルの文字数が多いときは、設置できる数が少なくなっちゃいますね。私の場合はメニュー名を短縮して使っています。ご参考までにHTMLの一部ソースはこんな感じです。

<li><a href="http://ameblo.jp/jalan2-net/themeentrylist-10047047386.html" 
title="ちょっと難しいカスタマイズ">ちょっと難しい</a></li>

title属性をつけてごまかしております（笑）。Firefoxだとポップアップでテキストが表示されます。

ちょっとややこしいのでCSSの文字を黄色くしなかったんですが、メニューの文字サイズを調整するという手もあります。

CSSにfont-size: 110%;という部分があると思いますが、ここです。その場合は、文字の表示位置を調整する必要があります。

#gnav ul li a {
	display: block;
	float: left;
	height: 28px; /* ←調整対象 */
	margin: 0;
	padding: 8px 20px 0 20px; /* ←8pxの部分が調整対象 */

たとえば、font-size: 100%;とすれば、メニューの文字がナビ内で上寄りに表示されるようになると思います。その場合は、8pxを10pxに変更するなどして好きな見栄えに調整してください。

そのとき一緒に、その上の「←調整対象」と書いている部分の調整もお忘れずに！

いま、28＋8＝36です。10pxにする場合は、合計36になるように26と変更してくださいませ。

今回のサンプルをそのまま実装したページを、記事執筆時点では見ていただくことができます。試験用に使っておりますので、いつまでご確認いただけるかはわかりませんが、こちらです。

アメブロHTMLのレンダリングモード

アメブロのDCTYPE宣言は、

<!doctype html>

レンダリングモードは標準モードとなるはずであるが、念のために確認しておく。

←100px→

1つ目が画像、2つ目が確認用の擬似3重ボックス、3つ目がW100×H100サイズのボックスに、padding、margin各10ピクセル指定し、10pixelのボーダーをつけたもの。

期待通りの表示がされている。2・3番目のボックスのソースは、以下のとおり。

<div style="background:#fc0; width:140px; height:140px; ;padding:10px;">
<div style="background:#000; width:120px; height:120px; ;padding:10px;">
<div style="background:#fff; width:100px; height:100px; ;border:10px solid #f60;">
←100px→</div></div></div>

<div style="width:100px; height:100px; margin:10px; padding:10px; border:10px solid #000;">
←100px→</div>

ちなみに、アメブロの記事編集画面では残念な結果になっている（笑）

グローバルナビ設置前の状態

ヘッダ画像に続いて、グローバル前設置前の状態をアップしておきます。

「多分、できるだろう」という感じで、あまり深く検討せずデザイン設計をしていましたので、実際にグローバルナビを設置してみて少し方向転換することにしました。

結構、ややこしいこともやっていて、CSSはちょっと複雑になってしまいました。当初「やってみよう！」のほうでの記事公開を考えていましたが、難しくなりそうですので、「少し難しい」のほうでの書こうと思います。

「やってみよう！」のほうでの記事は、将来できるだけ単純化した内容で考えたいと思います。

ブログメインビジュアルを完全画像化する

難易度表示付き記事一覧はこちらです

背景画像を設定したのに引き続き、当ブログ新デザインへの移行作業第2弾！

右の画像のグローバルナビ（黒い帯）より上の部分を設定したいと思います。まず検索窓はなしの状態で、ブログタイトル部分の背景画像を差し替えます。

修正前の状況はこちら。このデザインにするときのことは、「ヘッダー画像を入れてみました」で説明しています。タイトル文字・ブログ説明文字を活用しつつ背景に画像を置いていましたが、この部分を完全画像化します。

今回の作業ステップは、大きく分けると4つ。

最上部バナー背景を白く塗りつぶし、下にボーダーを引く
タイトル部分を画像に差し替え、文字タイトルとブログ説明を見えないようにする【非推奨】
文字タイトルからのトップに戻るリンクがなくなってしまうので、画像全体からトップにリンクするような設定を行う【非推奨】
タイトル画像のグラデーションを、ページ幅全体に適用させる

最上部バナー背景部分の設定

バナー掲載部分に設定を行いたい場合は、div.headerBnrAreaに対して設定を行います。この部分、元々は下記の設定がされています。

.headerBnrArea{
	padding-bottom:15px;
}

この設定を、編集可能CSSで上書きします。/* (3-2) ブログヘッダーの部分に下記のような記述を加えればよいでしょう。

/* headerBnrArea ヘッダーバナーエリア */
.headerBnrArea{ /* ←padding-bottom:15px;の設定あり */
	background: #ffffff;
	border-bottom: 1px solid #d8e6d3;
}

背景を白（#ffffff）に設定し、エリアの下に幅1ピクセルの薄いボーダーライン（#d8e6d3）を引きました。

ブログメインビジュアルの設定

【非推奨】と書いている2つの設定を行います。

ブログタイトル文字と説明文を見えなくして、タイトルを完全画像化します。ただ、このやり方はSEO上好ましくないとされています（参考：google WEBマスター向け公式ブログの記事）。アメブロのシステム上、同じことをしようとしますとSEOでのマイナスの可能性を完全回避できる方法はないと考えますので、見た目を重視してこの方法を取ることにしました。

メインビジュアルの画像幅は980ピクセルありますので、画像フォルダは使用せず、スキンCSSの編集ページ上部にある「ブログデザインヘッダ・背景用画像の追加」で画像をアップしておきます。

編集可能CSSに、下記の記述があります。

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

ここを下記のように編集します。

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
	height: 147px; /* ←画像の高さ＋margin-bottomの値 */
	margin-bottom: 20px; /* ←ヘッダー画像とその下に開けたいスペース */
	background: url('画像のパス') center top no-repeat;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

次に、画像全体にホームに戻るリンクを設定します。設定の方法は、

タイトル文字の高さを画像と同じ高さにして、文字自体は見えない場所に移動する
ブログ説明の高さをゼロにして、文字を見えない場所に移動する

の2つ。高さが関係してきますので、高さに関する設定全体を操作しなければならず、ちょとややこしいです。設定対象は下記の部分。

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}


/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
}


/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{}

この部分を下記のようにします。

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
	padding: 0;
}


/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
	padding: 0;
}
.skinTitle{ /* ←新たに加えた設定 */
	display:block;
	text-indent:-9999em;
	height:127px; /* ←画像の高さ */
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{
	height: 0px;
	text-indent: -9999em;
}

ブログタイトルからのリンクに画像と同じ高さを与え（.skinTitleの設定）、その他の高さ関係の設定をすべてゼロにしています。文字はtext-indentで、9999文字（em）分左側に配置することで見えなくしています。

なお、画像全体からホームにリンクさせるやり方は、見た目にそうだとわかりませんので、ユーザーにとっては迷惑な話だと思います。

現在暫定的にこうしていますが、これについては後に、グローバルナビを設置して「HOME」リンクをつける際に改善したいと思います。

タイトル画像のグラデーションを、ページ幅全体に適用する

ヘッダ画像のグラデーションを、横方向にも適用させます。先ほど画像を設定したdiv.skinHeaderAreaは、div.skinHeaderFrameというボックスに入っていますので、このボックスに対して背景画像を設定します。あらかじめ画像フォルダに画像を登録し、画像パスを取得しておきます。

そして、先ほど設定した/* skinHeaderArea ブログヘッダー980pxエリア */の上に、次の記述を加えます。

/* skinHeaderFrame　ブログヘッダーのいちばん外のエリア */
.skinHeaderFrame{
	background: url('画像パス') left top repeat-x;
}

画像の幅は1ピクセルで、高さはメインビジュアルと同じ。それを横方向（x軸方向）に繰り返し表示させています。

これでヘッダー部分の設定は完了です。

ブログタイトル画像差し替え直前

当ブログ新デザインへの移行作業第2弾、「ブログメインビジュアルを完全画像化する」を行う前の姿です。

背景に使っているのは、アメブロのHTMLの構造分析を行った際の概念図。使っている画像からして難しそうな感じがします。少しでもわかりやすくしたいとは思っているのですが、いまはまだ、随分硬い印象をもたれているのではないかと思っています。

それが少しでも改善できたらいいなぁ、と。

背景画像を使う場合の注意点と設定方法

難易度表示付き記事一覧はこちらです

当ブログデザインリニューアルに向け、まず背景の設定からしてみたいと思います。背景画像の設定方法については、ちょっと難しい！アメブロカスタマイズのほうで「背景画像設定の考え方」という記事で解析を行なっていますので、一緒にご覧いただけるとうれしいです。あ、ページ幅は最小1100ピクセルですけどね（笑）

新背景画像の特徴

新デザインに引く背景の特徴は、

ヘッダバナーエリアとそれ以下を分離して見せる
繰り返しパターン画像を使う
コンテンツ部分と背景部に境界を作成する

の3点。ヘッダーバナーエリアとの分離については、ヘッダ画像を入れる際に修正しようと思いますので、最後のコンテンツ部と背景部の境界というのが、今回の大きなテーマになります。

背景を置く際に気にしたい点

アメブロのCSS編集可能デザインのコンテンツ部分の幅は980ピクセルあります。そして、ワイドサイドメニューの幅は300ピクセル。ワイドサイドメニューを使う場合、右あるいは左に配置することになるのですが、留意しておいたほうがよい点は、幅いっぱいを使ったデザイン前提で考えられているという点です。

サイドバーに配置する各パーツの幅は300ピクセルで、これはCSSの編集で狭くできなくもないのですが、広告バナーサイズの横幅も300ピクセル。こちらは、それ以下にしようがありません。

ですのでたとえば、ページコンテンツを白、背景を黒に設定したとすると、ワイドサイドメニュー境界＝背景との境界ということになり、デザイン的には少し唐突感が出たり、違和感を感じさせることになりかねません。

それを回避するためには、ページ幅980ピクセルの両側に一定のスペースを置くのがいちばんよさそうに思います。

新デザインの背景画像は、両側に20ピクセルのマージンをもたせて、ページコンテンツの幅980ピクセルを加えた合計1020ピクセルを白で塗りつぶし、その両側に繰り返しパターンを置いた画像を使用することにしました。

背景画像の幅は2400ピクセル！　かなり解像度の高いディスプレイにも対抗できるようにしました（笑）

画像をアップロードする

使いたい背景画像ですが、幅が800ピクセルを超えているので画像フォルダからアップロードすると、強制的に幅が800ピクセルまで縮小されてしまいます。

画像サイズの制限があるとは書かれていませんので、画像フォルダを使用する際は注意が必要です。

こうした場合は、スキンCSSの編集画面の上にある「ブログデザインヘッダ・背景用画像の追加」を使います。5つまでしか使えませんので、ご利用は計画的に（笑）。

全体の基本レイアウトはセンタリング

見れば分かりますが、アメブロのページはセンタリング設定です。ブラウザをいっぱいいっぱいに広げると、ページはその真中に表示されるように設定されています（ただ、最低のページ幅は1100ピクセルに設定されていますので、ブラウザの閲覧領域がそれ以下だと右側が隠れて表示されます）。

1100ピクセルの設定は下記のように記述されています（編集可能CSSにある設定ではありません）。

body {
	min-width:1100px;
}

mini-widhtというのは、文字通り最低の幅という意味です。ちょっと古いブラウザでは対応していないものもあったのですが、今の各ブラウザの最新バージョンでは対応してるようです。正確にはどうなのか、じゃまくさいので私は調べませんが（笑）

そして、センタリングに関する設定は下記のように行われています。よく分からない方は、「あ、そうなの」と思っておいていただいてもまったく問題ありません（こちらも編集可能CSSでの設定ではありません）。

.skinHeaderArea {
	width:980px;
	margin:0 auto;
	overflow:hidden;
}
.skinContentsArea {
	width:980px;
	margin:0 auto;
	padding-bottom:30px;
	overflow:hidden;
	zoom:1;
}

width:980px;というのが幅の設定です。そして、センタリングを規定している部分が、margin:0 auto;です。

.skinHeaderAreaというのが、最上部のバナー部分、.skinContentsAreaがその下のページの部分に対する設定を意味しています。margin設定に関しては、「サイドメニューをカスタマイズする！」でちょっと詳しく書いています。上下0ピクセル、左右は自動（auto）。幅980ピクセルの左右には、自動的に余った幅が均等に割り当てられるという寸法です。

ですので、背景画像も画面の中央に置き、縦方向に繰り返して表示されるように設定します。先にも書きましたが、真ん中の1020ピクセルをページ背景用の白で塗りつぶし、その両側に背景模様が配置された画像です。

ブラウザの全画面に対して背景を設定したい場合は、div.skinbodyという名前のボックス（箱）に対して行います。編集可能CSSにも下記のようにコメントつきで書かれています。

/* (3-1) ボディ（全体）
--------------------------------------------*/


/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */

この部分を、こうします

/* (3-1) ボディ（全体）
--------------------------------------------*/


/* skinBody ボディ */
.skinBody{
	background: url('画像のパス') center top repeat-y;
}/* ←ブログ全体に背景を敷きたいとき */

設定の解説

center top repeat-yの部分は順番に、横方向の位置、縦方向の位置、背景画像の並び設定をしています。他にどんな指定が可能か？　なんて興味をもたれた方は、「CSS　background」とかで検索してみればよいと思います。この記述の意味は、「横方向（x軸）は真ん中（center）、縦方向（y軸）は上（top）に画像を置いて、それを、縦方向（y軸）に繰り返す（repeat-y）」ということになります。

ここまで何となく分かれば、この記事の内容についてはOKです！

背景画像を設定する前の、当ブログの画像を記録しておきました。

<< 前ページ次ページ >>

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい！」そんな方の思いにも答えられるサイトを目指しています

メッセージボード設置後

読者登録、すごくうれしいもんですね

活字中毒がよろこぶブログ

メッセージボードのCSS設定のリセット方法

メッセージボードの初期設定

リセット方法

いっぱい食べられる幸せをかみしめたい！

超簡単なグローバルナビ設置方法

とりあえず、設置してみる

手順1：CSSの最後に下記のソースを加える

手順2：とりあえず設置確認する

手順3：リンク設定したグローバルメニューを設置する

手順4：カスタマイズする

アメブロHTMLのレンダリングモード

グローバルナビ設置前の状態

ブログメインビジュアルを完全画像化する

最上部バナー背景部分の設定

ブログメインビジュアルの設定

タイトル画像のグラデーションを、ページ幅全体に適用する

ブログタイトル画像差し替え直前

背景画像を使う場合の注意点と設定方法

新背景画像の特徴

背景を置く際に気にしたい点

画像をアップロードする

全体の基本レイアウトはセンタリング

設定の解説