今回は、メールでのご質問の中から、よくある質問を取り上げて説明します。




ロリポップ「助け合い掲示板」の「MSN検索でのURL表示」において、この件に関してロリポップに問い合わせされた方がいらっしゃったので、以下に抜粋します。


「robots.txt」とは、ロボット型検索エンジンに対してクロールの制御を依頼するもので、あるページやディレクトリをサーチエンジンの検索対象から外したい場合によく使用されますが、今回の件においては、すべての検索エンジンに対して、全ページをインデックス（登録）してもらうように設定します。


Live Search（MSN）において、検索結果がURLで表示される場合の対処方法を説明します。

[1] robots.txt を作成する

メモ帳などのテキストエディタを起動し、「名前を付けて保存」を選択し、
ファイル名を「robots.txt」で保存します。
ファイルの中身は、空ファイル（記述なし）でOKです。

なお、「空のrobots.txt」 は、下記のように記述した場合と同様、
「すべての検索エンジンを許可」するという意味を持ちます。



[2] サーバーにアップロードする

FTPクライアントソフト（FFFTP）などを使用して、「robots.txt」をサーバーへアップロードします。

「robots.txt」を置く場所は、サイトのルートディレクトリに置きます。
例えば、サイトのURLが「http://www.example.com/」の場合は、
「http://www.example.com/robots.txt」に置きます。


以上で、完了です。
Live Search（MSN）にクロールされる（数日～数週間）と、URLでの表示から、タイトル・概要などで表示されるようになります。

参考になりましたら、応援お願いします。

今回は、掲示板でのご質問の中から、よくある質問を取り上げて説明します。


■ カスタマイズ前



■ カスタマイズ後





写真やバナーなどの画像にリンクを設定すると、外枠が表示される場合がありますが、この枠線を消すにはどうすればよいのでしょうか？
いくつか方法がありますので、それぞれ説明します。

[対策1] CSSのみで設定

スタイルシートで、リンク画像の枠線を非表示に設定します。この方法の場合、すべてのリンク画像に適用されます。

■ CSSの編集

スタイルシートで、a要素のimg要素に、枠線の非表示を設定します。

または、



[対策２] 任意のクラスで指定

画像によって、枠線を表示・非表示にしたい場合は、任意のクラスで、枠線の表示・非表示を設定します。この方法の場合、htmlでそのクラスを指定した画像に適用されます。

■ CSSの編集

スタイルシートで、任意のクラス名を作成し、枠線の非表示を設定します。

■ HTMLの編集

htmlのimg要素に、class属性を追加します。

[対策3] HTMLのみで指定（style属性）

htmlのimg要素に、style要素を追加し、枠線の非表示を設定します。

■ HTMLの編集

htmlのimg要素に、style属性を追加します。

[対策4] HTMLのみで指定（border属性）

htmlのimg要素に、border属性を追加し、枠線の非表示を設定します。
但し、HTML4.0からは　border属性は、非推奨の記述となっています。

■ HTMLの編集

htmlのimg要素に、border属性を追加します。

以上、リンク画像の枠線を消す方法を説明しました。

1クリックの応援で、質問に丁寧にお答えします＾＾

今回は、「FC2 blogカスタマイズ講座」を臨時講義します。

当講座を受講されている生徒さんから、FC2 blog のカスタマイズ方法について掲示板で質問がありましたので、こちらで詳しくお答えします。

【質問内容】 ブログタイトルと記事の間にスペースを入れて、それぞれの記事にリンクを貼りたいのですが、どこをどういじって良いのかわかりません。 【使用ブログ】 FC2 blog　「phot-k6 テンプレート」 【質問者】 るるさん「るる☆女を語ってみました。」

【回答】
ブログタイトルと記事の間にスペースを入れて、それぞれの記事にリンクを貼るには、HTMLの該当箇所（ブログタイトルと記事の間）に目次を作成して、それぞれの記事にリンクを貼ります。

FC2 blog　のphot-k6 テンプレートでは、
<div id="mainBlock">と<!--エントリー-->
の間がその該当箇所になります。

また、目次の文字やデザインなどを管理するために、CSSに目次に関するクラスを追加します。


では、FC2 blog での「目次の作成方法」について説明します。HTMLとCSSを下記の手順で編集しますと、簡単に目次が作成できます。

■ HTMLの編集方法
1．<div id="mainBlock">と <!--エントリー-->の間に
　　下記の記述を追加します。

＜HTML＞

<!--目次--> <div class="mokujiBlock"> <div class="mokujiTitle">目次</div> <div class="mokujiBody"> <a href="リンク先のURL">目次タイトル</a> （コメント）<br /> <a href="リンク先のURL">目次タイトル</a> （コメント）<br /> <br /> <a href="リンク先のURL">カテゴリー</a>｜ <a href="リンク先のURL">カテゴリー</a>｜ <a href="リンク先のURL">カテゴリー</a>｜ <a href="リンク先のURL">カテゴリー</a>｜ <br /> </div> </div>

2．「目次のタイトル」や「リンクＵＲＬ」などを適切な記述に変更します。

■ CSS（スタイルシート）の編集方法
1．スタイルシートに下記の記述を追加します。

＜スタイルシート＞

.mokujiBlock{ border: 1px solid #d8d8d8; margin: 15px 5px 0px; } .mokujiTitle{ padding: 5px 0px 5px 33px; margin: 0px; font-family:"ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka"; font-size: 14px; font-weight: bold; color: #6c6c6c; background-color: #ffc8ff; } .mokujiBody { margin: 10px 15px; font-family:"ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka"; font-size: 12px; line-height: 130%; color: #333333; }

2．追加しましたら、色やデザインなどを調整してください。

以上で完了です。お疲れ様でした。

また、ブログに関する質問は、掲示板で受け付けていますので、気軽にどうぞ！

疑問が解決しましたら、1クリックお願いします。

今回は、「livedoor blogカスタマイズ講座」を臨時講義します。

当講座を受講されている生徒さんから、livedoor blog のカスタマイズ方法について掲示板で質問がありましたので、早速、ご質問にお答えします。

【質問内容】 livedoor blogの「crimsonテンプレート」において、ページ左右の余白スペースだけに背景画像を入れたいのですが可能なことなのですか？（一部修正） 【使用ブログ】 livedoor blog　「crimsonテンプレート」 【質問者】 フナ＠無名さん「晴天日和」

【回答】
可能です。

具体的に、下記のようなレイアウトにおいて、ページの背景に画像を表示する方法について説明します。

livedoor blog　「crimsonテンプレート」を使用されている場合は、タイトル部分の背景画像も調整する必要がありますので、その対処方法もあわせて説明します。

タイトル サイドバー エントリー（記事）

では、「ページの背景に画像を表示する方法」について説明します。

■ CSS（スタイルシート）の編集方法
ページの背景に画像を入れるには、「スタイルシート」を編集します。
livedoor blog　「crimsonテンプレート」のスタイルシートを見ていただくと、下記のような記述がされていますね。

＜スタイルシート＞

body{ background:#000 url('/_img/crimson.jpg') no-repeat scroll 50% 0%; }

それを、下記のように修正します。
赤色の部分を修正、あるいは、追加してください。

body{ background:#000 url('背景画像のURL') repeat; } #container{ background:#000; } #banner,#subbanner{ background:#000 url('/_img/crimson.jpg') no-repeat scroll 50% 0%; margin:0px; } .blogtitle{ margin:0px 0px 0px 20px; padding:50px 0px; }

■ 修正内容・解説
bodyタグの背景として指定されていた画像を、タイトル部分（#banner）に移動し、今回、表示したい画像を、bodyタグの背景として指定しています。

しかし、このテンプレートの場合、本文やサイドバーなどの背景にも、画像が表示されますので、#container内で、背景色（黒色）を指定することで解決します。

また、タイトル部分の背景画像が、タイトル文字の高さ分しか表示されませんので、タイトル文字の余白（上下）をとることで調整しています。

編集後は「保存」して、スタイルシートを「再構築」すると、ブログに反映されます。

以上、「ページの背景に画像を表示する方法」について説明しました。

今回は、急きょ内容を変更しまして、「livedoor blogカスタマイズ講座」を臨時講義しましたが、近日中に「livedoor blogカスタマイズ講座」を開講しますので、是非、livedoor blogユーザーの方は受講してくださいね。

質問も掲示板で受け付けています。

1クリックの応援で、質問に丁寧にお答えします＾＾

開講以来、初めて質問を受けましたので、はりきってその質問にお答えします＾＾



当ブログタイトルの下の部分を見ていただくと、下記のような「ナビゲーション」が設置されています。

サイトマップ

作成

カスタマイズ

掲示板

リンク

このようなナビゲーションがページの上の方に設置されていれば、いちいち下の方にスクロールしなくてもリンク先にいけますので、非常に便利ですね。訪問者だけでなく、自分自身も活用するはずです＾＾


今回は、MovableTypeでのテンプレートを例として説明しますが、CSSとHTMLを編集できるブログでしたら、トップナビゲーションを設置することができますので、是非、参考にしてください。
それでは、「トップナビゲーションの設置方法」について説明します。

トップナビゲーションを設置するには、「スタイルシート」と「メインページ」「カテゴリー・アーカイブ」「個別・アーカイブ」「日付・アーカイブ」を編集します。

■ HTMLタグ
メインページやカテゴリーアーカイブなどのテンプレートを編集し、トップナビゲーションを挿入したい箇所に、下記のようなHTMLタグを貼り付けます。

＜メインページ＞＜カテゴリー・個別・日付アーカイブ＞

<div id="navigation"> <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>

・リンク先URLとタイトルは、適切な文字に変更してください。

■ CSS
スタイルシートには、下記のような記述を追加します。（説明文は不要）
下記は、当ブログの記述例ですので、参考にしてください。

＜スタイルシート＞

#navigation { width: 800px; padding: 5px; background-color: #000099; } #navigation ul { list-style: none; margin: 0px; padding: 0px; font-size: 13px; text-align: center; background-color: #000099; } #navigation li { display: inline; white-space: nowrap; }

【ナビゲーションの全体設定】 ←横幅 ←内側の余白（上下） ←背景色 【マーク付リスト】 ←マーカー文字の種類（なし） ←外側の余白（上・右・下・左） ←内側の余白（上・右・下・左） ←文字サイズ ←文字の位置揃え ←背景色 【リスト項目】 ←要素の表示形式（インライン） ←自動改行の禁止

・幅や高さ、文字の大きさ、文字色、背景色、マージン・パディングなどは、サイトのデザインに応じて変更してください。

また、当ブログで設置してますように、「リンクタイトル部分の背景色」や、「リンク部分にカーソルをあてた際の背景色」を変える方法は、下記の記述も追加することでできます。

＜リンクの装飾＞

#navigation a { text-decoration: none; color: #ffffff; background-color: #3399ff; padding : 1px 16px; } #navigation a:hover{ text-decoration: none; color : #ffffff; background-color : #3366cc; }

【リンクの設定】 ←テキストの下線等（なし） ←文字色 ←背景色 ←内側の余白（上下、左右） 【マウスオーバー中】 ←テキストの下線等（なし） ←文字色 ←背景色

編集後は「保存」をクリックします。「サイトの再構築」から「すべてを再構築する」を選択し、「再構築」をクリックすると、ブログに反映されます。

以上で、トップナビゲーションの設置は完了です。あとは、ブログデザインに応じて、背景色や幅などを調整してくださいね。

[関連記事] ドロップダウンメニューの設置

1クリックの応援で、質問に丁寧にお答えします＾＾