★ソラマメのオリジナルテンプレートの使い方 -Case.7-

【第 9 話】 ソラマメのオリジナル★テンプレートの文字や画像を隠したい！- スタイルシート編集編 -


★イタリア家具のお店を経営してるお友達のSEXY SS でも眺めながら、本日も小咄をおひとつ。




★美の世界には、黄金比もしくは、黄金律（率）なるものが存在する。




★数年前に映画「ダビンチ・コード」でもささやかれた言葉だが、実はレオナルド・ダ・ビンチが発明した比率じゃぁない。彼が生まれたのは1450 年代。それよりも、300 年も前に同じイタリア出身のフィボナッチという人が編み出した数学式から来ているらしい。しかし、もっと昔の古代ギリシャの時代から黄金分割というものも伝えられてきた。




★その比率とは、1 ：1.618 。つまり、0.382 対 0.618 のことである。




★数字がどうして、美しいの？？？って言われた日にゃ、よくわかんねぇと答えるだけだが、実際のところ、古くから芸術や建築の分野で使われているらしい。古代ギリシャの神殿、ルネッサンス時代の彫刻・絵画、レオナルド・ダ・ビンチの作品にも、ペンタゴンやピラミッドの形にも採用されてるようだ。




★SL もRL も、目で見て何ぼの世界。俺が撮影してきた作品は、以前からフレームの切り方がうまいとよく言われたものだが、数万カットもの写真をPhotoShop で切りきざんで来たワケだから当たり前っちゃぁ、当たり前。自然に黄金比率になってしまってんじゃないのって感じ。




★セカンドライフでモテたけりゃ、ダビンチさまでも研究しな。




★いまさらリアルで黄金比率を用いるのは、勇気いるでしょ？




★ってことで、ここからはブログの黄金比率にでもトライしてみる？

・・・えっと、今日は何しよっかなぁ？えっと、えぇっと。・・・本日のお題は、「上部画像部分に表示されているブログタイトルとパンくずリストのところにあるソラマメのロゴを隠す。」です。スタイルシートではなくて、HTML を修正するから、心して聞くように。- by Lovely Wolf -

【ソラマメのオリジナルテンプレートの使い方 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e135832.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e136709.html
# Case 3.<Web URL> http://lovelywolf.slmame.com/e140178.html
# Case 4.<Web URL> http://lovelywolf.slmame.com/e142021.html
# 夜の診察室 Case 1.<Web URL> http://lovelywolf.slmame.com/e144955.html
# Case 5.<Web URL> http://lovelywolf.slmame.com/e147730.html
# Case 6.<Web URL> http://lovelywolf.slmame.com/e148699.html


★では、初心者のみなさんのために基本形からスタートしてあげよう。

・・・ソラマメのオリジナル★テンプレートの作成画面を使って、「オリジナルテンプレート2カラム(サイドバー右)」を作ったところ。




★そのあとで、サイドメニュー「ブログの設定」－「テンプレート」を選んでから、「カスタマイズ」（赤アミ部分）をクリック。




★保存しなくても少しいじるたびに、「プレビュー」を見れば、編集状況がすぐにわかるようになっている。




★今日のお題は、「表示されているものを隠す」ということだが、スタイルシートに隠す仕事させるのはちょっとキビシイかも。できなくはないが、いろいろ修正しなきゃいけないから、簡単に直すならHTML 側で隠してあげたほうがいい。

・・・とは言え、ソラマメの場合、HTML は３種類用意されている。それは、「トップページ」「個別記事」「アーカイブ」の３つだ。
１ヶ所修正したら、見た目の統一感を出すために、必ず３つとも同じように修正しておく必要がある。




★ちょっとめんどくさいけど、それぞれの入力欄「トップページ」「個別記事」「アーカイブ」の中でカーソルをあわせ、Ctr＋A で入力欄に入っているHTML ソースを全て選択してから、Ctr＋C でコピーし、テキストエディタを開いて、ペーストし、バックアップする。バックアップは、必ずやっておいたほうが身のため。文字コードは、UTF-8 で保存することをおすすめする。

・・・バックアップできたら、まずは「上部画像部分に表示されているブログタイトルを隠してみる。」からやってみる。上部画像部分とは、id="banner" となっている領域のことである。テキストエディタ上で以下の部分を探して、赤字部分をコメントアウトする。

# HTML のコメントアウト（非表示）は、<!-- と --> を使って囲むだけ。もちろん、半角小文字を使うこと。
・・・修正できたら、Ctr＋A で修正後のHTML ソースを全て選択してから、Ctr＋C でコピーし、間違えないように、それぞれの入力欄「トップページ」「個別記事」「アーカイブ」の中にペーストしてあげる。ペーストするときも、入力欄の中身を全て選択してから、上書きペーストさせる必要がある。初心者のみなさん、このとおりできるかな？

・・・記事の説明文だけが残った感じになればよし。記事の説明文もいっしょに隠したければ、以下の部分もコメントアウトすればよい。（<!-- と --> を使って囲む。）



★続きましては、「パンくずリストのところにあるソラマメのロゴを隠す。」をやってみる。

・・・パンくずリストのところにあるソラマメのロゴとは、赤アミ部分のことだ。




★隠すだけでは芸が無いので、同時に上部画像の上にすき間を作って、ソラマメのロゴを移動させてみる。HTML ソースの中にスタイルシートもいっしょに書く荒ワザを使ったから、理解できる方は参考にしてほしい。

・・・さっきと同じように、テキストエディタ上で以下の部分を探して、赤字部分を追加する。場所は、さっき修正したid="banner" のすぐ上にあるはずだ。
・・・その後、以下の赤字部分をコメントアウトする。（<!-- と --> を使って囲む。）どうやらパンくずリストの領域は、topicpass という名前になっているようだ。
・・・修正したら、画面下のほうにある「登録」ボタンをクリックすること。