アメブロ向上企画書ノート -20ページ目

ヘッダ・タイトル・概要 編



ヘッダ、タイトル、概要ついでにユーザナビのよくある質問です

タイトルを消したい

タイトルを消すとトップページへ戻りにくくなります
リンクや検索から来てトップページ以外から見ている方は多くいます
トップページへのリンクがなくなるとあなたのブログが使いにくくなります
なくなって気にならないのは・・   あなただけです

オリジナルスキンCSSの編集 ヘッド・タイトル3 タレントブログのように画像クリックでトップページに移動できるようにしてください

概要を改行したい

みなさまはヘッドのタイトルの下・・・
概要(ブログの説明)って改行できないから不便だって思っていませんか?

CSS 概要の改行・・・って出来ますか?

タレントブログのようにクリックできるように

タイトルを消すとトップページへ戻りにくくなります
リンクや検索から来てトップページ以外を見ている方は大きくいます
トップページへのリンクがなくなるとその方たちが困ります

http://ameblo.jp/exlink/entry-10078826474.html タレントブログのように画像クリックでトップページに移動できるようにしてください

画像が繰り返してしまうのですが・・

使っている画像が小さすぎます
ヘッダサイズ(横幅)に比べて画像が小さいのでヘッダ部分を埋めるために繰り返して表示されています
CSSでは画像サイズを変更したりは出来ません
画像編集ソフトで表示したいサイズに加工してから使ってください
  グリーン、ブルー、ピーチ、グレイは横幅760px、ベーシックは横幅800pxです

とりあえず繰り返さないで欲しい・・

#header{
background-repeat:no-repeat;/*繰り返さない*/
}

小さいままで真ん中に表示できれば・・
#header{
background-position: center;/*真ん中に表示*/
}

真ん中にしたら周りに変な色が・・・周りの色を変更します
#header{
background-color:#ffffff;/*背景色*/
}
または・・背景色を消しちゃいます
#header{
background-color:transparent;/*背景色を透明*/
}

オリジナルスキンCSSの編集 ヘッド・タイトル1
この記事の中にも繰り返しや周りの処理について書いてあります CSS ブログの横幅を広げませんか・・・
クリックできる範囲が画像とあっていません

もし・・
オリジナルスキンCSSの編集 ヘッド・タイトル3 こちらを使っているようでしたら
#header h1 a の中の position:absolute; この1行を削除してみてください

オリジナルスキンCSSの編集 ヘッド・タイトル3

ヘッダーにFLASHを使いたい

アメブロでもFlashは使えます
が・・
アメブロにはswfファイルはアップできませんのでそれが何とかできる方はトライください

Flashを使ちゃお~   Flash の作り方は説明してありません

ランダムで画像を変えたい

ヘッド画像って1枚??
何パターンか作ってランダムで表示させたら面白くないですか?

何枚かのヘッド画像をランダムで表示
時間帯で表示する画像を変えるのもおもしろいかも・・
時間によってヘッド画像を換えて表示
1枚の画像にまとめて・・ついでにロールオーバーも
ランダムヘッド+ロールオーバー 1 ランダムヘッド+ロールオーバー 2

マウスがのったら別の画像を表示できたら

2枚のヘッド画像を使ってマウスをのせたとき別の画像になるロールオーバー

CSS タイトル画像のロールオーバー・・・・ ヘッド画像はサイズが大きいので2枚で使うと表示されるまでに一瞬時間がかかります
なのでコチラでは2枚の画像を合体して1枚の画像でのやり方を説明しています
記事下に続きの記事へのリンクがあります

タイトルの位置を変えたい

タイトルと概要を中央にしたい

#header h1,
#header h2{
text-align:center;/*中央寄せ*/
}

グリーン、ブルー、ピーチ、グレイのタイトルと概要の左からの位置を調整
#header h1{/*タイトル*/
padding-top:15px;/*上から*/
margin-left:10px;/*左から*/
}
#header h2{/*概要*/
margin-left:10px;/*左から*/
}

ベーシックのタイトルと概要の左からの位置を調整
#header h1{/*タイトル*/
padding-top:10px;/*上から*/
padding-left:10px;/*左から*/
}
#header h2{/*概要*/
padding-left:10px;/*左から*/
}

この記事の中にもユーザーナビとタイトルと概要の位置の処理について書いてあります CSS ブログの横幅を広げませんか・・・
800px以上の画像を使いたい

800pxを超える画像はデザインの変更→スキンCSSの編集 ここの「スキンヘッダ・背景用画像の追加」にアップします
800px以上の画像を画像フォルダにアップすると800pxに自動で縮小されてしまいます
祝・CSS編集専用画像フォルダ


実はプロフィール画像に800pxオーバーの画像をアップする方法もあるんです・・
CSSの編集が使えない場合はコチラを使います
プロフィール画像を使う場合


ネーム ルーム/ブログ(ユーザナビ)を何とかしたい

ネーム ルーム/ブログ(ユーザナビ)を消しちゃうんでしたら
http://ameblo.jp/exlink/entry-10178945284.html
文字色やサイズ、仕切り線の変更でしたら
http://ameblo.jp/exlink/entry-10134141851.html

記事によってヘッド画像を変えてみたい

記事中にCSSを書くことで可能です
(このブログも記事によってヘッド画像や背景を変更しています)


記事によってCSSを変えてみる・・
画像のサイズは?

スキンによって違います
グリーン、ブルー、ピーチ、グレイは横幅760px
ベーシックは横幅800pxです
画像の縦はCSSで設定しますので気にしなくてかまいません
ただ・・スクロールしなくては全部を見ることが出来ないのは・・・大きすぎです







ヘッダ・タイトル・概要 編