ホーム > サポートメニュー > ユーザー助け合い掲示板

質問内容・回答一覧ツリー

Q. ブログタイトル - 投稿者:lala(2017年07月01日 22:55) No.7594  
Q. ブログタイトル
  • 投稿者:lala
ベーシックを使っています。
タイトル部分を画像に替えたので、タイトルテキストが消えてしまいました。
古記事からタイトルクリックで、最新記事に戻れますが、その機能を生かすにはどのようにしたら出来るのでしょうか?
ご存知の方がいらっしゃいましたらお助けくださいませ。

どうぞよろしくお願い致します。
  • 記事ID:No.7594
  • 投稿日時:2017年07月01日 22:55 (2017年07月03日 18:37更新)

回答一覧(返信数 3 件)

投稿者:3steps A. Re: ブログタイトル

どうやって画像に置換したかによって方法が異なります。

質問に対して質問で返してしまいますが、HTMLソースはどのように変更しましたか?

今回のケースであればタイトル部分だけで構わないので、
<!-- header -->から<!-- /header -->の間のHTMLコードを貼り付けて返信して下さい。

  • 投稿日時:2017年07月02日 06:08
投稿者:lala A. Re: Re: ブログタイトル

ありがとうございます!
お忙しいところすみません!
ブログURL名、一部変更して記入してますが構いませんか?


<!-- header -->
<div id="header">
<!-- BEGIN title -->
<h1 id="blog-title"style="text-align:center;"><a href="abcdefg-blog.jugem.jp"><img src="http://img-cdn.jg.jugem.jp/db3/3708491/20170701_1055728.jpg""width="1024"; height="170" class="pict" /></a></h1>
<p id="blog-description">{blog_description}</p>
<!-- END title -->
</div>
<!-- /header -->


よろしくお願い致します。

  • 投稿日時:2017年07月03日 09:11
投稿者:3steps A. Re: Re: Re: ブログタイトル

ソースありがとうございます。確認しました。
現状では画像をクリックすればブログのトップページへ移動できるようになっていますね。
ブログのタイトルを画像の上に表示させ、そこをクリックするとトップページに移動できるようにしたい。ということでしょうか。

方法は2つあります。
1つはとても簡単な方法で、単純に画像にブログのタイトル文字を入れるだけです。
この方法では現状と同じく画像をクリックすることでトップページに移動するので、HTMLを書き換える必要が殆どありません。
(画像を再アップロードする必要があるので画像のURLが変わります)
その際、画像の幅を<div id="header">で指定されている700pxに加工しなおした方がいいかもしれません。(CSSを加工していない場合)



2つ目はCSSで<h1 id="blog-title">に対して背景画像を設定し、リンクの文字(<a>)をその上に乗せる方法です。
こちらは手順が少し複雑なので順を追って書いていきます。

1. HTMLの書き換え
 書き換えといっても、<a>〜</a>の中身を画像にする前に戻すだけです。

<h1 id="blog-title">{blog_name}</h1>


2. CSSの編集

2-1.
#blog-title {
font-weight: normal;
font-size: 1.875em;
line-height: 1em;
margin-bottom: 20px;
}

以下のように変更・追記します。

#blog-title {
height: 150px; /* ← 画像の高さ */
background: url("https://dummyimage.com/700x150/bbbbbb/222222.gif";) no-repeat; /* ← 画像のURL */
font-weight: normal;
font-size: 1.875em;
line-height: 1em;
margin-bottom: 10px; /* ← 画像からブログの説明までの間も再調整した方がいいでしょう */
}

なお画像の横幅は<div id="header">で指定されている700pxに再加工する必要があります。
現在の画像(1024px)はHTMLコード上に書いている為縮小されているはずですが、CSSの場合は右側が切れます。


2-2.
追加します。#blog-titleの下あたりに書き加えて下さい。

#blog-title a {
position: relative;
top: 15px; /* 画像の左上の頂点から下方向へ何ピクセル移動させるか */
left: 25px; /* 画像の左上の頂点から右方向へ何ピクセル移動させるか */
}
top, leftの値は適宜調整して下さい。


2-3.
背景にする画像にもよりますが、文字色の選択を誤ると見難くなってしまう場合があるので注意してください。
文字色をリンクの状態に関わらず一定にするには以下のCSSを記述します。

#blog-title a:link, #blog-title a:acitive, #blog-title a:visited { color: #000000; }
上記例では黒になります。


以上です。

  • 投稿日時:2017年07月03日 18:37