今回はブラウザの縮小によってレイアウトが大きく崩れてしまう問題を対処しました

１．　どのような症状か？
例えば、ブラウザを縮小したとき、右サイドバーのウィジェットが、下の方に移動してしまう現象です

もっと縮小していくと、投稿記事が、サイドバーの下に移動してしまい、レイアウト崩れが発生してしまいます

２．原因は？
ブログのBodyにwidthを指定していなかったことが原因のようです
また、ブログの投稿、サイドバーなどのwidthを％で指定しているのも良くなかったようです

まず、Bodyにwidthを指定していなかったため、ブログ全体の幅が決まっていない状態でした
そのような状態でwidthに％を指定している場合は、ブラウザのサイズに合わせて動的に幅を決定してしまいます

そして、ブラウザを縮小した場合は、ブラウザの幅にすべてのコンテンツが収まるようにするため、レイアウトが崩れてしまったようです

３．対策は？
bodyに全体のサイズを指定します（当ブログ1500px）

そのあと、サイドバー、メインコンテンツの幅も、%を使わずに記述し、全体の幅がbodyの幅を超えないように設定します

そうすれば、ブラウザの縮小時にレイアウトを崩すことなく、スクロールバーで対処できるようになります

大分、ブログのデザインが決まってきましたが、どうにもサイドバーが寂しい印象を受けました

そこで、Twitterのタイムラインを乗っけることにしました

１．Twitterウィジェットの作成
ウィジェットの作成は、Twitterの公式ページから行うことができます
https://twitter.com/

まずはTiwtterにログインします

そこで、設定-＞ウィジェット-＞新規作成を開き、適当にデザインを選んで「ウィジェットの作成」をクリックすればソースコードができます

このように、Twitterウィジェットの作成はとても簡単に行えます


２．Bloggerに搭載
次に出来上がったソースコードをBloggerに乗っけます

レイアウト-＞ガジェットを追加から「HTML/JavaScript」を選択し、先ほどのTwitterウィジェットのソースコードを張り付けます

あとは、表示したい位置にガジェットを移動させれば完了です


３．備忘録メモ
１，２のようにBloggerへのTwitterウィジェットの搭載はとても簡単に行えます
が、私はBloggerへの搭載ではまってしまいました（＾＾；）

最初は、作成したソースコードをテンプレート-＞「HTMLの編集」から直接貼り付けようとしたんですが
それだとうまくいかないようです（理由はまだわかっていない…）

やはりBloggerならではの記述方法や特徴をもっと知らなければと痛感しました

コメント欄についてテスト投稿中です

こないだ会社のパソコンから自分のブログを見てみたらとても深刻なレイアウト崩れが発生していることに気づきました。 
家に帰ってから調べてみるとどうやら、IEとFireFoxでレイアウト崩れが発生している模様(Opera、Safariは確認していません…)

 二日ほど原因を調べていてどうやら左上のロゴに原因があることが判明しました。
 以前、ロゴを追加したのですが初めはCSSで画像の追加のみ行いました。
この時点では、特に問題はありません。 しかし、そのあと画像にリンクを持たせるため、HTMLでも<img />タグで同じ画像を呼び出していたため、レイアウトが崩れてしまっていたようです

 いってしまえばただの不注意ですが、今回のミスを通してカスタマイズ中のテンプレートにいかに無駄な要素が多いかを知るきっかけになりました(＾＾；) 

今後もカスタマイズを続けていく中で、無駄な要素は削除するようにしてい着たいと思います
その方がメンテナンス性が上がるってもんですな！

最近、ウィジェットのカスタマイズ方法を知りました。
いまさらって感じなんですが、「HTMLの編集」ページにある「ウィジェットのテンプレートを展開」にチェックをいれれば、ウィジェット内のタグを見ることができるようになりました。

ここをいじれば、日付とタイトルの位置を変更したりできそうですな！

今回は、サイドバーにあるラベルをカスタマイズしました。

とりあえずいつものようにググってソースコードを探してきます。

ラベルリストの表示法いろいろ
http://www.kuribo.info/2009/01/blog-post.html

こちらのサイトを参考にして作成したCSSがこちら↓

/* Label Content
----------------------------------------------- */
.Label ul{
   margin-left: -35px;
   line-height:　100%;
}
.Label li {
  float:left;
  padding:5px;
　list-style-type:none;
  background-color: #333333;
  color: #fff;
  border: 1px solid #fff;
}
.Label a{
  color: #fff;
}
div.clear {
  clear:both;
}

メトロ風な表示を意識してカラーの背景に白字のラベルにかすたまいずしました。
リストにある黒丸(マーカー)は邪魔なので非表示です。

完成したのがこちら↓

左が以前のラベル、右が新しいラベルのデザインです

大分メトロらしいものができたと思います。
次は、ブログページ以外の作成でもしようかな

最近、歯医者で歯石除去をしてもらってきました
前回、医者で歯石を除去してもらったのは、2～3年ほど前のことです

超音波による歯石除去とのことですが、あの痛気持ちいい感じは何とも言えません
終わった後のすっきり感も何とも言えないものがあります

費用は3400円ほどでした
しかし、初診でレントゲン撮影もあったからこの値段とのことです
次回からは1000円ほどで歯石除去ができるらしい！



実は、私は生まれてから一回も虫歯になったことありません

なんでも私の歯はとても丈夫らしいです

医者に行ったときは、診察の結果で逆に褒めれたぐらいです

歯医者さんも「親に感謝してください」とおっしゃっていました

しかし、そんな私も歯周病を回避することはできないとのこと

なんでも歯石の除去は只の歯磨きでは不可能とのこと！

歯周病対策のためには、一年で2、3回ほどの歯石除去が重要とのことです

歯周病は非常に恐ろしい病気ですので、一年に一回は必ず医者に掛かりたいと思います

では、雑記でした

両サイドにサイドバーをだすことにしました
左側がメニューバーで、右側に広告を表示しています

左サイドバー、メインコンテンツ、右サイドバーという組み合わせを3カラムというようです

ここで気を付けなければいけないのは、WEBサイトの幅と、各カラムの幅です
ここを間違えるといわゆる表示崩れが発生します

実は、私は3カラムの実現方法についてまだ、詳しく把握していません
ですので、引き続きCSSの学習を続けたいと思います
今回は、私が思っていた以上にCSSはいろいろできることがわかりました（＾＾；）

もう一つ、各投稿記事をborderで囲うように変更しました

前回の記事にも書いたように記事省略の機能を付けてから、ブログがずいぶんすっきりしてしまい、貧相な印象をうけなくもありません

そこで、投稿記事のレイアウトを変更することでそのような、印象を変えることにしました

今回はただ投稿記事をborderで囲っただけです
次は、もう少し凝ったデザインに変更したいと思います

投稿記事の折りたたみを自動で行えるようにしました。

・どんな機能？
文章の折りたたみ機能です
「続きを読む」「Read more」ですね

この機能を利用すれば、冗長な投稿記事であふれたブログをすっきりさせることができます
読み手からすれば、タイトルだけ見てで読むかどうか決めれるので、便利な機能だといえます


・なぜ自動化？
この機能は多くのブログサイトに実装されている機能なんですが、そのほとんどが手動で行わねばならないものです

記事を書くたびに折りたたむ場所を指定するのも面倒ですし、過去の記事全てに設定するのも大変です
やはり、自動化して少しでも手間を減らしたいと考えます
もちろん、自動化する過程でJavaScriptやjQueryの勉強もできますしね！


・Expander Pluginを使用
今回使用したのは、jQueyのプラグインのjquery.expander.jsです
こちらを使用すると数行のスクリプトで投稿記事の折り込み機能を実装することができます
下がいろいろなサイトを参考にして作成したスクリプトになります（ほとんどコピーです）

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
<script src='http://plugins.learningjquery.com/expander/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
<!--
$(function() {
            $('div.post-body').expander({
                slicePoint: 50
            });
        });
//</script>
//]]&gt;
--&gt;

もし、折りたたみ機能を実装したい方がいるなら「div.postnavi」の部分を折りたたみたい場所のクラス名に変更すれば使用できます

 ・備忘録
 　jQueyの外部ファイルには、GoogleのCDNを利用しています
 最初は、Dropboxを使用してJavaScriptを読み込もうとしたんですが上手くいきませんでした（＾＾；） 
どうやら2012年8月ごろからファイル共有の仕組みが変わったようで、ネット上にまだ情報が出回っていないように感じました

　折りたたみ機能実装のもう一つの選択として「readmore.js」というプラグインがあります
最初はこちらを使用したスクリプトを作成していましたが、外部ファイルの問題で挫折しました

　外部ストレージは、Dropbox、Skydriveの二つを試しましたがうまくいきませんでした
他の選択としてGoogleドライブもあるので、今度試してみようと思います

あと、折りたたみ機能を実装に伴い、ブログがとても簡素に見えるようになりました
このままでは、ただみすぼらしい印象をうけなくもないためさらなるデザインの模索をしていきたいと思います
いずれはテンプレートを公開できたらいいですね

ブログのカスタマイズを着々と進行しています。

主な変更点は以下の通りです

• ヘッダーバーにオリジナル画像を使用
• 背景色を白に変更
• 自己紹介テキスト削除
• サイドバーサイズ縮小
• フッターにオリジナル画像を使用

特に、ヘッダーバーの作成は昔からやりたかったことです。

・ヘッダーバー作成
近年、Faceboo、Google+、ニコニコ動画など、大手SNSでは必ずヘッダーバーを見ますね。
ヘッダーバーはSNSにはなくてはならない存在になっている気がします
やはり、大規模なコンテンツを抱えるSNSでは、どのページでも使えるナビゲーションとしてヘッダーバーが重要な役割をしているのでしょう

この小規模な存在ですが、

ヘッダーバーを実現する方法は画像を使用するのが一番メジャーなやり方のようです
ヘッダーバーの作成はInkscapeで行いました。

グラデーションのかけ方はこちらのサイトを参考にしています
http://kumacrow.blog111.fc2.com/blog-entry-441.html

 

実際は、画像にリピート設定をするので、幅は1pxでいいです。
なので、こんな爪楊枝みたいな画像を作成します。

画像を作成したら、PicasaにアップロードしてCSSで読み込みをします。
このサイトでは、下のようなコードを記述しています。

#topnav{
background:url("https://lh6.googleusercontent.com/-5LgziB_6eGw/UJppE__ELdI/AAAAAAAAANw/pCZ_QDxE1cc/s800/headerbar.png")  repeat-x;
height:40px;
border-bottom: 3px double #999;
}

ポイントは、background:urlの後のrepeat-xです。 これで、画像を繰り返して表示し、ヘッダーバーのデザインを実現しています。

ヘッダーバーに関しては、さらに作りこんでもう一度詳細に触れたいと思います。