やっぱり自分なりにヤプログをカスタマイズしたい

質問

っと、いっても大体的にではないんですが・・・。
ヤプログのブログ説明文をカスタマイズしたいのです。

フリースキンpink 3カラムを使用していますが、ブログ説明文が枠いっぱいにならず、右２ｃｍ位足らず、なんか不自然！どう直せば良いのでしょうか？ブログ全体の一番下に（/前）っと書いた帯がありますがこの幅と同じにしたいのです。

そして、長めのブログ説明文を三行位に折り返し、中央揃えにしたいのです。教えて下さい。

回答No.3

DOUGLAS_ · ベストアンサー

＞(*^^)v有難うございました。出来ました。
＞ほんと間違えて解釈していたようです。嬉しいです。
　(^。^;)ホッ!

-------------------------------------------------------------------
【Ａ】ブログタイトルを大きくしたいのですがどのようにしたらよいのでしょうか？

　「ここをこうすればこうなる」という答えだけお示ししてもよいのですが、どうせですから、「なぜそうなるのか」というところからお知らせいたします。
　ブラウザが「Internet Explorer」としてご説明いたします。

１）先ず、ブラウザでご自分のブログを開きます。
２）[表示(V)] - [ソース(C)] で、HTML ソースを見ます。

３）[Ctrl] + [F] で [検索] ダイアログ を開き、[検索(F)] に「ご自分のブログのタイトル」の文字列を入力して、[Enter] します。
　この時点で
<title>{ブログのタイトル}</title>
の行が選択されますが、これは、Internet Explorer の タイトルバー の設定になります。
　つまり、ブラウザの一番上の帯(タイトルバー)に「ブログのタイトル - Internet Explorer」と表示されているトコロの設定です。

４）もう一度、[Enter] すると
<div class="blog_title"><a href="ｈttp://yaplog.jp/{ブログのID}/">{ブログのタイトル}</a></div>
の行が選択されますが、ここが「ブログタイトル」の設定になります。
５）「class="blog_title"」となっているのを確認します。
６）[ブログ管理画面] - [スキン] タブ をクリックします。
７）[左サイドメニュー] - [フリースキン編集] をクリックすると [スタイルシート] のページが開きますが、「スタイルシート(CSS)」というのは、ＷＥＢページの装飾についての設定のファイルになります。
８）[Ctrl] + [F] で [検索] ダイアログ を開き(５)で確認した「blog_title」を検索します。

９）[スタイルシート] の中に「blog_title」の記述は、
　　.blog_title{
　　.blog_title A:link{
　　.blog_title A:visited{
　　.blog_title A:hover{
　　.blog_title A:active{
の５ヶ所に出てきますが、上から順に
　　・「blog_title」という「class」自体のスタイルの設定
　　・通常のリンク
　　・読み込み済みのリンク
　　・マウスが上に乗せられている状態のリンク
　　・クリックされた瞬間のリンク
を意味します。
　ということで、ここでは「.blog_title{」が変更の対象になります。

参考URL）とほほのスタイルシート入門
http://www.tohoho-web.com/css/reference.htm#PseudoClass

10）「.blog_title{」以下に
.blog_title
{
width:90%;
padding-right:10px;
MARGIN: 30px auto 10px 20px;
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
OVERFLOW: hidden;
COLOR: #f99;
WORD-BREAK: break-all;
LETTER-SPACING: 1px
}
と記述されていますが、それぞれの行が
属性 + :(コロン) + 設定値 + ;(セミコロン)
という書式で設定されています。

　余分な説明になるかもしれませんが、上から順に「幅=90%」・「領域内右余白=10px」・「領域間余白が上=30px、右=自動、下=10px、左=20px」・「フォントの太さ=太字」・「フォントサイズ=16px」・「はみ出た部分=表示しない」・「文字色=#f99(肌色)」・「表示範囲内改行法=範囲の幅に合わせて改行」・「字間=1px」という意味です。

参考URL）スタイルシートリファレンス（目的別）
http://www.htmq.com/style/

11）ここで、いよいよ「ブログタイトルを大きくしたい」の答えですが、(10)の中から、「フォントサイズ=16px」のトコロ、つまり
FONT-SIZE: 16px;
を、例えば
FONT-SIZE: 40px;
と変更します。

12）この時点で、画面下の [プレビュー(P)...] をクリックしても、なぜか変更が適用されていない(私の場合だけ？)ようですが、[保存(S)] ボタンをクリックして、[ポップアップ ウィンドウ] に [OK] で応じると適用されました。
13）(11) での設定値をいろいろとお試ししていただいて、お好きな大きさに変更なさってください。

●● おまけ ●● ですが、例えば
　　.blog_title A:hover{
の次に
FONT-SIZE: 100px;
というような行を追加してみると、「ブログタイトル」にマウスが乗ると、タイトルがバカでかく表示されます。

-------------------------------------------------------------------
【Ｂ】ゆくゆくはブログタイトルの背景に画像も入れたいと考えています。

１）これは簡単な問題です。
２）【Ａ】の(10)のトコロの
.blog_title
{
から
}
までの間に、どの行の次でも結構ですから、
background-image: url("{背景画像のURL}");
を追加します。

　これにつきましては、【Ａ】の(10)の「参考URL」のページで「文字色・背景」の項目をご覧ください。
background-attachment・・・背景画像の固定・移動を指定する
background-image・・・・・・・・背景画像を指定する
background-position・・・・・・背景画像の表示開始位置を指定する
background-position-x・・・・背景画像の横位置を指定する（IE独自の仕様）
background-position-y・・・・背景画像の縦位置を指定する（IE独自の仕様）
background-repeat・・・・・・・背景画像のリピートの仕方を指定する
などの詳細が掲載されています。

-------------------------------------------------------------------

＞贅沢言わせて下さい。
　ぃぇぃぇ、この程度のこと、当たり前の「欲」です。
　贅沢ではありませんょ～。　　(^0^)/

-------------------------------------------------------------------
【おまけ】もしも、ブログタイトル自体を「画像」にしたくなったら。。。

１）【Ａ】の(４)で
<div class="blog_title"><a href="ｈttp://yaplog.jp/{ブログのID}/">{ブログのタイトル}</a></div>
という記述を取得しましたが、これをブログの [テンプレート] から見つけてみましょう。
２）[ブログ管理画面] - [スキン] タブ をクリックします。
３）[左サイドメニュー] - [フリースキン編集] をクリックします。
４）[左サイドメニュー] - [メインテンプレート] をクリックします。
５）[Ctrl] + [F] で [検索] ダイアログ を開き「<div class="blog_title">」を検索すると(１ヶ所しかありません)、
<div class="blog_title"><a href="{$BlogUrl$}">{$BlogName$}</a></div>
という行がみつかります。

６）(１)と比べてみると
{$BlogUrl$} = ｈttp://yaplog.jp/{ブログのID}/
{$BlogName$} = {ブログのタイトル}
であることが分かります。
　【Ａ】では Internet Explorer の [表示(V)] - [ソース(C)] で、HTML ソースを見ましたが、ブログの設定画面から HTML ソース（[メインテンプレート] など）を見ると、人それぞれの設定値（ブログ名・ブログのURL・記事の投稿日．．．）などは「{$・・・・$}」というような変数で表示されています。

７）ということで、「{$BlogName$}」を「タイトルにしたい画像」の HTML タグ に変更します。

８）「画像」を現わす HTML タグは
<img src="{画像のURL}">
ですので、
<div class="blog_title"><a href="{$BlogUrl$}"><img src="{画像のURL}"></a></div>
とすることによって「ブログタイトル自体」が「画像」になります。

９）ところが、
<img src="{画像のURL}">
のままだと「ブログタイトル画像」に青い枠線がつきますので、
<img src="{画像のURL}" border=0>
というようにします。

　<img> タグの詳細につきましては、下記をご覧ください。
http://www.tohoho-web.com/html/img.htm

９）これを [回答番号：No.2] の (12) 同様に、[左サイドメニュー] - [アーカイブテンプレート]・[1記事テンプレート] についても同様の操作（７～11）をします。

　では　(^.^/)))~~~bye!!

お礼

遅くなりましたが有難うございました。

補足

早速有難うございました。
文字の大きさは一発で変更できました(*^^)v
本当に有難うございました。

欲をかいてブログタイトルの文字色を変えてみよう!!なんて思って→【font color="#CD5C5C】をブログ説明と同様設定の処で変えてみたり、スタイルシートの処に加えてみたりしましたが、ビックリ！タイトルの文字以外が変わってしまいました。まだまだ、勉強不足です。

ちょっと楽しいです。有難うございました。
また、お願い致します。

回答No.2

DOUGLAS_

＞ブログ説明文だけが長くなり
＞右枠が広がったデザインになってしまいました。
　[回答番号：No.1] の通りに操作していただいたら、そんなことになるハズがありません。

＞変更の仕方が足りなかったので
はなくて、
＞間違った変更をしてしまったので
はないでしょうか。

＞【三行位に折り返し】は何処に加えればよいのでしょうか?
　この件も含めて、最初からご説明いたします。
　どうやら、「間違った変更」をされたようですので、もう一度「フリースキンpink 3カラム」を設定するところから説明いたします。

　下記の操作を番号順になさってください。
　ただし、３つの [テンプレート] について同様の操作を繰り返しますので、実際には、下のような順番になります。

(１)～(５)
(６) [左サイドメニュー] - [メインテンプレート] をクリックします。
(７)～(11)
(12) [左サイドメニュー] - [アーカイブテンプレート] をクリックします。
(７)～(11)
(12) [左サイドメニュー] - [1記事テンプレート] をクリックします。
(７)～(11)
(13)～(16)

１）[ブログ管理画面] - [スキン] タブ をクリックします。
２）[スキン一覧] - [ジャンル別スキン選択] - [フリースキン] をクリックします。
３）[フリースキン] - [pink 2カラム] の下の [3カラム] をクリックします。
４）[保存(S)] をクリックします。
５）(４)に続いて、[左サイドメニュー] - [フリースキン編集] をクリックします。
６）[左サイドメニュー] - [メインテンプレート] をクリックします。

７）現われた テキストボックス の中の HTML タグ の中から 14 行目を表示します。
<table ～～ class="range" width="760">
の最後の「 width="760"」を削除して、
<table ～～ class="range">
にします。
８）19 行目にある
<table width="760" ～～>
の中から「"760"」を「"100%"」に変えて
<table width="100%" ～～>
にします。
９）21 行目にある
<td class="blog_description">
のところに「 align="center"」を加えて
<td class="blog_description" align="center">
にします。
10）同じ画面の最下部の [保存(S)] ボタンをクリックします。
11）[ポップアップ ウィンドウ] に [OK] で応じます。

12）[左サイドメニュー] - [アーカイブテンプレート]・[1記事テンプレート] についても同様の操作（７～11）をします。
　ただし、「○○行目」というところは少しずれます。

13）[ブログ管理画面] - [設定] タブ をクリックします。
14）[基本設定] - [ブログ説明文] の下の テキストボックス に、「三行位に折り返し」たい「ブログ説明文」を入力してあると存じますので、折り返したいところに「<br>」を挿入して、
ブログ説明文１行目<br>
ブログ説明文２行目<br>
ブログ説明文３行目
のように <br> タグ で改行します。
15）同じ画面の最下部の [保存] ボタンをクリックします。
16）[ポップアップ ウィンドウ] に [OK] で応じます。

補足

(*^^)v有難うございました。出来ました。
ほんと間違えて解釈していたようです。嬉しいです。

贅沢言わせて下さい。
ブログタイトルを大きくしたいのですがどのようにしたらよいのでしょうか？ゆくゆくはブログタイトルの背景に画像も入れたいと考えています。

教えていただけたら嬉しいです。お願い致します。

回答No.1

DOUGLAS_

＞ブログ説明文が枠いっぱいにならず、右２ｃｍ位足らず、なんか不自然！

【原　因】
１）[ブログ管理画面] - [スキン] タブ をクリックします。
２）[左サイドメニュー] - [フリースキン編集] をクリックします。
３）[左サイドメニュー] - [メインテンプレート] をクリックします。
４）現われた テキストボックス の中の HTML タグ の中から「blog_description」を探します(１ヶ所しかありません)。
５）その前後のコードが
<table ～～ class="range" width="760"> ～～
<table width="760" ～～><tr>
<td class="blog_description">
～～ {$BlogDescription$} ～～
のようになっていますが、「{$BlogDescription$}」の部分が「ブログ説明文」です。
　ただし、「～～」の部分は文字列を省略しておりますので、ご理解願います。
６）(５)を見ると、「ブログ説明文」の入っている <table> が「width="760"」、更にそれを入れ子にしている <table> が「width="760"」となっています。
　が、しかし、ブログ本文(<BlogEntries>=「width="410"」)と左右のサイドバー(side =「width="175"」)との間にあるマージンなどを含めると 760px 以上になっていますので、その分だけ「ブログ説明文」の右側に空白ができる、ということです。

＞中央揃えにしたいのです。
　こちらの方は、HTML ではなくて、CSS を触った方が簡単なのかなぁとも存じますが、ついでに HTML で変えてしまいましょう。

【対　策】
１）「面倒くさい！」と思われるかも知れませんが、【原因】の方は、よくお読みになって、ご理解くださいね。
２）上記コードの中で
<table ～～ class="range" width="760">
の最後の「 width="760"」を削除して、
<table ～～ class="range">
にします。
３）次に
<table width="760" ～～>
の中から「width="760"」を「width="100%"」に変えて
<table width="100%" ～～>
にします。
４）また、
<td class="blog_description">
のところに「 align="center"」を加えて
<td class="blog_description" align="center">
にします。
５）同じ画面の最下部の [保存(S)] ボタンをクリックします。
６）[ポップアップ ウィンドウ] に [OK] で応じます。
７）[左サイドメニュー] - [アーカイブテンプレート]・[1記事テンプレート] についても同様の操作（２～６）をします。

＞そして、長めのブログ説明文を三行位に折り返し
１２３４５６７８９０１２３４５６７８９０<br>
１２３４５６７８９０１２３４５<br>
１２３４５６７８９０１２３４５６７８９０１２３４５
のように <br> タグ で改行なさってください。

補足

早速のご回答有難うございました。
ブログ説明文となっている場所
【<table ～～ class="range" width="760"> ～～
<table width="760" ～～><tr>
<td class="blog_description">
～～ {$BlogDescription$} ～～】
の中を変更すればよろしんでしょうか？
回答いただいて、変更いたしましたがブログ説明文だけが長くなり右枠が広がったデザインになってしまいました。
変更の仕方が足りなかったのでしょうか？間違った変更をしてしまったのでしょうか?

そして【三行位に折り返し】は何処に加えればよいのでしょうか?、{$BlogDescription$}を消してこの中に加えればよいのでしょうか?
申し訳ございませんが再度教えて下さい。お願い致します。