2011年01月11日

【第30回】ここまでのまとめ(第21回〜第29回)

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

いつの間にか、このブログも記事が溜まり30回目となりました。

Seesaaブログのデザインを変更、あるいはカスタマイズするに当たり、ある程度大きなところは解説できているかと思いますが、もし気になることなどありましたら気軽にコメントなどでお問い合わせください。

さて30回目の今回は、第21回から第29回までに掲載した内容を簡単にご紹介したいと思います。

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

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



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

第16回から続いた画像加工シリーズの最後の1回です。
Excelを使用した画像の加工方法を掲載しました。

これらの画像加工方法を押さえておけば、ブログを運用する上では不自由しないと思います。

SD_021_09.jpg



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

ブログをカスタマイズする時、やりたくなることNo.1のブログ幅変更です。
ブログにバナーを貼ったり、画像を掲載する時、ブログのサイズって結構気になるんですよね。

ということで、ブログ幅の変更方法を掲載するわけですが、それを第26回までの5回に分けて掲載して行くことにしました。
この回はその始まりとして、Seesaaブログの構成を解説しています。

ブログサイズを自由に編集するために押さえておくべきことを掲載していますので、是非一読して下さい。

SD_022_02.jpg



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

ブログの幅を変更する方法を、順番に掲載していっています。

この回は、サイドバーの幅を変更する方法。
編集した要素は#links-leftで、そのwidthプロパティの値を変えて幅を広げました。

ちなみに、この回で解説したのは左サイドバーの幅の広げ方でしたが、右サイドバーのブログをお持ちの方は#links要素を編集すると同様のことができます。

SD_023_02.jpg



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

ブログの幅を変更すると、様々なところに影響します。

この回は、前の回でサイドバーの幅を広げた結果、幅に対してタイトル画像が短くなってしまったことへの対応を行いました。
画像の編集が主ですが、編集後の画像のアップロード、およびCSS上の参照画像の修正を掲載しています。

ブログ全体のデザインを変更する場合には、結構頻度の高い作業となります。

SD_024_06.JPG



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

ブログ全体の幅を変更しないまま左サイドバーの幅を広げた場合、メインコンテンツが入りきらなくなりサイドバーの下に表示されてしまいます。

この回は、メインコンテンツの幅を変更し、その問題に対応しました。

SD_025_01.jpg



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

サイドバー、メインコンテンツとそれぞれの幅の変更方法を掲載してきた後に、この回でブログ全体の幅を変更する方法を掲載しました。
また、ブログ全体の幅を変更したことに伴う主な影響箇所への対応方法も掲載しています。

ブログ全体の幅を変更した際には、様々なところに影響が出ますので、注意しましょう。

SD_026_03.jpg



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

左サイドバーの幅を広げたら、検索ボックスの大きさがアンバランスになって気になりました。

ということでこの回では、Seesaaブログの検索ボックスを修正する方法を掲載しています。
HTML編集です。

SD_027_04.JPG



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

前の回から引き続き、検索ボックスのHTML編集の回です。

この回では、ラジオボタンのデフォルト設定の変更を行いました。

SD_028_01.JPG



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

引き続き検索ボックスのHTML編集の回です。

この回でご紹介したのは、検索ボックスの内容を他のサイドコンテンツに入れてしまうという方法。
HTMLの編集ができれば、こういったオリジナルのサイドコンテンツを作ることができます。

ブログのデザインを自由に変更する際の一例として掲載してみました。

SD_029_01.JPG



以上が、第21回〜第29回までに掲載した内容になります。

ここまでの内容を押さえておけば、Seesaaブログをかなりカスタマイズすることができると思います。
是非試して下さいね。

また、掲載されていないことで何か分からないことがあれば、ご意見頂ければと思います。
私も参考にさせて頂きたいので。

どうぞよろしくお願いします。

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

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


ラベル:まとめ
posted by o(^0^)o ほくほく at 19:50| Comment(6) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

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ブログデザイン | このブログの読者になる | 更新情報をチェックする
×

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