2011年01月20日

【第39回】タイトル画像を変更する

ブログのタイトル画像はブログの顔でもあります。

このタイトル画像は、やっぱり自分の好きな画像にしたいですよね。

ということで今回は、ブログのタイトル画像を変更してみましょう!
現在使用しているSeesaaブログのテンプレートこねこ(左サイドバー)のタイトル画像を変更する方法を解説していきます。

なお、ここでの変更後の画像は、同じくSeesaaブログの猫と金魚(左サイドバー)テンプレートのタイトル画像にしてみます。

これです。

SD_039_header.jpg

第22回で解説した通り、Seesaaブログのタイトル領域を定義しているのは#bannerです。
今回は、この中のプロパティを修正することになります。

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

#bannerセレクタのプロパティbackground-imageの値を、用意した画像のURLに修正する。

ここでは、https://seesaa-blog-design.up.seesaa.net/image/SD_039_header.jpgという画像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/SD_039_header.jpg");
background-repeat:no-repeat;
background-position:bottom center;
padding:0px 220px 0px 40px;
margin-bottom:25px;
height:294px;
}

この変更により、ブログのタイトル画像がご覧のように変更されます。

▼▼▼ 変更前 ▼▼▼
SD_039_04.jpg

▼▼▼ 変更後 ▼▼▼
SD_039_05.jpg

以上のように、タイトル画像の変更は非常に簡単で、かつ、ブログの見た目に非常に大きなインパクトをもたらします。

是非お気に入りの画像で、ブログのタイトルを飾ってあげて下さい。

タイトル画像の変更方法は以上で完了です。

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

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



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

2011年01月19日

【第38回】コメント欄に背景画像を設定する

そういえば、このブログではまだ、背景画像について触れていませんでした。

良い機会なので、コメント欄に背景画像を表示させてみたいと思います。

第36回で解説したように、Seesaaブログのコメント欄はご覧のような構成になっています。

SD_036_02.jpg

今回は、この中の@#commentsに、以下のような背景画像を表示させてみます。

marble02.jpg


★コメント欄に背景画像を表示させる方法★

#commentsbackground-imageプロパティを追加し、背景画像を表示する。
さらにbackground-repeatプロパティを設定し、背景画像を繰り返し表示されるようにする。

▼▼▼ 変更前 ▼▼▼
#comments {
padding:10px 0px 10px 10px;
margin-top:25px;
background:#fff;
}

▼▼▼ 変更後 ▼▼▼
#comments {
padding:10px 0px 10px 10px;
margin-top:25px;
background:#fff;
background-image:url(https://seesaa-blog-design.up.seesaa.net/image/marble02.jpg);
background-repeat:repeat;

}

これで、コメント欄全体に背景画像が表示されます。

▼▼▼ 変更前 ▼▼▼
SD_036_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_038_01.jpg

いかがでしょう。

今回はコメント欄に背景画像を設定してみましたが、backgroundプロパティを使えば他の箇所にも背景画像を表示することができます。

お試しください。

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

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

2011年01月18日

【第37回】コメント欄に枠線を設定する

今回は、コメント欄に枠線を付けてみたいと思います。

前回ご紹介した通り、Seesaaブログのコメント欄はご覧のような構成になっています。

SD_036_02.jpg

今回は、この中のB.comments-bodyクラスにオレンジ色の破線で枠線を設定してみましょう。

★コメント欄の各コメントに枠線を設定する方法★

.comments-bodyクラスにborder系のプロパティを設定する。

▼▼▼ 変更前 ▼▼▼
.comments-body {
margin:0px;
padding:0px;
}

▼▼▼ 変更後 ▼▼▼
.comments-body {
margin:0px;
padding:0px;
border:1px dashed #FF9900;
}

これで、各コメントの周りに枠線が付きました。

▼▼▼ 変更前 ▼▼▼
SD_036_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_037_01.jpg

・・・うーん、かっこ悪い。

今回の枠線を付けるという作業はこれで完了ですが、あまり見た目が良くありませんね。
この記事が書き終わったら、このスタイルシートの適用は除外することにします。

なお、border系のプロパティについては第5回に詳しく記載しているので、そちらも併せてご覧下さい。

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

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

2011年01月17日

【第36回】コメント欄の構成

ブログのコメント欄のデザインを変更してみましょう!

ということでまず今回は、Seesaaブログのコメント欄の構成を解説したいと思います。

こちらが、そのコメント欄の構成です。

SD_036_02.jpg

複雑ですね。

以下で順番に解説していきます。

@#comments
コメント欄全体を定義しているのが、この#commentsです。
こねこ(左サイドバー)テンプレートでは上下左右のpaddingと上のmargin、そして背景色のみが定義されています。

A.comments-head
「この記事へのコメント」および「コメントを書く」の部分のみに適用されているクラスです。

B.comments-body
1つのコメント全体を定義しているクラスになります。
コメントが複数個ある場合、そのコメントの数だけこのクラス、および下記CとDは繰り返されて表示されます。

C.text
コメントの本文部分に適用されているクラスです。
この.textクラスは、ブログの記事本文でも使用されているため、コメントの本文と記事本文の書式は同じになります。

D.comments-post
コメントの「Posted by」の部分を定義しているクラスです。
こねこ(左サイドバー)テンプレートでは、このクラスの下に点線が定義されており、それがコメント同士の境目の線として機能しています。


以上が、コメント欄の主な要素構成となります。

それでは次回以降、少しコメント欄の書式を変更してみましょう。

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

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

2011年01月16日

【第35回】twitterにbit.lyの短縮URLを投稿する

第33回からのtwitter関連シリーズ。

今回は、Seesaaブログの記事をtwitterに自動投稿する際、ブログの記事を短縮URLにして投稿する設定方法をご紹介します。

文字制限が厳しいtwitterでは、その文章内に記載するURLも短い方が便利です。
例えばこのように。

SD_035_01.jpg

Seesaaブログには、記事を自動投稿する時に、自動的に短縮URLを適用してくれるサービスがついています。
今回ご紹介するのは、その短縮URLの設定方法です。

なお、Seesaaブログでは、記事を短縮URLで投稿する方法が3つあります。

  ●egg.jpを使う方法
  ●bit.lyを使う方法
  ●TinyURLを使う方法

今回はこの中で、私も使っているbit.lyを使う方法をご紹介します。

★twitterにbit.lyの短縮URLを投稿する設定方法★

<手順1>
bit.lyのページ(http://bit.ly/)でアカウントを登録し、API Keyを取得する。
まずはhttp://bit.ly/にアクセスし、Sign Upボタンを押下します。
なお、既にbit.lyのアカウントをお持ちの方は、手順3に進んで下さい。

SD_035_02.jpg

<手順2>
表示される画面に、ユーザー名とメールアドレス、パスワードを入力し、Sign Upボタンを押下する。

SD_035_03.jpg

<手順3>
bit.lyにログインしたら、右上のプルダウンを押下し、その中のSettingsをクリックする。

SD_035_04.jpg

<手順4>
表示される画面のAPI Keyの箇所にある文字列をコピーして取得する。

SD_035_05.jpg

以上で、bit.ly側での作業は完了です。

<手順5>
Seesaaブログの管理ページで、設定ブログ設定を押下し、ページ中ほどにある短縮URLの欄を以下のように設定する。
  ●サービス : bit.lyを選択
  ●API Login : 手順2で登録したbit.lyのユーザー名
  ●API Key : 手順4で取得した文字列

SD_035_06.jpg

以上のように設定すると、Seesaaブログで記事をtwitterに自動投稿した時に、記事のURLが短縮URLで投稿されるようになります。

便利な機能なので、是非使ってみましょう!

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

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

2011年01月15日

【第34回】twitterのつぶやきを表示するブログパーツを設置する

今回は、前回の記事でご紹介した、twitterのブログパーツを設置する方法をご紹介します。

そのブログパーツというのは、これのことです。

SD_034_01.JPG

このブログパーツは、つぶやきの表示数やパーツのサイズ、カラーリングなどを設定できるので、その方法も含めてご紹介していきます。

★twitterのブログパーツを設置する方法★

<手順1>
twitterのアカウントホーム画面(http://twitter.com/#!/アカウント名)を開き、右上のプルダウンから設定を選択する。

SD_034_02.jpg

<手順2>
表示される設定画面でプロフィールを選択し、その中の(あなたのWEBサイトにもTwitterを表示させよう)というリンクを押下する。

SD_034_03.jpg

<手順3>
ウィジェット選択画面が表示されるので、自分のサイトを選択し、その中のプロフィールウィジェットをクリックする。

SD_034_04.jpg

<手順4>
プロフィールウィジェットのカスタマイズを行う。
以下では、私のブログに掲載しているウィジェットの設定を紹介していきます。
まず、カスタマイズ画面では、以下の設定。
  ●スクロールバーを表示? : はい
  ●表示するツイート数 : 10

SD_034_05.jpg

<手順5>
デザイン画面で、ウィジェットの色を設定する。
ここでは、現在使用しているこねこ(左サイドバー)テンプレートのカラーリングに合わせ、以下の設定としました。
  ●外枠の背景 : #FF9900(オレンジ)
  ●外枠の文字 : #FFFFFF(ホワイト)
  ●ツイート投稿欄の背景 : #FFFFFF(ホワイト)
  ●ツイートの文字 : #8c663f(ブラウン)
  ●リンク : #FF9900(オレンジ)

SD_034_06.jpg

<手順6>
サイズ画面で、ウィジェットの大きさを設定する。
設定が終わったら、完了&コード取得ボタンを押下する。
ここでは、横幅の自動調整をチェックすると、ウィジェットの大きさが自動で設定されて便利です。
  ●横幅の自動調整 : チェック

SD_034_07.jpg

<手順7>
ウィジェットのソースコードが表示されるので、取得する。

SD_034_08.jpg

<手順8>
Seesaaブログの管理画面で、デザインコンテンツを選択し、自由形式コンテンツに取得したソースコードを貼りつける。

SD_034_09.JPG

以上で、twitterのつぶやきを表示するブログパーツが設定されたはずです。

Seesaaブログには、便利なtwitterとの記事連携機能がありますので、このブログパーツを設置するとなお良いと思います。

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

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

2011年01月14日

【第33回】twitterに記事を自動投稿する

Seesaaブログには、ブログの記事投稿時に自動でtwitterに連携してくれる非常に便利な機能があります。

例えばこんな感じで、記事のタイトルとその記事へのリンクを自動で投稿してくれます。

SD_033_01.jpg

今回は、その設定方法をご紹介します。


なお、この設定作業には、事前にtwitterのアカウントを取得していることが前提となります。

★twitterに記事を自動投稿する方法★

<手順1>
Seesaaブログの管理画面で、設定ブログ設定を開く。

<手順2>
当該画面の中ほどにTwitterとの連携欄があるので、その中のTwitterの認証を行うリンクを押下する。

SD_033_02.jpg

<手順3>
twitterのアクセス許可画面が開くので、許可するボタンを押下する。

SD_033_03.jpg

<手順4>
Seesaaブログの管理画面の表示が変わるので、その中の記事投稿時にTwitterに投稿欄でするを選択し、設定を保存する。

SD_033_04.jpg

<手順5>
記事を投稿する際、記事を書く画面のこの記事の詳細設定の中にTwitterに投稿欄があるので、投稿するが選択されていることを確認して記事を投稿する。

SD_033_05.jpg

以上で、Seesaaでブログを投稿した時に、twitterに連携されます。

twitterを見ていると、たまに「ブログを更新しました!」というつぶやきがありますが、Seesaaブログのこの機能を使用すれば自動でつぶやきが投稿されますので非常に便利です。
是非お試しください。


なお、1点注意事項があります。

上記手順4の画像の中に、Twitterまとめ投稿という欄があります。
ここの自動投稿欄をするに設定すると、1日1回0時過ぎに、twitterに投稿したつぶやきがブログの記事として投稿されます。

例えば、こんな感じです。

SD_033_06.JPG

しかし、この設定はお薦めしません。

理由は、twitterとSeesaaブログの連携が無限ループになってしまうからです。

どういうことかというと、例えば図のように、2010年11月9日のつぶやきが、11月10日の0時過ぎに、Seesaaブログに記事として連携されます。
と同時に、Seesaaブログへの記事投稿のつぶやきがtwitterに連携されます。
そうすると、今度はそのつぶやきが、11月11日0時過ぎにSeesaaブログに投稿され、さらにそれがtwitterにも連携され、次の日もそれが繰り返されて行くのです。

つまり、ブログの方のコンテンツがなくても、毎日ブログへの投稿とtwitterへの連携が延々と繰り返されてしまうのです。

従って、手順4で記事投稿時にTwitterに投稿欄をするに下場合は、Twitterまとめ投稿はしないにした方が賢明です。

逆に、Twitterまとめ投稿をする場合は、記事投稿時にはtwitterに自動投稿しない方が良いでしょう。

twitterへのつぶやきをブログで紹介したい場合は、ブログへの記事投稿ではなく、ブログにtwitterを表示するブログパーツを設置する方法もありますし。
この方法は、次回ご紹介したいと思います。

今回は以上です。

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

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

2011年01月13日

【第32回】新しい引用(blockquote)書式を追加する

前回は既存のblockquoteの書式を変更してみました。

でも、複数の引用書式を使えた方が良いと思いませんか?

例えば、こんな感じです。

デフォルトの引用書式です。

新しい引用書式です。

こんな時どうすれば良いかというと、既存のblockquoteの書式を修正するのではなく、新しく書式を定義してしまえば良いのです。

今回は、その方法をご紹介したいと思います。

★新しい引用(blockquote)書式を追加する方法★

CSS上で新しいblockquoteの書式クラスを定義し、それをHTMLで使用する。

<手順1>
CSSに新しい引用のクラス定義を追加する。
ここでは、既存のblockquoteの書式をコピーして新しいクラスを定義します。
既存のCSSと異なる点は、赤字の箇所です。

.text blockquote.type2{
border:0 solid #E5E5E6;
margin:10px;
padding:8px 12px;
background:#CBFFFF;
color:#A07C61;
}


<手順2>
ブログの記事中でblockquoteを使用する際、その後ろにclass="type2"を付ける。

<blockquote class="type2"></blockquote>

このようにすると、追加したクラスでblockquoteを表示させることができます。

同様に、別のクラス定義を行えば、書式はどんどん追加できます。

デフォルトの引用書式です。

上記で追加した引用書式です。

試しに追加してみた引用書式です。

試しに追加してみた引用書式です。

このように、自分が使いたい書式がなければ、CSSの中に新たにクラスを追加することができるのです。

試してみてください。

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

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

2011年01月12日

【第31回】引用(blockquote)の書式を変更する

今回は、引用などで使用されるblockquoteの書式を変更してみましょう。

これです。

これが引用(blockquote)です。


このデフォルトの引用を、引用領域内をオレンジ色、引用文は白文字にしてみます。

★引用(blockquote)の書式を変更する方法★

.text blockquoteの背景(background)と文字色(color)プロパティを修正する。

▼▼▼ 変更前 ▼▼▼
.text blockquote{
border:0 solid #E5E5E6;
margin:10px;
padding:8px 12px;
background:#FFF0DA;
color:#A07C61;

}

▼▼▼ 変更後 ▼▼▼
.text blockquote{
border:0 solid #E5E5E6;
margin:10px;
padding:8px 12px;
background:#FF9900;
color:#FFFFFF;

}

この修正を行うと、引用箇所がご覧のように変更されます。

▼▼▼ 変更前 ▼▼▼
SD_031_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_031_02.JPG

見やすいかどうかはさておき、これで引用(blockquote)の書式を変更できるのがお分かりになるでしょうか。

今回の修正は、以上となります。


さて、以下は少し余談です。

今回修正したのは、.text blockquote要素でした。

ご存知の通り、引用は<blockquote></blockquote>というHTMLタグで囲む書式となります。

なぜ、今回の要素名には、その前に.textが付いているのでしょうか?

結論から言ってしまうと、これは子孫要素の定義書式になります。
.textという要素の中で記載されるblockquoteのみを定義している書式なのです。

.textは、第3回などでもお伝えした通り、ブログの記事本文の書式を定義しているクラスです。

この.textに半角スペースを空けて記載されたblockquoteの書式は、ブログの記事本文にblockquoteが記載された場合はその書式を使用するという意味を持ちます。
他の場所にblockquoteが記載されても、この書式は適用されません。

このようにCSSでは、セレクタを半角スペースでつなぐと、後ろのセレクタは前のセレクタの子要素となっていきます。

別の例では、第1回でご紹介した#banner h1 aも同様です。
これは、#banner要素の中のh1要素の中のa(リンク)に関する書式設定となります。

ブログのテンプレートのCSSを読み解く際、参考にしてみてください。

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

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

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

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