2011年01月10日

【第29回】検索窓を別のサイドコンテンツに設置する

第27回からの検索ボックスの編集を続けます。

前回は、検索オプションのデフォルト設定を、Yahoo!ウェブ側から記事側に変更しました。

SD_028_01.JPG

これはこれでいいのですが・・・

「そもそも、検索ボックスを独立で設置する必要なくない?
どこか別の、例えば最近の記事ボックスとかに入っていれば良いような・・・」

って、思いません?

私だけでしょうかね?

ならば、その私だけかもしれない思いを形にしてみましょう!

ということで、今回は検索ボックスを、最近の記事ボックス内に設置してみます。

今回もHTML編集です。

★検索ボックスを別のサイドコンテンツに設置する方法★

Seesaaブログのコンテンツ画面検索のコンテンツHTMLを取得し、それを別のコンテンツのHTMLに貼りつける。

<手順1>
前回と同様、コンテンツ画面検索コンテンツHTML編集画面を開き、HTMLをコピーする。
コピーで取得するのは、HTMLのうちサイドコンテンツのタグを除く以下の青字部分。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<form method="get" action="http://search.yahoo.co.jp/search" class="sASform" name="form<% content.id %>" onSubmit="return sfcheck<% content.id %>()">
<table class="seesaaArticleSearch">
<tr>
<td colspan="5"><input value="" name="keyword" type="text" size="34" /> <input value="検索" type="submit" class="input-submit" /></td>
</tr>
<tr>
<td class="sASnone"><input type="radio" name="vs" value="" id="radio1" /></td>
<td class="sASweb"><label for="radio1">ウェブ</label></td>
<td class="sASnone"><input type="radio" name="vs" value="<% blog.page_url %>" id="radio2" checked="checked" /></td>
<td class="sASarticle"><label for="radio2">ブログ記事</label></td>
</tr>
</table>
<input type="hidden" name="fr" value="sb-sesa" /><input type="hidden" name="ei" value="Shift_JIS" />
</form>
<style type="text/css">
.seesaaArticleSearch{border-collapse:collapse;overflow:hidden;font-size:12px;text-align:left;}
.seesaaArticleSearch td{padding:0;}
.sASnone{width:7px;}
.sASnone img{border:none;background:none;border:solid 0px #000;}
.sASweb{width:65px;background:url(<% site_info.blog_url %>/img/ico_y.gif) no-repeat 0 3px;border:solid 0px #000;white-space:nowrap;}
.sASweb label{padding-left:25px;padding-right:5px;}
.sASarticle{width:40px;border:solid 0px #000;white-space:nowrap;}
.sASarticle label{padding-left:2px;}
.sASform{margin:0;padding:0;}
</style>
<script type="text/javaScript"><!--
function sfcheck<% content.id %>(){
if (document.form<% content.id %>.vs[0].checked){
document.form<% content.id %>.action='http://search.yahoo.co.jp/search';
document.form<% content.id %>.keyword.name='p';
}
if (document.form<% content.id %>.vs[1].checked){
document.form<% content.id %>.action='<% blog.page_url %>pages/user/search/';
document.form<% content.id %>.keyword.name='keyword';
}
return true;
}
//--></script>

<% content.footer -%>
</div>

<手順2>
設置先(ここでは最近の記事)のコンテンツHTML編集画面を開き、コピーして取得した検索ボックスのHTMLを設置したい箇所に貼りつける。

▼▼▼ 変更前 ▼▼▼
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>"><% article.subject | tag_break %></a><br />
<% /loop -%>
<% content.footer -%>
</div>

▼▼▼ 変更後 ▼▼▼
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<form method="get" action="http://search.yahoo.co.jp/search" class="sASform" name="form<% content.id %>" onSubmit="return sfcheck<% content.id %>()">
<table class="seesaaArticleSearch">
<tr>
<td colspan="5"><input value="" name="keyword" type="text" size="34" /> <input value="検索" type="submit" class="input-submit" /></td>
</tr>
<tr>
<td class="sASnone"><input type="radio" name="vs" value="" id="radio1" /></td>
<td class="sASweb"><label for="radio1">ウェブ</label></td>
<td class="sASnone"><input type="radio" name="vs" value="<% blog.page_url %>" id="radio2" checked="checked" /></td>
<td class="sASarticle"><label for="radio2">ブログ記事</label></td>
</tr>
</table>
<input type="hidden" name="fr" value="sb-sesa" /><input type="hidden" name="ei" value="Shift_JIS" />
</form>
<style type="text/css">
.seesaaArticleSearch{border-collapse:collapse;overflow:hidden;font-size:12px;text-align:left;}
.seesaaArticleSearch td{padding:0;}
.sASnone{width:7px;}
.sASnone img{border:none;background:none;border:solid 0px #000;}
.sASweb{width:65px;background:url(<% site_info.blog_url %>/img/ico_y.gif) no-repeat 0 3px;border:solid 0px #000;white-space:nowrap;}
.sASweb label{padding-left:25px;padding-right:5px;}
.sASarticle{width:40px;border:solid 0px #000;white-space:nowrap;}
.sASarticle label{padding-left:2px;}
.sASform{margin:0;padding:0;}
</style>
<script type="text/javaScript"><!--
function sfcheck<% content.id %>(){
if (document.form<% content.id %>.vs[0].checked){
document.form<% content.id %>.action='http://search.yahoo.co.jp/search';
document.form<% content.id %>.keyword.name='p';
}
if (document.form<% content.id %>.vs[1].checked){
document.form<% content.id %>.action='<% blog.page_url %>pages/user/search/';
document.form<% content.id %>.keyword.name='keyword';
}
return true;
}
//--></script>

<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>"><% article.subject | tag_break %></a><br />
<% /loop -%>
<% content.footer -%>
</div>

最近の記事のコンテンツHTMLをこのように修正すると、検索窓を設置することができます。

SD_029_01.JPG

いかがでしょうか。

検索ボックスを設置する/しない、およびどこに設置するかは、好みによって分かれると思います。
ただ、このように他のコンテンツに検索ボックスを設置する方法を知っておけば、自分の好きなデザインにするための自由度が増えると思います。

今回は以上です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ


ラベル:検索 HTML
posted by o(^0^)o ほくほく at 18:15| Comment(1) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年01月09日

【第28回】検索オプションのデフォルト値を変更する

前回は、検索ボックスのテキスト入力欄を大きくしました。

SD_027_04.JPG

これを見て思うのは、ラジオボタンのデフォルト値。

「Yahoo!検索だったら、ブラウザの窓でもできる。
せっかくブログに検索ボックスを設置するんだから、やっぱり目的はブログ内検索が主流じゃない?」

って、思いません?

ならば、その思いを形にしてみましょう。

ということで、今回はこのラジオボタンのデフォルトチェック状態を、Yahoo!ウェブ検索側から記事側に変更してみたいと思います。

方法は、HTMLの編集。
前回と同じく、Seesaaブログのコンテンツ画面検索コンテンツをクリックし、さらにそのコンテンツHTML編集画面を開いて下さい。

SD_027_03.jpg

それでは、編集してみましょう。

★検索オプションのデフォルトチェックを変更する方法★

type="radio"inputタグについて、デフォルトチェックしたい方にchecked="checked"を記入する。
反対に、チェックを外したい方からは、上記プロパティを削除する。

▼▼▼ 変更前 ▼▼▼
<input type="radio" name="vs" value="" id="radio1" checked="checked" /></td>
<td class="sASweb"><label for="radio1">ウェブ</label></td>
<td class="sASnone"><input type="radio" name="vs" value="<% blog.page_url %>" id="radio2" /></td>
<td class="sASarticle"><label for="radio2">記事</label>

▼▼▼ 変更後 ▼▼▼
<input type="radio" name="vs" value="" id="radio1" /></td>
<td class="sASweb"><label for="radio1">ウェブ</label></td>
<td class="sASnone"><input type="radio" name="vs" value="<% blog.page_url %>" id="radio2" checked="checked" /></td>
<td class="sASarticle"><label for="radio2">記事</label>

こうすると、ラジオボタンのデフォルトチェックが変更されます。

▼▼▼ 変更前 ▼▼▼
SD_027_04.JPG

▼▼▼ 変更後 ▼▼▼
SD_028_01.JPG

今回は以上です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年01月08日

【第27回】検索窓のサイズを調整する

ブログの幅を変更した場合、変更後のブログを良く観察してみましょう。

おかしな表示なっている箇所があるかもしれません。

このブログも、良く観察して見ると、確かにおかしい箇所があります。

例えば、検索ボックス。
サイドバーの幅が広くなったにもかかわらず、中身は小さいままなので、少しアンバランスな感じになっています。

SD_027_01.JPG

そこで今回は、この検索ボックスの修正をして、テキスト入力欄を大きくしてみましょう。

今回修正するのは、CSSではなく、この検索ボックスのHTMLです。
従って、まずは第2回でご紹介した、Seesaaブログのコンテンツ画面を開いて下さい。

SD_002_03.jpg

そして、この中の検索をクリックして編集画面を開いて下さい。

SD_027_02.JPG

画面右上のコンテンツHTML編集リンクをクリックすると、検索ボックスのHTML編集が可能となります。

SD_027_03.jpg

それでは、このHTMLの一部を修正して、検索窓を大きくしてみます。

★検索ボックスのテキスト入力欄の大きさを変更する方法★

検索ボックスのコンテンツHTML編集画面を開き、type="text"inputタグ内のsizeの値を変更する。

▼▼▼ 変更前 ▼▼▼
<input value="" name="keyword" type="text" size="20" />

▼▼▼ 変更後 ▼▼▼
<input value="" name="keyword" type="text" size="34" />

このように変更すると、テキスト入力欄を大きくすることができます。

▼▼▼ 変更前 ▼▼▼
SD_027_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_027_04.JPG

うまくできました。

検索ボックスについては、他にも気になることがあるのですが、今回はここまでとしておきます。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 19:59| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年01月07日

【第26回】ブログ全体の幅を変更する

今回は、ブログ全体の幅を広げてみましょう。

第22回で解説した通り、ブログ全体の幅を定義しているのはCSS上の#container要素です。

現在使用しているこねこ(左サイドバー)テンプレートでは、デフォルトで840pxの幅となっています。

今回はこれを100px増やして、ブログの幅を940pxにしてみましょう。


それでは早速。

CSSの編集は、第2回で紹介したCSS編集画面で行って下さい。

修正するセレクタは#container、プロパティはwidthです。

★ブログ全体の幅を変更する方法@:全体幅の変更★

#container要素のプロパティwidthの値を修正する。

▼▼▼ 変更前 ▼▼▼
#container{
width:840px;
text-align:left;
margin:0 auto;
background-color:#fff;
}

▼▼▼ 変更後 ▼▼▼
#container{
width:940px;
text-align:left;
margin:0 auto;
background-color:#fff;
}

この変更によって、ブログの表示はこのようになります。

▼▼▼ 変更前 ▼▼▼
SD_025_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_026_01.jpg

ちょっと分かりにくいですが・・・
なんとなく、ブログ全体の幅が広がっているのが分かるでしょうか。

このテンプレートは、ブログそのものはブラウザの中央に表示される設定となっています。

その上で、ブログ全体の幅が広がったことにより、左寄せ設定の左サイドバーとメインコンテンツは、画面上左に寄ってしまっています。

なによりも、ブログのヘッダーも変わっていますね。
ヘッダーの猫の写真を含む画像は中央寄せ。
ブログのタイトルやその下の説明文は左寄せ。
結果として、ブログのタイトルなどはヘッダー画像の左にはみ出る形となっています。


まずはここまで、宜しいでしょうか。


さて、ブログ全体の幅を広げただけでは意味がありません。
それに伴う、コンテンツの修正が必要です。

ここでは、メインコンテンツの幅を、ブログ全体の幅と同じく100px増やしてみることにしましょう。
方法は、第25回で解説した通りです。

★ブログ全体の幅を変更する方法A:メインコンテンツの幅の変更★

#content要素のwidthプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
#content{
width:570px;
float:left;
}

▼▼▼ 変更後 ▼▼▼
#content{
width:670px;
float:left;
}

この結果、ご覧の通りメインコンテンツの幅が、ブログ全体の幅一杯まで広がります。

▼▼▼ 変更前 ▼▼▼
SD_026_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_026_02.jpg

おお、メインコンテンツのタイトル背景画像が、ねずみ2匹に(笑)
これはまずい・・・ので、必要とあらば第24回で紹介した方法で画像を修正して下さい。


ここでは、あとタイトル画像を修正してみます。

こちらも、第24回で紹介した方法を使って、既存の画像を拡大します。

★ブログ全体の幅を変更する方法B:タイトル画像の調整★

#banner要素のbackground-imageプロパティに記載されているURLからタイトル画像を取得し、PictBearでサイズを調整し、ブログにアップロードする。
background-imageプロパティのURLを変更し、アップロードした画像を参照するようにする。
(注)画像取得から修正後画像アップロードまでの方法は、第24回をご参照ください。

▼▼▼ 変更前 ▼▼▼
#banner{
background-image:url("https://blog.seesaa.jp/img/bg/cat_stamp2/header.jpg");
background-repeat:no-repeat;
background-position:bottom center;
padding:0px 220px 0px 40px;
margin-bottom:25px;
height:294px;
}

▼▼▼ 変更後 ▼▼▼
#banner{
background-image:url("https://seesaa-blog-design.up.seesaa.net/image/header.jpg");
background-repeat:no-repeat;
background-position:bottom center;
padding:0px 220px 0px 40px;
margin-bottom:25px;
height:294px;
}

これで、ご覧のように拡大したタイトル画像が表示されるようになります。

▼▼▼ 変更前 ▼▼▼
SD_026_02.jpg

▼▼▼ 変更後 ▼▼▼
SD_026_03.jpg

あとは、タイトル画像を拡大したことによってタイトルの文字サイズや表示位置が気になったり、また先ほどのコンテンツタイトルの画像がおかしくなったりと、いろいろ気になりますが、そういった点はこのブログの過去の記事を参照しながら徐々に自分の好みに修正してみて下さい。

なお、私はこのブログは以前の幅のままの方が良いと思いますので、この記事を書き終えたら、ブログの幅は以前どおり840pxに戻すことにします。

今回は以上です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(1) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年01月06日

【第25回】メインコンテンツの幅を変更する

第22回からの、ブログの幅を変更するシリーズ。

今回は、メインコンテンツの幅変更です。

現在、左サイドバーを広げたことによってブログ全体の幅に収まりきらず、サイドバーの下に表示されてしまっているメインコンテンツを、元通り正しく表示してあげましょう。


それでは、さっそく。

メインコンテンツを定義する要素は、第22回でもお伝えした通り#contentです。
この中のwidth:620px;というプロパティの値を小さくしてやれば、メインコンテンツの幅を狭めることができます。

★メインコンテンツの幅を変更する方法★

#content要素widthプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
#content{
width:620px;
float:left;
}

▼▼▼ 変更後 ▼▼▼
#content{
width:570px;
float:left;
}

以上の修正で、メインコンテンツの幅が狭くなり、以前と同様正しく表示されるようになります。

▼▼▼ 変更前 ▼▼▼
SD_023_03.jpg

▼▼▼ 変更後 ▼▼▼
SD_025_01.jpg

以上で、メインコンテンツの幅修正は完了です。

なお、良く見ればお気づきかと思いますが、メインコンテンツの幅を狭めたことによって、記事タイトルの背景画像の一部が表示されなくなっています。
記事タイトル左側のねずみのしっぽが表示されていません。

これを正しく表示するためには、前回と同じく画像調整とアップロード、CSS上のURL変更作業が必要となります。
興味のある方は、前回の記事を参考に画像を修正してみて下さい。

なお、メインコンテンツのタイトルの背景画像は、h3.title要素の中のbackground-imageプロパティで定義されています。
ご参考までに。

このブログでは、この記事を書き終えた後に上記画像も修正してしまうつもりです。

以上で、メインコンテンツの幅を調整する作業は完了です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年01月05日

【第24回】サイドタイトルの画像サイズを変更する

第22回からの、ブログの幅を変更するシリーズ。

前回は、左サイドバーの幅を200pxから250pxへと広げてみました。

そしてその結果、メインコンテンツが入りきらなくなり、サイドバーの下に表示されるようになってしまっています。

SD_023_03.jpg

これを修正する必要があるわけなのですが、それは次回に置いておいて、今回は先に左サイドバーを完成させてしまいたいと思います。


さて、左サイドバーを見てみると、少しおかしな箇所があります。

SD_024_01.jpg

ご覧のように、サイドバーの幅を広げたので、その幅に対してタイトル画像の線が短くなってしまっています。

今回は、この画像を修正してみたいと思います。

★サイドタイトルの画像を変更する方法★

サイドタイトルの画像を取得し、PictBearなどでサイズを調整してブログにアップロードした上で、CSSにてその画像を参照するように修正する。

<手順1>
サイドタイトルの画像の所在(URL)を、CSSを見て確認する。
今回はサイドタイトルの背景画像なので、.sidetitleクラスのbackgroundプロパティにURLが記載されています。

.sidetitle{
background:url("https://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:0px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字箇所は、過去の作業で修正した箇所です。

<手順2>
背景画像のURLをIEなどのブラウザに入力し、画像が表示されたらその画像を右クリックしてPCに保存する。

SD_024_03.jpg

<手順3>
保存した画像のサイズを、PictBearなどで修正する。
ここでは、取得した画像の横幅が、以前のサイドバーの幅200pxに対して195pxだったので、新しいサイドバーの幅250pxよりも5px狭い245pxに修正しています。
(注)PictBearの入手方法や画像サイズの修正方法は第17回を参照してください。

SD_024_04.jpg

<手順4>
修正した画像を、Seesaaブログの記事を書くページでアップロードし、一度貼りつけてみて、そのURLを取得する。
取得すべきURLは、<img src="の後ろの文字列になります。

SD_024_05.jpg

<手順5>
.sidetitleクラスのbackgroundプロパティを、取得した新しいURLに変更する。

▼▼▼ 変更前 ▼▼▼
.sidetitle{
background:url("https://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:0px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}

▼▼▼ 変更後 ▼▼▼
.sidetitle{
background:url("https://seesaa-blog-design.up.seesaa.net/image/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:0px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字箇所は、過去の作業で修正した箇所です。

以上の作業で、サイドコンテンツのタイトルの背景画像は、修正したものに置き換わります。

▼▼▼ 変更前 ▼▼▼
SD_024_02.JPG

▼▼▼ 変更後 ▼▼▼
SD_024_06.JPG

今回の修正では、猫の足跡の画像が少し横長になってしまいましたが・・・ここでは良しとしましょう。

もしこれが気になる方は、画像加工ソフトを使って、画像を横に継ぎ足すなどの修正を行ってみてください。

これで、左サイドバーのサイズ調整は完了です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年01月04日

【第23回】サイドバーの幅を変更する

第22回からのブログの幅を変更するシリーズ。

今回は、左サイドバーの幅を広げてみます。

第2回でご紹介した、CSS変更画面を開いて下さい。

前回解説した通り、Seesaaブログの左サイドバーは、#links-left要素で定義されています。

この中で、サイドバーの幅を表すプロパティはwidthになります。
従って、このwidthの値を変更すれば、サイドバーの幅が変更されることになるのです。

★左サイドバーの幅を変更する方法★

#links-left要素の中のwidthプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
#links-left{
width:200px;
float:left;
margin-right:20px;
padding:0px 0px 0px 0px;
line-height:1.5;
}

▼▼▼ 変更後 ▼▼▼
#links-left{
width:250px;
float:left;
margin-right:20px;
padding:0px 0px 0px 0px;
line-height:1.5;
}

これで、左サイドバーの幅が広くなりました。

▼▼▼ 変更前 ▼▼▼
SD_023_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_023_02.jpg

作業完了!

・・・あれ?
左サイドバーの幅が広くなったのは良いですが、メインコンテンツが消えてしまいました。

メインコンテンツがどこに行ったかというと・・・

SD_023_03.jpg

ご覧の通り、左サイドバーの下に表示されてしまっています。

これは、左サイドバーが広がった(200px⇒250px)ことにより、ブログ全体の幅(840px)では、メインコンテンツ(620px)を表示できなくなったために起こる現象です。
このままではまずいですね。

ただ、左サイドバーの幅自体は、これで編集完了です。

メインコンテンツの表示位置がおかしいのは、まだメインコンテンツの幅を狭めていないから。
この作業は、今後行っていきます。

今回はここまでです。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年01月03日

【第22回】ブログの幅を変更する

今回から5回にわたって、ブログの幅を変更する方法をご紹介していきたいと思います。

現在使用しているこねこ(左サイドバー)というテンプレートの幅は、ご覧の通りとなっています。

SD_022_01.jpg

すなわち、ブログ全体の幅は840px
その内訳として、左サイドバーの幅が200pxで、メインコンテンツ部分が620pxとなっています。
また、左サイドバーとメインコンテンツの間に20pxの空間があり、この空間も含めると合計で840px、すなわちブログ全体の幅と同じとなります。

今回からの一連の編集で、このブログ幅を変更してみたいと思います。


さて、その編集内容ですが、まずはブログ全体の幅は変更せず、左サイドバーとメインコンテンツの幅のみを変更してみましょう。

  ●左サイドバーの幅を200pxから250pxに変更する。
  ●メインコンテンツの幅を620pxから570pxに変更する。

左サイドバーを50px広げ、その分メインコンテンツを50px狭める形です。

今回からの一連の変更を施したブログは、こんな形になります。

SD_025_01.jpg


それでは、早速CSSの編集に入っていきましょう!


・・・と、その前に、今回はまず、Seesaaブログの構成を解説したいと思います。
概略レベルでもこれを押さえておかないと、いざCSSを編集する時に???になってしまいますので。

よろしいでしょうか。

さて、Seesaaブログでは、大まかに言ってCSS上このような構成となっています。

SD_022_02.jpg

まず、ブログ全体を@#containerという要素で定義しています。
ここで、ブログ全体の幅840pxなどを定義しています。

次に、タイトル部分を表すA#bannerという要素があります。
タイトル文字や説明文、タイトル画像を定義している箇所ですが、今回の編集では特に変更は行いません。

さて、次にあるのがB#links-leftです。
左サイドバーを表す要素です。
この中で、現在の200pxというサイドバーの幅が定義されています。
今回の変更の本命の1つです。

また、左サイドバーとメインコンテンツの間の空白である20pxも、この要素で定義されています。

ちなみに、右サイドバーの場合は#linksという要素が使われますので、右サイドバーのテンプレート、あるいは両サイドバーのテンプレートを使用している方はそちらも確認してみて下さい。

最後にご紹介するのが、メインコンテンツを表すC#content要素。
この中で、現在の幅である620pxが定義されています。
こちらも、今回の編集で変更していきましょう。


ということで、次回からの編集では、B#links-leftC#contentを編集して、左サイドバーとメインコンテンツの幅を変えていきます。

どうぞお楽しみに。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年01月02日

【第21回】画像の結合とコメント挿入を行う

第19回に引き続き、今回もExcelを使った画像加工の方法をご紹介します。

今回ご紹介するのは、下記2点です。

 (2) 1画面に収まらない画面を、複数取得して結合している。
 (3) 画面画像に枠線やコメントを記入している。

なお、今回もExcelの他にPictBearというフリーソフトを使用します。
PictBearについては、第17回をご覧下さい。


さて、まずは複数の画像を結合させる方法です。
これは、Excel上で画像をつなげ、それをPictBearを用いてjpg方式で保存する形になります。

ここでは、第19回の記事で加工した画像を、そのまま使って説明していきます。

★Excelでの画像加工方法C:複数の画像を結合する★

<手順1>
結合させたい複数の画像を取得し、それぞれExcelに貼りつける。

SD_021_01.jpg

<手順2>
それぞれの画像をトリミングし、不要な箇所を取り除く。

SD_021_02.jpg

<手順3>
Excel上で画像を移動させ、1つの画像に見えるよう調整する。

SD_021_03.jpg

<手順4>
Excel上で保存したい画像全てを選択し、クリップボードへコピーする。
複数画像を選択したい場合は、Shiftキーを押下しながらマウスで各画像をクリックします。
クリップボードへのコピーは、右クリックしてコピーか、Ctrl+cキーで行います。

SD_021_04.jpg

<手順5>
PictBearを起動し、クリップボードの画像を貼りつけ、jpg形式で保存する。

SD_021_06.jpg

以上の作業で、ご覧のように複数の画面キャプチャを結合した画像を取得することができます。

SD_021_05.jpg

ここまで、よろしいでしょうか。

画像の加工については、PictBearでもやり方はあると思います。
ただ、私の場合はExcelでの加工に慣れているので、この方法を使用しています。
やりやすい方法で実施して頂ければと思います。


さて、それでは最後に、画像にコメントを挿入する方法をご紹介します。

私の場合、これもExcel上で行っています。

やり方は、Excel上で画像に枠線やコメントを挿入し、その画像も一緒にPictBearにコピーしてjpg形式で保存するだけです。

★Excelでの画像加工方法D:画像に枠線やコメントを挿入する★

<手順1>
Excel上で画像に枠線やコメントなどを挿入する。
枠線やコメントは、挿入⇒図などで挿入できます。
詳細はExcelのヘルプをご覧下さい。

SD_021_07.jpg

<手順2>
保存したい画像を全て選択し、クリップボードへコピーし、PiceBearに貼りつけてjpg形式で保存する。
(注)方法は上記手順4⇒手順5と同じです。

SD_021_08.jpg

以上の作業を実施すると、このような画像が出来上がります。

SD_021_09.jpg

いかがでしょうか。

ブログという限られたスペースに画像を掲載する場合は、その画像の大きさや強調方法には多少の工夫が必要となります。
また、掲載したい画像が思い通りに取得できない場合(例えば1画面に表示しきれない画像のキャプチャなど)は、画像の加工も必要となります。

画像加工には様々な方法があるため、今回の一連の画像処理方法はあくまでも私のやり方です。
ですが、Excelを除き、フリーソフトを駆使してもこのぐらいのことは可能となります。

ブログに貼りつける画像加工で困った時は、是非試してみてください。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
ラベル:EXCEL ツール 画像
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2010年12月31日

【第20回】ここまでのまとめ(第11回〜第19回)

こんにちは、ほくほくです。

このブログも、始めてから随分と記事が溜まってきました。

そこで今回は、第11回から第19回までに掲載した記事の概要をご紹介したいと思います。

なお、それ以前の記事についてはこちらをご覧下さい。

  ◆【第10回】ここまでのまとめ(第1回〜第9回)



【第11回】「自由形式」にタイトルと枠線を表示する

Seesaaブログのサイドバーにおいて、自由度の高いコンテンツを掲載可能な自由形式パーツの編集方法をご紹介しました。

具体的には、他のサイドバーコンテンツと同様、タイトルを表示したり、枠線を設定する方法をご紹介しています。
また、この回に初めて、コンテンツHTML編集画面の操作方法もご紹介しました。

Seesaaブログを運用しコンテンツを充実させていく中で、最も使用頻度が高い手法だと思います。

SD_011_04.jpg



【第12回】ボックス広告の枠線を調整する

第6回の記事でサイドコンテンツに枠線を付けた際、ボックス広告には中途半端な枠線が表示されてしまいました。
その解決方法を掲載しています。

解決方法としては、サイドコンテンツのタイトルを追加表示する方法と、枠線を表示させない方法の2つを解説しています。

これで、サイドコンテンツに枠線を設定する作業が、一通り完了しました。

SD_012_03.JPG



【第13回】CSSのクラスの調べ方

ブログのCSSをカスタマイズする際、最も重要なのは、どの部分にどのCSSが適用されているかを知ることです。

そこでこの回では、実際に自分のブログのHTMLソースコードを見て、適用されているCSSを確認する方法をご紹介しました。

一度じっくりやっておくと、その後のカスタマイズ作業が容易になります。

SD_013_03.jpg



【第14回】記事の枠線と文字のスペースをあける

ブログの記事を見やすくする方法として、文章と枠線との間隔を調整する方法をご紹介しました。

使用したのは、CSSのpaddingプロパティです。

marginプロパティと同様、paddingプロパティもブログのテンプレートには頻繁に使用されているので、その効果について把握しておくと良いでしょう。

SD_014_03.jpg



【第15回】サイドコンテンツの枠線と文字のスペースをあける

第14回と同様にpaddingプロパティを使用して、今度はサイドコンテンツの文章と枠線との間隔の調整方法をご紹介した回です。

ブログのサイドコンテンツは、特に限られたスペースにコンテンツを盛り込む必要があるので、paddingは適切に設定してあげましょう。

SD_015_02.JPG



【第16回】画像サムネイルサイズを変更する

この回から、ブログ用の画像加工方法の紹介に入っていきました。

ブログに掲載する画像の表現力を高めたり、ブログのテンプレートそのものを修正する場合には、画像加工のスキルも必要になってきます。

この回にまずご紹介したのは、Seesaaブログに画像をサムネイルで貼りつけた際の、そのサムネイルサイズの調整方法です。

SD_016_001.jpg



【第17回】画像のサイズを調整する

この回では、画像のサイズを調整する方法を、フリーソフトのPictBearを使ってご紹介しました。

この画像サイズの調整は、非常に使用頻度の高い手法です。

SD_017_005.jpg



【第18回】画面の一部をキャプチャする

画像の加工ではなく、画像の取得方法をご紹介した回です。

この回では、一般的な画面のキャプチャ方法と、WinShotというフリーソフトを使った、一部キャプチャ方法をご紹介しました。

第17回と同様、こちらも非常に使用頻度が高い手法で、私はほぼ毎日使用しています。

SD_018_03.jpg



【第19回】画像の切り出しを行う

取得した画像のトリミングを行う方法として、Excelを使った方法をご紹介しました。

少し自由度の高い画像加工方法として知っておくと、何かの時に役立つ方法です。

SD_019_03.jpg



以上が、第11回から第19回までの記事掲載内容になります。

ここまでの作業で、デフォルトのテンプレートとその内容を、だいぶ自由に編集できるようになったかと思います。
画像加工の解説があと1回残っていますが、その後は、今度はテンプレートの大きさを変えていく方法の解説に入っていきたいと思います。

また、ブログの記事も溜まってきたので、そろそろ整理していきたいと考えています。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
ラベル:まとめ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。