北の丸公園
ブックマーク：★公園
靖国通りから南、お堀で囲まれた皇居東御苑の手前までの広い地域が北の丸公園です。
公園の敷地でもあるし、地名でもあります。
日本武道館、科学技術館、国立近代美術館も北の丸公園内の敷地です。
江戸時代、北の丸内は有力譜代大名の武家屋敷でした。
明治維新後、北の丸には陸軍関係の施設が建てられました。
太平洋戦争後、軍関係施設の跡を警視庁等諸官庁が使用していましたが
昭和44年、跡地をに森林公園として整備し公開されました。
所在地 千代田区北の丸公園1-1
アクセス 九段下駅2番出口より徒歩5分
⇒
靖国通りから南、お堀で囲まれた皇居東御苑の手前までの広い地域が北の丸公園です。
公園の敷地でもあるし、地名でもあります。
日本武道館、科学技術館、国立近代美術館も北の丸公園内の敷地です。
江戸時代、北の丸内は有力譜代大名の武家屋敷でした。
明治維新後、北の丸には陸軍関係の施設が建てられました。
太平洋戦争後、軍関係施設の跡を警視庁等諸官庁が使用していましたが
昭和44年、跡地をに森林公園として整備し公開されました。
所在地 千代田区北の丸公園1-1
アクセス 九段下駅2番出口より徒歩5分
⇒
九段坂の燈台
ブックマーク★レトロ系建物
靖国通り、日本武道館への入口付近に建っている石積みの塔。
正式には高燈籠と言うらしいです。
明治４年（1８７１)に靖国神社の前に建てられましたが
道路改修の為、昭和５年に現在地に移されました。
戦前、九段坂は東京で一番見晴らしが良い高台だったらしいです。
この高燈籠は品川沖や千葉房総の海からも確認できた為、
灯台としての機能を充分果たしていました。
靖国通りのこの辺りに丁度歩道橋が掛かっていて
道路の反対側から見ると隠れて良く見えなかったりします。
撮影する時もいろいろ撮影ポイントに苦労しました。
なんでこんな邪魔な物をこの貴重な歴史的建造物の真ん前に？！
もっと九段下交差点近くでも良いのに・・と思いました。
天辺の避雷針に付いた風向計には東西南北が示されてます。
⇒
靖国通り、日本武道館への入口付近に建っている石積みの塔。
正式には高燈籠と言うらしいです。
明治４年（1８７１)に靖国神社の前に建てられましたが
道路改修の為、昭和５年に現在地に移されました。
戦前、九段坂は東京で一番見晴らしが良い高台だったらしいです。
この高燈籠は品川沖や千葉房総の海からも確認できた為、
灯台としての機能を充分果たしていました。
靖国通りのこの辺りに丁度歩道橋が掛かっていて
道路の反対側から見ると隠れて良く見えなかったりします。
撮影する時もいろいろ撮影ポイントに苦労しました。
なんでこんな邪魔な物をこの貴重な歴史的建造物の真ん前に？！
もっと九段下交差点近くでも良いのに・・と思いました。
天辺の避雷針に付いた風向計には東西南北が示されてます。
⇒
ブログ改造してみ隊
ブックマーク：■画像加工関連
▼
写真の幅を合わせ隊の記事では写真の幅をブログに合せる方法を紹介しました。
今回は大きな写真（アメーバブログでは横幅最大800ピクセル）でも表示出来る様に
ＣＳＳ記述を追加変更してブログ改造を行います。
ＣＳＳはブログの設計図です。
コンピュータープログラムやＤＮＡみたいな物ですね。
一般のブログスキンは変更できませんが、
カスタマイズ可能な物やＣＳＳ編集用ブログスキンが用意されています。
現在のスキンを放棄したくない人や時間や手間をかけられない人は
写真の幅を合わせ隊で紹介した方法で対処してください。
自分のブログ、「雨 風 呂」で使っているブログスキンは廃版になりました・・。
なので「雨 風 呂」のＣＳＳを紹介しても参考になりません。
幸い、サブブログ「面白探検隊秘密基地（仮称）」は
新しいＣＳＳ編集用ブログスキンをベースにしています。
「面白探検隊秘密基地（仮称）」を実験台にして
ブログ改造の為のＣＳＳを紹介したいと思います。
先に言っておきたい事が１つ。
ＣＳＳを変更していて間違いに気付かず保存してしまうと取り返しが効きません。
是非、修正をする度にＣＳＳを変更する前の状態のテキストを
メモ帳などにコピペして保存しておいてください。
もし間違いに気付いたら保存したＣＳＳを戻し前の状態に復元できます。
ＣＳＳのサンプルとして紹介はしますが修正、管理は自己責任で行ってください。
■メモ帳の作り方
デスクトップ上もしくはフォルダ内で右クリック⇒新規作成⇒テキストドキュメント
ファイルの名前を「メモ」にしておくと分かりやすいでしょう。
ＣＳＳ編集用ブログスキンを選んだら[ＣＳＳ編集]を選択し
ブログデザインのＣＳＳの編集のページを開きます。
ここではまずブログのヘッダー部分の画像や背景画像をアップロードする事が出来ます。
記事の画像は横幅最大800までですがここでは1400ピクセルの画像でもＵＰ可能です。
画像は最大５つまでアップロードできます。
後でＣＳＳ編集の時に「この画像のパス」と書いてある欄をコピペして
画像のＵＲＬの箇所に貼り付けます。（※印の箇所）
前もって画像を用意したらＣＳＳ編集に移ります。
(3-3) コンテンツエリアを探して下の様に記述します。（コピペ）
記事の幅を850にして800ピクセル幅の画像を表示可能にします。
/* (3-3) コンテンツエリア
--------------------------------------------*/
/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea {
width:1170px;/*ブログの幅(320+800+50)*/
}
.skinMainArea {
width:850px !important;/*記事の幅 (800+50)*/
}
↓ＣＳＳの最後にこれらを追加。
/*(５）ページ背景に画像を入れる*/
body{
background-image:url(※ページ背景画像アドレス);
background-attachment:fixed;/*スクロールしても位置固定*/
}
/*ヘッダー*/
.skinBody{
background-image:url(※ヘッダー画像アドレス);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center top;/*中央に*/
}
.skinHeaderFrame{
height:500px;/*←数値は任意 ヘッダーと記事の高さ*/
}
.skinBlogHeadingGroupArea{
padding:0;/*ブログタイトル概要位置リセット*/
自分はタイトルの位置を中央にしました。
ＣＳＳで「(3-2) ブログヘッダー」を探してtext-align: center;/*←表示位置センター*/を追加。
↓
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
text-align: center;/*←表示位置センター*/
}
↓ブログタイトルの文字の大きさを変更
/* (1-2) ブログタイトル文字
--------------------------------------------*/
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;*←※ブラック*/
font-weight:bold;
font-size:5.0em;/*←★この数値を変更します*/
}
▼参考にしてみてください。
新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ
出来上がりはこんな感じ⇒面白探検隊秘密基地
▼
写真の幅を合わせ隊の記事では写真の幅をブログに合せる方法を紹介しました。
今回は大きな写真（アメーバブログでは横幅最大800ピクセル）でも表示出来る様に
ＣＳＳ記述を追加変更してブログ改造を行います。
ＣＳＳはブログの設計図です。
コンピュータープログラムやＤＮＡみたいな物ですね。
一般のブログスキンは変更できませんが、
カスタマイズ可能な物やＣＳＳ編集用ブログスキンが用意されています。
現在のスキンを放棄したくない人や時間や手間をかけられない人は
写真の幅を合わせ隊で紹介した方法で対処してください。
自分のブログ、「雨 風 呂」で使っているブログスキンは廃版になりました・・。
なので「雨 風 呂」のＣＳＳを紹介しても参考になりません。
幸い、サブブログ「面白探検隊秘密基地（仮称）」は
新しいＣＳＳ編集用ブログスキンをベースにしています。
「面白探検隊秘密基地（仮称）」を実験台にして
ブログ改造の為のＣＳＳを紹介したいと思います。
先に言っておきたい事が１つ。
ＣＳＳを変更していて間違いに気付かず保存してしまうと取り返しが効きません。
是非、修正をする度にＣＳＳを変更する前の状態のテキストを
メモ帳などにコピペして保存しておいてください。
もし間違いに気付いたら保存したＣＳＳを戻し前の状態に復元できます。
ＣＳＳのサンプルとして紹介はしますが修正、管理は自己責任で行ってください。
■メモ帳の作り方
デスクトップ上もしくはフォルダ内で右クリック⇒新規作成⇒テキストドキュメント
ファイルの名前を「メモ」にしておくと分かりやすいでしょう。
ＣＳＳ編集用ブログスキンを選んだら[ＣＳＳ編集]を選択し
ブログデザインのＣＳＳの編集のページを開きます。
ここではまずブログのヘッダー部分の画像や背景画像をアップロードする事が出来ます。
記事の画像は横幅最大800までですがここでは1400ピクセルの画像でもＵＰ可能です。
画像は最大５つまでアップロードできます。
後でＣＳＳ編集の時に「この画像のパス」と書いてある欄をコピペして
画像のＵＲＬの箇所に貼り付けます。（※印の箇所）
前もって画像を用意したらＣＳＳ編集に移ります。
(3-3) コンテンツエリアを探して下の様に記述します。（コピペ）
記事の幅を850にして800ピクセル幅の画像を表示可能にします。
/* (3-3) コンテンツエリア
--------------------------------------------*/
/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea {
width:1170px;/*ブログの幅(320+800+50)*/
}
.skinMainArea {
width:850px !important;/*記事の幅 (800+50)*/
}
↓ＣＳＳの最後にこれらを追加。
/*(５）ページ背景に画像を入れる*/
body{
background-image:url(※ページ背景画像アドレス);
background-attachment:fixed;/*スクロールしても位置固定*/
}
/*ヘッダー*/
.skinBody{
background-image:url(※ヘッダー画像アドレス);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center top;/*中央に*/
}
.skinHeaderFrame{
height:500px;/*←数値は任意 ヘッダーと記事の高さ*/
}
.skinBlogHeadingGroupArea{
padding:0;/*ブログタイトル概要位置リセット*/
自分はタイトルの位置を中央にしました。
ＣＳＳで「(3-2) ブログヘッダー」を探してtext-align: center;/*←表示位置センター*/を追加。
↓
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
text-align: center;/*←表示位置センター*/
}
↓ブログタイトルの文字の大きさを変更
/* (1-2) ブログタイトル文字
--------------------------------------------*/
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;*←※ブラック*/
font-weight:bold;
font-size:5.0em;/*←★この数値を変更します*/
}
▼参考にしてみてください。
新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ
出来上がりはこんな感じ⇒面白探検隊秘密基地
写真の幅を合わせ隊
ブックマーク：■画像加工関連
2013年01月09日(水)面白探検隊秘密基地の記事で紹介した画像では、
記事の幅より画像の幅が大きく、右端がはみ出して隠れてしまってます。
この画像がはみ出すのを嫌って画像フォルダの設定で「縮小して表示(横幅最大220px)」を指定してる人が多いようです。
出来れば記事の幅いっぱいの画像を載せましょう～！
この間、進藤クララ（元Rin）さんに教えてもらったのですが新エディタを使うと画像の大きさを指定できるらしいです。
YouTubeの貼り付け用タグも使えるらしいので便利ですね。
タグ編集エディタでYouTubeやグーグルマップの貼り付け機能を使ってる人には
多少HTMLの知識があった方が良いです。
お友達にも相談を受けたのですが、悩んでいる人は多いのかも、と思って今回記事にしてみました。
写真の幅は横幅が640ピクセル以上の物が多く、ブログの記事の幅は普通、600位らしいです。
自分のブログも改造前は記事の幅が600位だったので写真の幅を600ピクセルに画像加工して載せていました。
別サイズの画像を用意したり、オリジナルの画像を小さく加工するのも抵抗あります。
しかしオリジナルの画像を加工せず、記事に画像を貼り付ける段階で大きさを調整する方法があります。
画像フォルダの設定は「オリジナルで表示」を選択してください。
タグ編集エディタで画像を選択すると画像のＨＴＭＬタグが生成されます。
<a href="画像のＵＲＬ"><img src="画像のＵＲＬ" alt="xxx" border="0" /></a>
<a href="画像のＵＲＬ">～</a>はリンクタグでクリックした時に飛んで行く飛び先が指定されてます。
<img src="画像のＵＲＬ" alt="xxx" border="0" />はイメージタグで画像を表示するコマンドです。
縮小表示だとイメージタグで小さい画像を表示しておいてクリックすると大きい画像へ飛ぶ様になってます。
このイメージタグに画像の大きさを指定するパラメーターを追加します。(半角文字)
<img src="画像のＵＲＬ" alt="xxx" border="0" width=600/>
これは画像の幅を指定します。高さを指定するheight=と言うパラメーターもありますが
幅を指定すれば自動的に同じ対比で拡大、縮小してくれるのでwidth=だけで良いでしょう。
これを使えば複数の大きさの違う画像を同じ幅でそろえる事も出来ます。
大きさの目安としていくつかwidth=の数値ごとに並べてみます。
ご参考に♪
▼width=220
▼width=400
▼width=600
2013年01月09日(水)面白探検隊秘密基地の記事で紹介した画像では、
記事の幅より画像の幅が大きく、右端がはみ出して隠れてしまってます。
この画像がはみ出すのを嫌って画像フォルダの設定で「縮小して表示(横幅最大220px)」を指定してる人が多いようです。
出来れば記事の幅いっぱいの画像を載せましょう～！
この間、進藤クララ（元Rin）さんに教えてもらったのですが新エディタを使うと画像の大きさを指定できるらしいです。
YouTubeの貼り付け用タグも使えるらしいので便利ですね。
タグ編集エディタでYouTubeやグーグルマップの貼り付け機能を使ってる人には
多少HTMLの知識があった方が良いです。
お友達にも相談を受けたのですが、悩んでいる人は多いのかも、と思って今回記事にしてみました。
写真の幅は横幅が640ピクセル以上の物が多く、ブログの記事の幅は普通、600位らしいです。
自分のブログも改造前は記事の幅が600位だったので写真の幅を600ピクセルに画像加工して載せていました。
別サイズの画像を用意したり、オリジナルの画像を小さく加工するのも抵抗あります。
しかしオリジナルの画像を加工せず、記事に画像を貼り付ける段階で大きさを調整する方法があります。
画像フォルダの設定は「オリジナルで表示」を選択してください。
タグ編集エディタで画像を選択すると画像のＨＴＭＬタグが生成されます。
<a href="画像のＵＲＬ"><img src="画像のＵＲＬ" alt="xxx" border="0" /></a>
<a href="画像のＵＲＬ">～</a>はリンクタグでクリックした時に飛んで行く飛び先が指定されてます。
<img src="画像のＵＲＬ" alt="xxx" border="0" />はイメージタグで画像を表示するコマンドです。
縮小表示だとイメージタグで小さい画像を表示しておいてクリックすると大きい画像へ飛ぶ様になってます。
このイメージタグに画像の大きさを指定するパラメーターを追加します。(半角文字)
<img src="画像のＵＲＬ" alt="xxx" border="0" width=600/>
これは画像の幅を指定します。高さを指定するheight=と言うパラメーターもありますが
幅を指定すれば自動的に同じ対比で拡大、縮小してくれるのでwidth=だけで良いでしょう。
これを使えば複数の大きさの違う画像を同じ幅でそろえる事も出来ます。
大きさの目安としていくつかwidth=の数値ごとに並べてみます。
ご参考に♪
▼width=220
▼width=400
▼width=600
皇居東御苑の桜
ブックマーク：■ 桜
ソメイヨシノもすっかり葉桜になり桜のシーズンもそろそろ終わり？と思ってたら
まだ八重桜とか咲いてますね～♪
どんよりと雲が多い天気だったけど最近は天気が不安定なので撮れる時にとっておこうと
今まで行った事のない場所をと皇居東御苑に行ってみました！
既に八重桜でさえ散り始めてました。
それでもなかなか撮影の機会が少ないので桜もこれで見納めと撮ってみました。
桜だけじゃなくて地上にも白い花が一面に♪
(☆゜∇゜)☆
⇒
ソメイヨシノもすっかり葉桜になり桜のシーズンもそろそろ終わり？と思ってたら
まだ八重桜とか咲いてますね～♪
どんよりと雲が多い天気だったけど最近は天気が不安定なので撮れる時にとっておこうと
今まで行った事のない場所をと皇居東御苑に行ってみました！
既に八重桜でさえ散り始めてました。
それでもなかなか撮影の機会が少ないので桜もこれで見納めと撮ってみました。
桜だけじゃなくて地上にも白い花が一面に♪
(☆゜∇゜)☆
⇒