アメブロをＨＰにしたい。

質問

現在、アメブロにてＢＬＯＧをやっています。

ＣＳＳについては知識が殆どなくて色んなサイトを見て
少しずつ変えていたりするのですが何故か上手くいきません。

タイトル部分に画像を貼り付けて其処にリンクさせたくても
何度やっても何故かならなかったりします。

そこでアメブロをＨＰ代わりにしたいのですが、
その際に弄るべきＣＳＳはどの部分でしょうか？

またどの様にすればＨＰ風になるでしょうか？

教えてください。

回答No.2

Muller3

確かアメブロはHTMLが編集できませんでしたよね。

だとしたら、タイトル部分を背景画像として設定した部分をリンクにするには、HTMLのタイトル部分に元々付いているアンカータグをブロック要素化して、リンクの範囲を作る方法が考えられます。

どのようなHTMLになっているか、もしかしたらテンプレートによってidの指定など違うかもしれませんが、ブログタイトルに対して以下のような感じの記述をスタイルシートに追加することになると思います。

#header h1 a{
font-size: 1px;　←元々のテキストリンクを見えなくする
text-indent: -9999em;　←同
display: block;　←インライン要素であるaタグをブロック要素化
width: ○○px;　←リンクの範囲幅
height: △△px;　←リンクの範囲高さ
}

あとはヘッダー部分に背景画像としてタイトル画像を設定する、という感じかと思います。
※現在、ブログタイトル（テキスト）をdisplay:noneを使って非表示にしているなら、上記を書いてもリンク範囲ができないかもしれません。その場合display:noneを外したりしてみてください。

一応参考。
http://ameblo.jp/ameblo-trend/entry-10003745394.html

回答No.1

maho-maho

ＨＰ風とは？
ブログもホームページの一種です。
HP風（デザイン的に？）にしても「タイトル部分に画像を貼り付けて其処にリンクさせたくても何度やっても何故かならなかったりします。」が解決できるとは思えないのですが。

補足

ブログがＨＰの一種である事は理解しています。

デザインの上でＨＰの様なコンテンツボタンを画像で設けて
良くある縦方向のフレームページサイトの様な状態にしたいのです。

その上でタイトル部分をＴＯＰに戻るボタン代りにしたいので
タイトル部分の画像にリンクを貼り付けたいと思ったのです。
それがリンクだけ何故か出来なかったんですが(^_^;)

そしてＢＬＯＧであれば携帯などでの更新も可能なので
ＨＰを作るより便利ではないか？と思ったんです。

それでＨＰ風にボタンを付けたり見た目をＨＰに見せたり
そういう風に見せるＣＳＳの弄り方を聞きたかったんです；

言葉が足らず申し訳ありません；