ブログ改造してみ隊
ブックマーク：■画像加工関連
▼
写真の幅を合わせ隊の記事では写真の幅をブログに合せる方法を紹介しました。
今回は大きな写真（アメーバブログでは横幅最大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
皇居東御苑の桜
ブックマーク：■ 桜
ソメイヨシノもすっかり葉桜になり桜のシーズンもそろそろ終わり？と思ってたら
まだ八重桜とか咲いてますね～♪
どんよりと雲が多い天気だったけど最近は天気が不安定なので撮れる時にとっておこうと
今まで行った事のない場所をと皇居東御苑に行ってみました！
既に八重桜でさえ散り始めてました。
それでもなかなか撮影の機会が少ないので桜もこれで見納めと撮ってみました。
桜だけじゃなくて地上にも白い花が一面に♪
(☆゜∇゜)☆
⇒
ソメイヨシノもすっかり葉桜になり桜のシーズンもそろそろ終わり？と思ってたら
まだ八重桜とか咲いてますね～♪
どんよりと雲が多い天気だったけど最近は天気が不安定なので撮れる時にとっておこうと
今まで行った事のない場所をと皇居東御苑に行ってみました！
既に八重桜でさえ散り始めてました。
それでもなかなか撮影の機会が少ないので桜もこれで見納めと撮ってみました。
桜だけじゃなくて地上にも白い花が一面に♪
(☆゜∇゜)☆
⇒
日本基督教団戸山教会
ブックマーク★レトロ系建物
前の記事、箱根山再び！の続きです。
箱根山の見晴らし台から新宿方面を見ると
山の麓に赤い屋根の教会(日本基督教団戸山教会)が見えます。
箱根山のある戸山公園は戦時中、軍の兵学校施設がありました。
そしてこの場所には陸軍戸山学校の将校の為の施設があったそうです。
それがこの教会の石垣部分です。
窓やドアが付いているので石垣と言うより石積みの地下室ですね。
要塞みたいな物だったのでしょうか？
とっても重厚な雰囲気を持ってます。
この施設が戦後アメリカ軍により接収された後、
地上部分に教会が建てられました。
石積みの地下室は斜面に建っている為、
斜面の上の方では石積みの建物が地面の中に埋没しています。
教会の玄関、地上部分から見ると
とても地下に建物がある様には見えません。
教会には幼稚園（戸山幼稚園）も併設していて庭には遊具も見えます。
この地下室は実際には倉庫として使われている様で、
職員が旗竿や旗を地下室のドアから出し入れしていました。
この教会を斜面の下から見ると中世の建物にも見えて素敵でした。
⇒
前の記事、箱根山再び！の続きです。
箱根山の見晴らし台から新宿方面を見ると
山の麓に赤い屋根の教会(日本基督教団戸山教会)が見えます。
箱根山のある戸山公園は戦時中、軍の兵学校施設がありました。
そしてこの場所には陸軍戸山学校の将校の為の施設があったそうです。
それがこの教会の石垣部分です。
窓やドアが付いているので石垣と言うより石積みの地下室ですね。
要塞みたいな物だったのでしょうか？
とっても重厚な雰囲気を持ってます。
この施設が戦後アメリカ軍により接収された後、
地上部分に教会が建てられました。
石積みの地下室は斜面に建っている為、
斜面の上の方では石積みの建物が地面の中に埋没しています。
教会の玄関、地上部分から見ると
とても地下に建物がある様には見えません。
教会には幼稚園（戸山幼稚園）も併設していて庭には遊具も見えます。
この地下室は実際には倉庫として使われている様で、
職員が旗竿や旗を地下室のドアから出し入れしていました。
この教会を斜面の下から見ると中世の建物にも見えて素敵でした。
⇒
箱根山再び！
ブックマーク：★公園
以前、2011年04月28日(木)箱根山の記事で紹介しました。
新宿区戸山公園の大久保寄りにあります。
母校，戸山小学校、戸山中学校が近所だったので子供の頃からの遊び場です。
箱根山は都心では最高峰と言われる山で標高４４．６メートルです。
以前紹介した時は2011 3/11の東日本大震災の影響で地割れが発生し立入禁止でした。
そう言えば修復工事は終わっているかと気になって久しぶりに寄ってみました。
数分で登頂すると頂上の見晴らし台はきれいに修復されていました。
冬は空気が澄んで新宿の高層ビル群も良く見えます。
歩いてすぐ行けそうなくらい近くに見えますが、
実際に歩くと結構距離があります。
▼2011年04月28日(木)箱根山の画像。
⇒
新宿区箱根山 2011 4/26
新宿区戸山公園の大久保寄りにあります。
母校，戸山小学校、戸山中学校が近所だったので子供の頃からの遊び場です。
箱根山は都心では最高峰と言われる山で標高４４．６メートルです。
以前紹介した時は2011 3/11の東日本大震災の影響で地割れが発生し立入禁止でした。
そう言えば修復工事は終わっているかと気になって久しぶりに寄ってみました。
数分で登頂すると頂上の見晴らし台はきれいに修復されていました。
冬は空気が澄んで新宿の高層ビル群も良く見えます。
歩いてすぐ行けそうなくらい近くに見えますが、
実際に歩くと結構距離があります。
▼2011年04月28日(木)箱根山の画像。
⇒
新宿区箱根山 2011 4/26