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

2010年12月30日

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

今回はExcelを使った画像の加工方法をご紹介しましょう。

まずはこちらの画像をご覧下さい。

SD_021_09.jpg

これはSeesaaブログのCSSを編集する画面のキャプチャに枠線やコメントを記入したものです。

この画像では、以下の作業を行っています。

 (1) 画面キャプチャの不要な部分を削除している。
 (2) 1画面に収まらない画面を、複数取得して結合している。
 (3) 画面画像に枠線やコメントを記入している。

画像に対してこれらの作業を実施する場合は、Excelがとても便利なのです。
今回はその方法をご紹介します。

なお、今回の作業では、第17回でご紹介したPictBearというツールも使用します。
また、必要に応じて第18回でご紹介したWinShotを併用しても良いと思います。

それでは、上記画像を取得する方法を順に説明していきます。

★Excelでの画像加工方法@:画像加工の準備★

取得した画面キャプチャを、Excelに貼りつけ、画像を加工する準備をします。

<手順1>
Excelを開く。
(注)ここでは、画像が分かりやすいように、Excelのシート全体を青色に塗りつぶしています。

SD_019_01.jpg

<手順2>
取得したい画面キャプチャを、Ctrl+PrtScキーを押下して取得し、Ctrl+vキーなどでExcelに貼りつける。
(注)ここでは、画像全体がわかるように、Excelの表示倍率を少し縮小しています。

SD_019_02.jpg

このExcelに貼りつけた画像を、これから加工していきます。

まずは、Excelに貼りつけた画面画像の、ヘッダーやサイドバーなど、周囲の不要箇所を取り除いてみましょう。
こういう時、Excelのトリミング機能が非常に便利です。

★Excelでの画像加工方法A:画像の不要箇所を取り除く★

Excelのトリミング機能を利用して、画像の不要箇所を削除する。

<手順1>
Excelのツールバーで、書式トリミングを押下する。(Excel2003の場合)
(注)Excel2000の場合は、ツールバーの図ツールバーなどにトリミングボタンがあります。
(注)Officeは2003以降、メニュー配置を大幅に変更しているので、詳細は各バージョンのヘルプをご覧下さい。

SD_019_03.jpg

<手順2>
そうすると、画像の四隅と各辺の中央に太枠が表示されるので、その部分をマウスでドラッグして画像の不要箇所を消す。
ここでは、画像の上辺の中央の太枠を下にドラッグして、画像のヘッダー部分を消してみます。

▼▼▼ 変更前 ▼▼▼
SD_019_04.jpg

▼▼▼ 変更後 ▼▼▼
SD_019_05.jpg

<手順3>
同様に、画像の右辺、左辺、下辺の不要箇所もトリミングする。

SD_019_06.jpg

以上で、取得した画面キャプチャの不要箇所が削除できました。

このように、Excelのトリミング機能は、画像の一部を切り出す時に重宝します。

それでは、以上で加工した画像を一旦jpg形式で保存してみましょう。

★Excelでの画像加工方法B:加工した画像をjpg形式で保存する★

PictBearを使用して、加工した画像をjpg形式で保存する。

<手順1>
Excel上で画像を選択し、右クリックしてコピー、またはCtrl+cキーを押下して、画像をクリップボードにコピーする。

<手順2>
PictBearを起動し、貼りつけ、またはCtrl+vキーを押下して、クリップボードの画像を貼りつけ、ファイル⇒名前を付けて保存でjpg形式で保存する。

SD_019_07.jpg

<手順3>
保存したjpg画像をブログに貼りつける。

SD_019_08.jpg

ご覧のように、Excelで不要な部分を削除した画像を、ブログに貼りつけることができました。

Excelのトリミング機能の便利さがお分かり頂けたでしょうか。

記事が長くなってきているので、今回はここで切りましょう。

今回は、

 (1) 画面キャプチャの不要な部分を削除している。

の方法を解説しました。

次回は、

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

の方法をまとめて解説してしまいたいと思います。

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

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

2010年12月29日

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

今回は、画面の一部をキャプチャする方法をご紹介します。

画面のキャプチャは、Windowsのキー操作でも取得することができます。
まずはその方法を2つご紹介します。

★画面全部をキャプチャする方法★

<手順1>
PrtScキーを押下すると、パソコンの画面全部のキャプチャがクリップボードに格納される。

<手順2>
前回紹介したPictBearのような画像加工ソフトを起動し、クリップボードのキャプチャ画像を貼りつける。

<手順3>
画像加工ソフトにて、キャプチャ画像をjpg形式で保存する。

<取得例>
SD_018_01.jpg

もうひとつ、Windowsのキー操作で画面のキャプチャを取得する方法があります。

★アクティブウィンドウをキャプチャする方法★

<手順1>
Altキーを押しながらPrtScキーを押下すると、パソコンの画面のうち現在アクティブなウィンドウの画像のみがクリップボードに保存される。

<手順2>
先ほどと同じく、PictBearのような画像加工ツールにクリップボードの画像を貼りつけ、jpg形式で保存する。

<取得例>
SD_018_02.jpg

以上は、Windowsパソコンのキー操作で可能な画面キャプチャの取得方法です。


さて、このブログでは、場合に応じてWinShotというキャプチャ取得ツールを使用しています。

例えば、過去にこのブログで掲載したこのような画像の場合です。

SD_015_02.JPG

この画像は、アクティブな画面の一部をキャプチャしたものです。

もちろん、上記の操作でアクティブウィンドウのキャプチャを取得し、その後画像加工ツールで一部のみを切りだすような加工をしても良いのですが、あらかじめ画面の必要な部分のみを取得し画像ファイルで保存できた方が作業が楽ですよね。
WinShotは、そういう画面の一部保存ができるような、便利なフリーソフトなのです。

WinShotは、例えばこちらのサイトから取得できます。
非常に便利ですので、是非一度使用してみて下さい。

  ◆Vector WinShot

さて、このWinShotは様々な使い方がありますが、私が主に使用しているのは、画面の一部を範囲指定で取得し、jpg形式でファイルに保存する機能です。
その設定方法と使用方法を、以下で解説します。

★WinShotで画面の一部を範囲指定するための設定方法★

<手順1>
上記サイトからWinShotを取得し、起動する。

<手順2>
画面右下のタスクトレイにWinShotのアイコンが表示されるので、右クリックし、環境設定をクリックする。

SD_018_03.jpg

<手順3>
表示されるWinShotの環境設定画面にてその他の設定タブを押下し、トレイアイコンのダブルクリック操作JPEGで保存(矩形範囲指定)を選択し、OKボタンを押下する。

SD_018_04.jpg

これで準備完了です。

それでは、実際にWinShotを使ってみましょう。

★WinShotで画面の一部をキャプチャする方法★

<手順1>
WinShotを起動する。

<手順2>
画面右下のタスクトレイにあるWinShotのアイコンをダブルクリックする。

<手順3>
マウスで、画面の取得したい箇所を指定する。
1度目のクリックで範囲指定が開始され、2度目のクリックで範囲指定が完了する。
指定した範囲は赤い枠線が表示される。

SD_018_05.jpg

<取得例>
SD_018_06.JPG

以上が、簡単ですが、WinShotの操作手順です。

このWinShotというソフト、私はもう10年近く使っていますが、本当に便利です。
まだ使ったことがない方は、是非一度使ってみて下さい。

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

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

2010年12月28日

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

前回は、Seesaaブログに掲載するサムネイル画像のサイズを調整する方法をご紹介しました。

今回は、サムネイルではなく、画像そのものを調整する方法をご紹介します。

前回と今回の違いを簡単にお見せすると、こんな感じになります。

▼▼▼ 前回の画像サムネイルサイズ調整 ▼▼▼
SD_016_001.jpg

▼▼▼ 今回の画像サイズ調整 ▼▼▼
SD_017_001.jpg

見た目は全く変わりませんが、前回の場合は画像をオリジナルサイズでブログにアップし、その縮小サムネイル画像を記事に掲載しています。
今回の場合は、画像そのもののサイズを縮小した上で、ブログにアップし掲載しています。

前回の記事でお伝えした通り、このブログでは、横幅が500pxより大きい画像については全て500pxに調整した上で画像を掲載しています。

画像の表示サイズを調整する方法は2つ。

1つは、前回ご紹介した、サムネイル画像の調整。
もう1つが、今回ご紹介する、画像そのもののサイズ調整です。

両者の違いは、ブログにアップする画像のファイルサイズです。
当然、あらかじめ小さくしておいた画像の方が、ファイルサイズも小さくなります。

Seesaaブログのディスク容量は最大100MBなので、始めのうちはあまり画像サイズを気にしなくていいと思いますが・・・
私の場合、メインブログであるo(^0^)o ほくほくポートフォリオの方はもう3年半続いており、ディスク容量も半分以上使っている状態になっています。
そういう状態になると、画像サイズは、大きい必要がない場合は可能な限り小さい方が良いです。

また、ディスク容量の問題だけでなく、ブログに掲載する画像というのは何かと大きさが気になったりします。

今回は、その画像サイズの調整方法をご紹介したいと思います。


さて、画像サイズの調整ですが、基本的にはソフトを使って行います。

画像を加工するソフトは本当にたくさんあって、別に何でも良いと思います。
Windowsパソコンの「ツール」の中に入っているペイントでも良いと思いますし。

ただ、私の場合は、昔からPictBearというフリーソフトを使っています。
なので今回は、このPictBearを使った画像サイズの調整方法をご紹介したいと思います。

なお、PictBearはこちらから無料でダウンロードできます。

  ◆Vector PictBear

★画像サイズの調整方法★

<手順1>
加工したい画像を用意する。
パソコン画面に表示されている画像を加工したい場合は、Alt+PrtScキーを押下して画面のキャプチャを取得する。

<手順2>
PictBearを起動する。

SD_017_002.jpg

<手順3>
加工したい画像を開く。
または、キャプチャした画像を貼りつける。

SD_017_003.jpg

<手順4>
イメージイメージサイズの変更をクリックする。

SD_017_004.jpg

<手順5>
表示される子画面で、縦横比を固定にチェックが入っているのを確認した上で、の欄に自分が設定したい画像サイズの横幅を記入する。
※これによって、画像の縦サイズは、横サイズに合わせて調整されます。

SD_017_005.jpg

<手順6>
画像サイズの調整が終わったら、ファイル名前を付けて保存をクリックし、適当な名前をつけてjpg形式で保存する。

SD_017_006.jpg

上記は、あくまでも画像サイズ調整の一例になります。

他にも画像加工ソフトはたくさんありますし、ファイル形式もjpgにこだわる必要はありません。
画像サイズの調整が自由にできる方は、どうぞご自分のやりやすい方法で実施して下さい。
ただ、画像サイズの調整方法をご存知ない方には、私がやっている方法ということでお伝えしておきます。


なお、PictBearについてはこちらの本が大変参考になります。
より詳しい使い方を知りたい方は、こちらをご覧下さい。

はじめてのPictBear〈2〉 (I・O BOOKS)
はじめてのPictBear〈2〉 (I・O BOOKS)はせべ れいこ

工学社 2009-05
売り上げランキング : 61365

Amazonで詳しく見る
by G-Tools
はじめてのPictBear (I・O BOOKS) はじめてのGIMP2―無料で使えるペイントツールの決定版! (I・O BOOKS) アメブロをカスタマイズ 魅せるブログデザインを作ろう! GIMPフォトレタッチ完全ガイド2010 (アスペクトムック) はじめてのPixia―無料で使える高機能ペイントツール (I・O BOOKS)


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

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

2010年12月27日

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

今回から数回にわたって、ブログに掲載する画像の調整方法をご紹介していきます。

このブログでは、毎回様々な画像を掲載しています。

例えば、CSSを編集する場合は、編集前の画像と編集後の画像を記事に掲載しています。
この場合、画面表示の一部を切りだしたり、取得した画像の余計な部分を削除したりしています。
また、画像を掲載する場合は、画像の横幅が500pxを超える場合は、500pxに縮小して掲載しています。

こういった、ブログに掲載する画像の調整方法について解説していきます。


今回は、画像のサムネイルのサイズを変更する方法をご紹介します。


ブログに画像を掲載しても、ブログの枠をはみ出てしまったら見苦しいですよね。

例えば、このブログ全体を画像として記事に掲載する場合。
当然、このブログ全体のサイズは記事よりも大きいので、その画像を記事に掲載しようとするとはみ出てしまうことになります。

そんな時、Seesaaブログには、縮小された画像をサムネイルとして掲載する機能があります。

例えばこんな感じになります。

SD_016_001.jpg

画像をクリックすると、別画面に元のサイズの画像を表示してくれます。

方法は非常に簡単で、ブログの記事を書く画面で、記事の文章入力画面のすぐ下にある「ファイル」の中にある@「サムネイルで表示」のチェックを入れた状態で、A画像をクリックするだけです。

SD_016_002.jpg

ところでこのサムネイル画像、Seesaaブログのデフォルト設定では、横幅が320pxになるようになっています。
画像の高さは、横幅の比率に合わせて自動で調整されます。

今回は、このデフォルト320pxになっているサムネイルサイズを変更してみましょう。

私の場合は、横幅が500pxになるように修正しています。

★画像のサムネイルサイズを変更する方法★

<手順1>
Seesaaブログの管理画面で、@設定Aブログ設定をクリックする。

SD_016_003.jpg

<手順2>
表示される画面の下の方にあるBサムネイルサイズの欄に、自分が設定したいサムネイルサイズを記入する。
※ここでは500pxに設定しています。

SD_016_004.jpg

<手順3>
当該画面の一番下にある実行またはブログ設定の変更ボタンを押下する。

こうすると、記事投稿画面で画像をサムネイルで貼りつけした時に、自動で設定されるサムネイルサイズが変更されます。

▼▼▼ 変更前 ▼▼▼
SD_016_001.jpg

▼▼▼ 変更後 ▼▼▼
SD_016_001.jpg

簡単ですね。

画像のサムネイルサイズは、もちろん記事に貼りつけた後で手動で修正することもできます。
ですが、こうして自動で設定されるサイズをあらかじめ変更しておくと、手間が省けます。

今回は、画像サムネイルサイズの変更方法でした。

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

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

2010年12月26日

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

前回は、記事本文とその枠線との間のスペースを広げるCSS編集を行いました。

今回は、サイドコンテンツの中身と枠線との間のスペースを広げてみましょう。

SD_015_01.JPG

ご覧のように、サイドコンテンツは、ちょっと上下の隙間が狭い気が・・・

本当にちょっとですけど。

ということで、今回はこのサイドコンテンツの上下の隙間を広げてみたいと思います。

サイドコンテンツを定義しているクラスは、もうこのブログで何度も採り上げた.sideクラスです。
そして、枠線との隙間を調整するのは、前回も使用したpaddingプロパティ。

これさえ分かっていれば、今回の修正は簡単です。

★サイドコンテンツの枠線と文字のスペースを調整する方法★

.sideクラスのpaddingプロパティを調整する。

▼▼▼ 変更前 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
/* ▼▼▼ 2010/12/13 【第4回】サイドコンテンツフォントサイズ小設定 ▼▼▼ */
font-size:11px;
/* ▲▲▲ 2010/12/13 【第4回】サイドコンテンツフォントサイズ小設定 ▲▲▲ */
/* ▼▼▼ 2010/12/15 【第6回】サイドコンテンツ枠線追加 ▼▼▼ */
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;
/* ▲▲▲ 2010/12/15 【第6回】サイドコンテンツ枠線追加 ▲▲▲ */

}

▼▼▼ 変更後 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:5px 8px 10px 8px;
/* ▼▼▼ 2010/12/13 【第4回】サイドコンテンツフォントサイズ小設定 ▼▼▼ */
font-size:11px;
/* ▲▲▲ 2010/12/13 【第4回】サイドコンテンツフォントサイズ小設定 ▲▲▲ */
/* ▼▼▼ 2010/12/15 【第6回】サイドコンテンツ枠線追加 ▼▼▼ */
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;
/* ▲▲▲ 2010/12/15 【第6回】サイドコンテンツ枠線追加 ▲▲▲ */
}
(注)灰色字箇所は、過去にこのブログで変更を加えた箇所です。

今回は、.sideクラスの上側に5px、下側に10pxのスペースを設定してみました。
また、左右のスペースをそれぞれ8pxずつに修正しています。

その結果がこちらです。

▼▼▼ 変更前 ▼▼▼
SD_015_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_015_02.JPG

上下のスペースが広がり、左右のスペースが変わりました。

今回は以上です。

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

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

2010年12月25日

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

今回は、微調整をしてみたいと思います。

現在このブログは、Seesaaブログのこねこ(左サイドバー)というテンプレートに、今までの記事でご紹介したデザイン変更を加えてきています。

その結果、私自身が気に入るようなデザインになってきているわけですが、まだまだ微妙に感じている箇所もあります。

例えば、ここです。

SD_014_01.jpg


このテンプレートはそもそも枠線がなかったので違和感がなかったのですが、第5回で記事に枠線を付けた結果、その枠線と記事本文との間の隙間が狭く感じられるようになってしまいました。

今回は、この隙間を広げてみます。


さて、隙間については、以前第7回で一度説明しました。

.sidetitleクラスに設定したmarginプロパティがそれです。
このmarginプロパティは、ボックスの外側に隙間を設定するプロパティでした。

今回は、ボックスの枠線とその内側にある文章との隙間の調整です。
この場合は、marginプロパティではなく、paddingというプロパティを使います。

このpaddingプロパティを記事本文に適用するわけです。
記事本文を表すクラスは、第3回で記事本文のスタイルを太字でなくすときに一度取り扱いました。
.textクラスです。

どのくらいのスペースを設定するかは本当に個人の好みになってしまうのですが、現状は5pxしかあいていないので、これを15pxにしてみることにします。

★記事の枠線と文字のスペースをあける方法★

.textクラスのpaddingプロパティの値をふやす。

▼▼▼ 変更前 ▼▼▼
.text{
margin:0 0 0 0px;
color:#8C653F;
padding:10px 5px 10px 5px;
line-height:1.5;
/* ▼▼▼ 2010/12/12 【第3回】フォント太字設定削除 ▼▼▼ */
/* font-weight:bold; */
/* ▲▲▲ 2010/12/12 【第3回】フォント太字設定削除 ▲▲▲ */

}

▼▼▼ 変更後 ▼▼▼
.text{
margin:0 0 0 0px;
color:#8C653F;
padding:10px 15px 10px 15px;
line-height:1.5;
/* ▼▼▼ 2010/12/12 【第3回】フォント太字設定削除 ▼▼▼ */
/* font-weight:bold; */
/* ▲▲▲ 2010/12/12 【第3回】フォント太字設定削除 ▲▲▲ */

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

このように変更すると、下図のように記事本文と枠線との隙間が広くなります。

▼▼▼ 変更前 ▼▼▼
SD_014_02.jpg

▼▼▼ 変更後 ▼▼▼
SD_014_03.jpg

変更した箇所がお分かりになるでしょうか。

ちょっとした違いではありますが、こういうちょっとした調整がサイト全体の見映えを左右することもあるので、自分が納得するまでいろいろ試してみましょう。


なお、paddingプロパティには、いくつか書き方があります。

例えば上記のように、

  padding:A B C D;

と書くと、これは

  ●上がA
  ●右がB
  ●下がC
  ●左がD

となることが決まっています。

また、

  padding:E F;

のように書かれていると、これは

  ●上下がE
  ●左右がF

であることを表します。

もちろんmarginのように、

  padding-top:G;

という形で、上の隙間のみを定義することもできます。

既にSeesaaで作成されているテンプレートを修正する場合には、これらの書式全てを覚える必要はありません。
ただし、テンプレートにどの形で記載されているかは理解できるようにしましょう。

今回は以上です。

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

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

2010年12月23日

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

今回は、少し話題を変えてみたいと思います。

題して『CSSのクラスの調べ方』。

Seesaaブログである場所のデザインを変更したいとき、CSSのどの部分を修正すれば良いのか。
その調査の方法を説明したいと思います。


例えば、カレンダーに枠線を追加したいとき、CSSのどの部分を修正すれば良いのでしょうか?

その方法は第9回で解説した通りなのですが、自分で調べる時はどうすればよいのでしょう?


その答えは、自分のブログのHTMLソースを見てみるです。

HTMLのソースを見ることによって、ブログのどの部分にどのCSSが適用されているのかが分かります。
従って、修正すべきCSSが分かるのです。

それでは、HTMLソースをどのようにして見るかというと・・・

★HTMLソースの表示方法★

<手順1>
HTMLを見たいサイトをブラウザで表示する。

<手順2>
ブラウザの表示ソースを押下する。

SD_013_01.jpg

以上の操作を実施すると、このようなHTMLソース画面が表示されます。

SD_013_02.jpg

表示されましたか?

あとは、この中を見ていけば、適用されてるCSSが分かります。


例えば、先ほどのカレンダー。

HTMLソースの中でカレンダーがどの部分かは、例えば現在ですとブログのカレンダー部分に2010年12月と表示されていますので、HTMLソースの中でその文字列を探してみましょう。

SD_013_03.jpg

ありました、@の箇所です。

この部分にどのCSSが適用されているかですが、ざっくりと見て、A<div id="calendar">が該当しそうです。

そこで、CSSの#calendarという部分を試しに修正して枠線を付けてみると、ちゃんと枠線が表示されることが分かります。

また、通常のサイドコンテンツ、たとえばファンのコンテンツに枠線を付けたいときは、やっぱりHTMLソースでファンという文字列を探してみましょう。

SD_013_04.jpg

Bの箇所ですね。

ファンという文字がC<div class="sidetitle">で囲われているので、サイドコンテンツのタイトルには.sidetitleクラスが適用されていることがわかります。
また、その下のコンテンツにはD<div class="side">と記載されているので、サイドコンテンツの本文部分には.sideクラスが適用されています。

同様に、第8回で解説したタグクラウド。
Eの箇所です。

タイトルには、他のサイドコンテンツと同じく.sidetitleクラスが適用されているのが分かります。
そして本文部分には、F<div class="side-tag">と記載されているので、.side-tagクラスが適用されているのが分かるわけです。

HTMLソースで、どの部分にどのクラスが適用されているのかが分かったら、あとはCSS変更画面でそのCSSを修正して、プレビューしてみましょう。
大体、希望通りの場所に修正が適用されると思います。

SeesaaブログのCSSにはたくさんの定義が記載されていて、それをそのまま見ていても、慣れない方には分からないことばかり。
そんな時はHTMLソースの方を見てみて、修正するCSSにアタリをつけていきましょう。


ちなみに、CSSは通常、以下の書式となっています。

  セレクタ { プロパティ:値; }

そしてこのセレクタには、いくつか種類があります。

HTMLソース上でclass=の形式で設定されているセレクタをクラスセレクタと言います。
例えば、<div class="side">なんかがそうです。
このクラスセレクタは、CSSでは“.”で始まる記述となっています。
従って、sideはCSS上では.sideと記載されています。

一方、HTMLソース上でid=の形式で適用されているものをIDセレクタと言います。
例えば<div id="calendar">
このIDセレクタは、CSS上では#calendarのように“#”で始まる記述となっています。

クラスセレクタとIDセレクタの違いについては、興味のある方はCSSの本などで調べてみてください。

Seesaaブログで、用意されているテンプレートをカスタマイズする場合には、両者の違いはあまり意識する必要はないと思います。

以上、今回は修正するCSSのクラスの調べ方でした。

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

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

2010年12月21日

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

第6回でサイドバーのコンテンツに枠線を付けた際の最後の課題。

今回は、ボックス広告に枠線を付ける、または、ボックス広告の枠線を削除する方法を説明したいと思います。

さて、第6回で.sideクラスに枠線を設定した結果、ボックス広告の表示はご覧のようになっています。

SD_006_07.JPG

右下左の枠線は表示されていますが、上の枠線がない状態ですね。
変な状態です。

これをどうするかは、人によって好みが分かれると思います。
すなわち、上の枠線も表示されるようにするのか、それとも右下左の枠線が表示されないようにするのか、です。
そこで今回は、それぞれの方法を説明していきます。


まず前提事項ですが、今回のボックス広告の枠線の修正は、前回の自由形式の枠線と同様、CSSではなくHTMLの修正になります。

従って、まずは第2回で説明したコンテンツ画面ボックス広告をクリックし、その設定画面を開いて下さい。

SD_012_01.jpg

上記画面が表示されたら、右上の@コンテンツHTML編集をクリックしてください。

SD_012_02.jpg

この画面が表示されましたでしょうか。

今回の修正は、この画面のAの枠内にあるHTMLを修正する作業になります。

この枠内のHTML、いろいろ書かれていますが、あまり詳細を把握する必要はありません。
前回と同じく、.sideクラスと.sidetitleクラスを呼び出すHTML文のみに注意すれば大丈夫です。


さて、サイドバーのコンテンツは、第6回で説明した修正によって、コンテンツ本文部分には右下左の枠線が、コンテンツタイトル部分には上右左の枠線が設定されています。
現在のボックス広告の枠線は、コンテンツ本文部分の設定だけが適用されているために、このようなおかしな枠線になってしまているわけです。

そこで、この解決方法は2つあります。

 (1)ボックス広告にタイトルを表示させる
 (2)ボックス広告に.sideクラスを適用させなくする

それぞれの方法とその結果画像を、以下に掲載します。

★(1)ボックス広告にタイトルを表示させる方法★

ボックス広告のHTMLに、サイドタイトルを表示させるHTML文を追記する。
すなわち、.sidetitleクラスの呼び出し文を追加する。

▼▼▼ 変更前 ▼▼▼
<div class="side">
<% content.header -%>
<div align="center">
<script type="text/javascript"><!--
seesaa_template_id = '<% content_blogclick.blogclick_template_id %>';
seesaa_adcount = '<% content.disp_number %>';
seesaa_hostsite_id = '5';
seesaa_site_id = '<% blog.name %>';
seesaa_bg_color = '<% content_blogclick.bg_color %>';
seesaa_title_color = '<% content_blogclick.title_color %>';
seesaa_text_color = '<% content_blogclick.text_color %>';
seesaa_border_color = '<% content_blogclick.border_color %>';
seesaa_link_color = '<% content_blogclick.url_color %>';
//--></script>
<script type="text/javascript" src="<% site_info.ads_url %>/-/js/square_seesaa.js"></script>
</div>
<% content.footer -%>
</div>

▼▼▼ 変更後 ▼▼▼
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<div align="center">
<script type="text/javascript"><!--
seesaa_template_id = '<% content_blogclick.blogclick_template_id %>';
seesaa_adcount = '<% content.disp_number %>';
seesaa_hostsite_id = '5';
seesaa_site_id = '<% blog.name %>';
seesaa_bg_color = '<% content_blogclick.bg_color %>';
seesaa_title_color = '<% content_blogclick.title_color %>';
seesaa_text_color = '<% content_blogclick.text_color %>';
seesaa_border_color = '<% content_blogclick.border_color %>';
seesaa_link_color = '<% content_blogclick.url_color %>';
//--></script>
<script type="text/javascript" src="<% site_info.ads_url %>/-/js/square_seesaa.js"></script>
</div>
<% content.footer -%>
</div>

この結果、先ほどのボックス広告はご覧のようになります。

▼▼▼ 変更後 ▼▼▼
SD_012_03.JPG

これが解決方法の1つ。


そしてもう一つは、そもそもボックス広告に枠線を表示しないようにする方法です。

★(2)ボックス広告に.sideクラスを適用させなくする方法★

ボックス広告のHTMLから、サイドコンテンツ本文を表示させるHTML文を削除する。
すなわち、.sideクラスの呼び出しを削除する。

▼▼▼ 変更前 ▼▼▼
<div class="side">
<% content.header -%>
<div align="center">
<script type="text/javascript"><!--
seesaa_template_id = '<% content_blogclick.blogclick_template_id %>';
seesaa_adcount = '<% content.disp_number %>';
seesaa_hostsite_id = '5';
seesaa_site_id = '<% blog.name %>';
seesaa_bg_color = '<% content_blogclick.bg_color %>';
seesaa_title_color = '<% content_blogclick.title_color %>';
seesaa_text_color = '<% content_blogclick.text_color %>';
seesaa_border_color = '<% content_blogclick.border_color %>';
seesaa_link_color = '<% content_blogclick.url_color %>';
//--></script>
<script type="text/javascript" src="<% site_info.ads_url %>/-/js/square_seesaa.js"></script>
</div>
<% content.footer -%>
</div>

▼▼▼ 変更後 ▼▼▼
<% content.header -%>
<div align="center">
<script type="text/javascript"><!--
seesaa_template_id = '<% content_blogclick.blogclick_template_id %>';
seesaa_adcount = '<% content.disp_number %>';
seesaa_hostsite_id = '5';
seesaa_site_id = '<% blog.name %>';
seesaa_bg_color = '<% content_blogclick.bg_color %>';
seesaa_title_color = '<% content_blogclick.title_color %>';
seesaa_text_color = '<% content_blogclick.text_color %>';
seesaa_border_color = '<% content_blogclick.border_color %>';
seesaa_link_color = '<% content_blogclick.url_color %>';
//--></script>
<script type="text/javascript" src="<% site_info.ads_url %>/-/js/square_seesaa.js"></script>
</div>
<% content.footer -%>
<br />

こうすると、ボックス広告に枠線は表示されなくなります。

▼▼▼ 変更後 ▼▼▼
SD_012_04.JPG

ご覧のようになりました。

なお、(2)の方法でボックス広告から.sideクラスの適用を削除すると、その下のコンテンツとの隙間がほとんどなくなってしまいます。

この場合、第7回と同じ要領でmarginを設定しても良いのですが、ここではそれも面倒なので、Aの欄の最後に<br />を追記する方法をとりました。

以上の(1)または(2)の操作が完了したら、B保存ボタンを押下して、修正を保存しましょう。

これで今回の作業は終了です。
ようやく、第6回から始まったサイドコンテンツに枠線を付ける作業が一段落しました。

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

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

2010年12月20日

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

Seesaaブログには様々なコンテンツが用意されていますが、その中でも非常に自由度が高いコンテンツとして自由形式というコンテンツがあります。

第2回で説明したコンテンツ画面で選択・編集することができます。

SD_011_01.jpg

管理画面で@デザイン⇒Aコンテンツ とクリックして、左側の「コンテンツ」の中の下の方にある「自由形式」がそれにあたります。

これを右側のブログコンテンツの欄にドラッグ&ドロップして、編集して使います。

例えばこのブログでは、左上にある「ブログノウハウ」というボタン、これに自由形式を使用しています。
(あ、気が向いた方はクリックして応援、よろしくお願いします!)

SD_011_02.JPG

今回は、この自由形式のコンテンツに枠線を付けてみます。
また、この自由形式コンテンツはタイトルも表示されていないので、それも表示させてみましょう。


さて、今回の修正ですが、今までとは異なり、HTMLの方を修正します。

まずは、上記コンテンツ画面自由形式のコンテンツを右側にドラッグ&ドロップし、さらにそれをクリックして設定画面を開いて下さい。
下記のような画面が表示されたでしょうか。

SD_011_03.jpg

この画面で、表示したい@タイトルとA内容を記入して下さい。
上図の例では、私はタイトルに「ブログ村ランキング」、内容にブログ村へのランキングボタンを記入しています。
が、ここでは何でも良いので、とりあえず@とAに何かを記入して下さい。

@とAの記入が終わったら、一旦B保存する ボタンを押下して、記入した内容を保存しておきます。


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


そして、今回一番実施したいのは、CコンテンツHTML編集のところです。
この先の画面で、今回作成した自由形式コンテンツのHTMLを修正することになります。

ということで、CコンテンツHTML編集を押してみてください。

SD_011_04.jpg

このような画面が表示されたでしょうか。

この中のDの欄に、タイトルと枠線を表示するHTMLを書き込んでいきます。


それでは、どのようなHTMLを書き込んでいくかです。

タイトルを表示したい場合は、以下のHTMLを追加して下さい。

  <div class="sidetitle"> <% content.title %> </div>

これで、タイトルが表示されるようになります。

ところで、上記HTMLの中の<div class="sidetitle">に注目して下さい。
class="sidetitle"の箇所です。
これは、「クラスはsidetitleを使用する」というHTMLの文章になります。

sidetitleというと・・・

そうです、今まで第6回などでスタイルを修正してきた、あの.sidetitleクラスです。
あの.sidetitleクラスのCSSを適用して、自由形式のタイトルを表示するようにするというのが、この修正のキモになるわけです。

  ●CSSは、書式を定義する
  ●HTMLは、定義されたCSSの書式を適用する

CSSとHTMLの役割は、ざっくりと以上のように覚えておいて頂ければ良いと思います。

ちなみに、サイドタイトルのコンテンツは<% content.title %>ですが、これはSeesaaのサイトのプログラムで定義されている変数ですので、我々には変更できません。
Seesaaでは<% content.title %>はタイトルを表すと覚えておけば良いでしょう。


さて、次はコンテンツの枠線の表示です。

上記サイドタイトルの設定を見ればお分かりの通り、コンテンツの枠線も、今まで定義した.sideクラスを適用すれば表示されるようになるわけです。


以上によって、自由形式コンテンツにタイトルと枠線を表示するための修正は、以下のようになります。

★自由形式コンテンツにタイトルと枠線を表示する方法★

<手順1>
コンテンツ画面で自由形式のコンテンツHTML編集画面を開く。

<手順2>
表示されるコンテンツHTMLに、サイドタイトルと.sidetitleクラスで表示するHTMLを追加すると共に、コンテンツに.sideクラスを適用する。

▼▼▼ 変更前 ▼▼▼
<% content.header -%>
<% content.free.text %>
<% content.footer -%>

▼▼▼ 変更後 ▼▼▼
<div class="sidetitle"><% content.title %></div>
<div class="side">

<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

<手順3>
コンテンツHTML編集画面のE保存ボタンを押下する。

この変更によって、この自由形式コンテンツはご覧のように変更されます。

▼▼▼ 変更前 ▼▼▼
SD_011_02.JPG

▼▼▼ 変更後 ▼▼▼
SD_011_05.JPG

今回の修正のポイントは、CSSで書式を変更するのではなく、すでに定義されているCSSをHTMLで適用することでした。

なお、今回の修正は、修正したコンテンツにのみ適用されます。
これによって、自由形式というコンテンツ全てがこの書式に変更されるわけではありません。
自由形式でコンテンツを作成する度に、上記のような変更が必要な場合は修正していきましょう。

HTMLの修正が失敗してしまった場合は、初期値に戻すのチェックボックスをチェックしてE保存を押下すると、初期状態に戻すことができます。

お試しください。

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

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

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