ブログに広告を貼る

0
    数日前、このブログページの上部を
    Amazonインスタントストア」へのリンクから
    GoogleAdsense」に変更し、
    インスタントストアへのリンクはサイドメニューに移しました。

    どちらも、ブログやホームページに広告を貼り付けて、
    お小遣いを稼ごう、という主旨のサービスです。

    まぁ、稼げたとしても月数千円がいいところですがね・・。

    Googleの提供するGoogleAdsenseは、
    サスガに検索エンジンのGoogleが提供するだけあって、
    機能が充実しています。

    GoogleAdsenseの広告をブログに貼り付けると、
    そのブログに掲載されている話題を自動的に解析し、
    ブログの内容に合わせた広告を表示してくれるのです。

    つまりブログの中で「ホームページ製作」についての
    話題が多ければ、ホームページ制作に関連した
    広告が表示されるわけです。

    このブログ(バサラなブログ)のコンテンツが
    「ホームページ制作」に特化すればするほど、
    このブログを見る人は「ホームページ制作」に興味がある人が
    多くなると考えられます。
    だとすると、ホームページ制作に関連する広告を掲載した方が、
    より効果的なワケですね。

    同じような仕組みは、amazonにもあります。
    ブログの内容を自動的に解析して、関連する書籍やDVD、CDなどの
    メディアを販売するというものです。
    「Amazon おまかせリンク」というサービス名で提供されています。

    アメブロなどのフリーブログにも、GoogleAdsenseによる
    広告が表示されますが、この広告収入はブログのオーナーではなく、
    アメブロのものになってしまいます。

    有料のブログや、FC2などの自由度の高いフリーブログであれば、
    自分自身の収入になる広告を貼り付けることも可能です。

    メリットは、お小遣い稼ぎのほかにもあります。
    「検索エンジンから見た自分のブログの内容」
    を知ることができることです。

    つまり、検索エンジンから見ると、自分のブログは
    こういった関連性のある話題が中心なんだな〜
    ということですね。

    デメリットは、自分の競合の広告が表示されてしまうことです。
    たとえば、酒屋さんがブログを開設していたとして、
    お酒に関する話題に多く触れているとすると、
    他の酒屋さんの広告が表示されてしまうことです。

    これがイヤな場合には、GoogleAdsenseではなく、
    先に述べた「Amazonおまかせリンク」にするのもいいですね。
    酒屋さんのブログで、お酒に関する書籍を陳列するのは、
    訪問者にとっても便利になりますし、直接競合もしません。

    これらの広告は、ブログの本来のコンテンツではないため、
    「邪魔にならないが目にとまる」
    という配置をしなくてはいけません。
    レイアウトが難しいですが、ちょっとしたお小遣い稼ぎに
    設置してみるのもいいですね。


    アメブロカスタマイズ講座(12)

    0
      ================================
      この記事は、連載でお送りしています。
      部分的に読んだだけでは、内容がわからない場合がありますので、
      前回以前の記事を参考にしてください。
      記事に掲載されている内容についてコメントで質問いただいても
      お応えできない場合がありますので、予めご了承ください。
      ================================


      アメブロカスタマイズ講座も、
      実質上は今回が最終回です。
      目標としてきた「アメブロのデザインカスタマイズ」
      は、今回で完成します。

      今日は、「日記の下部にある広告を消す」
      「フッタを調整する」
      です。

      ステップ1
      アメブロの広告の多さには、正直言ってウンザリしますが、
      そのほとんどは消すことができるんですね。
      ただし、消すためにはこの講座のように、
      CSSをいじる必要があります。

      「日記の下部にある広告」とは、この部分のことです。


      他の部分の広告とほぼ同様の手法で消すことができますが、
      ちょっとだけ厄介です。

      CSSの「アメブロ特有コンテンツ」の中を修正します。
      赤い部分が修正/追加部分です。

      #defaultAd,#advertising2,#advertising3,#footer_ad{
      position: absolute;
      left: -9999px;
      height: 1px;
      display: none;
      margin: 0px;
      padding: 0px;
      }

      #footer_ad{
      line-height: 0%;
      }


      表示確認(部分)


      ワリとキレイに消えてくれました。

      ステップ2
      さて、最終ステップ、フッタです。
      ベース画像から、フッタ画像を切り出します。
      この画像を配置し、アメブロアイコンをレイアウトする為の
      CSSを記述します

      /*-----------------------------------------------------
      フッタ
      -----------------------------------------------------*/
      #footerArea{
      clear: both;
      text-align: center;
      padding: 25px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      background-image: url(「フッタ画像のURL」);
      background-repeat: repeat-x;
      }


      さーて、本番でレイアウト確認です。
      これまでは何度か本番(実際のブログ)で
      表示テストしてきたかもしれませんが、
      多くはローカルでの表示テストだったと思います。
      これまで作成した全てのCSSをコピーし、

      アメブロ管理画面>デザインの変更>スキンCSSの編集

      から、CSSをペーストします。

      本番ブログでの表示確認


      完成おめでとうございます!
      やりましたね!
      完全なオリジナルデザインのブログの完成です。

      実際の私のアメブロはこちらからご覧いただけます。
      (しばらくはこのままにしておきますが、
      気が変わってデザインを変更するかもしれません。)

      =============
      ここまで「アメブロカスタマイズ講座」に
      お付き合いくださいました皆さん、
      励ましてくださった皆さんに
      心から感謝申し上げます。
      ありがとうございます。
      =============


      もし、この「バサラなブログ」の
      「アメブロカスタマイズ講座」を参考にしてブログをカスタマイズ
      された方がいらっしゃいましたら、ぜひコメントなどを通じて
      お知らせくださいますとうれしいです。

      皆さんの目には、私がスムースに作業を進めているように
      見えるかもしれません。
      しかし実際には、
      私もこの記事を書きながら、
      試作と失敗を何度も何度も繰り返しています。
      うまくいったものだけを記事にしているだけです。

      ちょっと失敗しただけで諦めず、
      ぜひトライしてください。

      まだこの連載は終わらせたくありません。
      次回からは、アメブロのデザインカスタマイズに使える
      TIPS(ちょっとしたコツやテクニック)を
      紹介したいと考えています。

      他のブログサービスでのデザインカスタマイズを
      連載しようかな?とも思っています。

      実際にどうなるかは気分次第です^^;

      ブログのアクセス解析をしてみよう

      0
        たいていのブログには「アクセス解析」という機能がついています。
        もちろんアメーバブログにもついています。(アメブロトップよりリンク)
        ご自身の「アクセス解析」を使ったこと、見たことはありますか?

        この機能は、自分のブログにどれだけの人が来てくれたか、
        どこから(どのようにして)来てくれたかがわかります。

        訪問者数(アクセス数)は、
        いわゆる「アクセスカウンタ」のようなもので、
        自分のブログにどれだけたくさんの人が
        来てくれたかがわかります。

        「検索キーワード」というものは、
        「どのようなキーワードを使って
        自分のサイトにたどり着いたのか」
        がわかります。

        たとえばYahooやGoogleで、「アメブロ カスタマイズ」
        というキーワードを使って検索し、
        その検索結果画面からワシのサイトに来た人がいたとします。
        そうするとワシのブログのアクセス解析では
        「アメブロ カスタマイズ」というキーワードで
        あなたのサイトにたどり着いている人が何人いますよ、
        ということを教えてくれるわけです。

        ビジネスでブログを活用している方や、
        訪問者を増やしたい方にとって、
        この機能を利用しない手はありません。

        最近、ワシのブログには「アメブロのカスタマイズ」関連で
        キーワード検索して訪れてくださる方が多いことが
        わかります。



        なぜ、このようなキーワードからワシのブログに
        来てくださる方が増えたのでしょうか?

        ワシは最近、このブログで「アメブロカスタマイズ講座」
        という記事を連載し、アメブロのスキン改造に関する話題を
        多く取り上げています。
        当然、記事の中にはアメブロの改造に関するキーワードが
        (ワシが意識することなく)多く記載されることになりますね。

        そうすると、GoogleやYahooといった検索エンジンは
        「このサイト(ブログ)では、アメブロのカスタマイズに関する
        情報が多く記載されているようだ」
        ということを自動的に判断します。
        その結果、アメブロのカスタマイズに関連するキーワードで
        検索すると、
        徐々にワシのサイトが上位に表示されるようになってくるのです。

        現在、検索エンジンで「アメブロ カスタマイズ」という
        キーワードで検索すると、
        ワシのブログが上位に表示されます。



        Googleによる検索結果はこちら

        検索結果の上位に表示されるようになったことで、
        ワシのブログへの訪問者が増えてきた、と考えられます。

        決して検索エンジンで上位に表示されることを狙って
        記事を書いてきたわけではありませんが、
        「アメブロのカスタマイズに関する記事」を
        多く書くことによって、結果的に上位に表示されるように
        なったわけです。

        「いかにして検索結果の上位に自分のサイトを表示させるか」
        というテクニックはIT業界では「SEO」という言葉で表現されていて、高度なテクニックによるもののように考えられています。
        (実際に高度な技術を伴う方法もあります)
        実際には何のことはない、その関連事項を多く記述すれば、
        自然と検索結果の上位に表示されるわけです。

        ここでも、ちょっとしたコツがあります。
        それは
        「あまりに汎用的なキーワードでの上位表示を狙わないこと」
        です。
        たとえば「コーヒー」というキーワードで上位表示を狙うと、
        ライバルが多いため、途方もない努力が必要です。
        ところが
        「名古屋の自家焙煎コーヒー店」というキーワードで狙うと、
        案外早く上位に表示されるかもしれません。

        「検索結果の上位表示を狙う」という行為は
        自社の「コンセプトの絞込み」と強く連動している
        んですね。

        ・・・ところで、お気づきでしょうか?
        この今日の記事にも「アメブロ カスタマイズ」という言葉が
        たくさん入っていますね!?

        アメブロカスタマイズ講座(11)

        0
          ================================
          この記事は、連載でお送りしています。
          部分的に読んだだけでは、内容がわからない場合がありますので、
          前回以前の記事を参考にしてください。
          記事に掲載されている内容についてコメントで質問いただいても
          お応えできない場合がありますので、予めご了承ください。
          ================================


          だんだん「完全オリジナルデザインのアメブロ」
          の完成が見えてきましたね!
          ゴールはすぐそこです。

          今日は.entryの中身を調整していきます。

          現在の状況をブラウザで確認すると、こんなカンジです

          表示確認(部分)


          ステップ1
          広告(#advertising2)と
          「同じテーマの最新記事」(#themeBox)というのが、
          どうにも邪魔ですね。
          邪魔なので、消しましょう。

          既存のCSSを修正します。

          /*-----------------------------------------------------
          広告/アメブロ特有コンテンツ
          -----------------------------------------------------*/

          #amebaBar,#userNaviArea,#ameblo,#themeBox{
          display: none;
          visibility: hidden;
          }

          #defaultAd,#advertising2{
          position: absolute;
          left: -9999px;
          height: 1px;
          display: none;
          margin: 0px;
          padding: 0px;
          }


          表示確認(部分)


          あ〜、スッキリした。
          いかに邪魔だったか、よくわかりますね。

          ステップ2
          .entryの中の文字を調整します。
          以下の点に注意して調整を進めます。

          1)
          私の場合.entryヘッダ画像左側にある、
          葉っぱの画像を見せたいため、
          日付、日記タイトル、テーマなどは全体に右に寄せます。
          また、日付と日記タイトル、テーマの間隔を広げて余裕を持たせ、
          ヘッダ画像がよく見えるようにします。

          2)
          日記本文の文字は、見易さ/読みやすさを最優先します。
          文字の色(color)は薄すしすぎないよう、注意します。
          文字の大きさ(font-size)は小さくなりすぎないように
          注意します。
          40代以上の人でも苦労なく読める大きさは
          15pxくらいからです。私は16ピクセルに設定します。

          3)
          日記本文の行間(line-height)にも注意します。
          読みやすい行間は135〜200%くらいです。
          狭すぎると窮屈になって読みにくくなります。
          200%を大きく上回ると、毎回よぶんに改行しているように
          見えてしまいます。

          4)
          「コメント」などがある、日記下部の.footは、
          ラインで区切ったり、全体を右寄せにして
          日記本文と区別するようにします。
          私の場合は、薄くラインを引き、日記本文との間のスペースに
          少し余裕を持たせます。

          この部分は、日記の読みやすさに直接影響しますので、
          丁寧に表示確認を繰り返しながら設定します。

          /*-----------------------------------------------------
          .entry(日記部分)
          -----------------------------------------------------*/
          #main .entry{
          background-image: url(http://stat.ameba.jp/user_images/e3/42/10118472541.jpg);
          background-repeat: no-repeat;
          padding: 10px 0px 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 10px;
          margin-left: 0px;
          }
          #main .entry .entry_head{
          text-align: right;
          margin: 0px 0px 18px;
          padding-top: 0px;
          padding-right: 10px;
          font-size: 14px;
          color: #FFFFFF;
          font-weight: bold;
          }
          #main .entry .title {
          display: block;
          margin-left: 70px;
          padding-left: 2px;
          border-left-width: 3px;
          border-left-style: solid;
          border-left-color: #006666;
          color: #006666;
          margin-top: 0px;
          margin-right: 5px;
          margin-bottom: 18px;
          padding-top: 0px;
          padding-right: 0px;
          padding-bottom: 0px;
          }
          #main .entry .theme {
          display: block;
          text-align: right;
          font-size: 12px;
          font-weight: bold;
          padding: 0px;
          margin-top: 0px;
          margin-right: 10px;
          margin-bottom: 15px;
          margin-left: 0px;
          }
          #main .entry .contents {
          background-image: url(http://stat.ameba.jp/user_images/c7/18/10118472543.jpg);
          background-repeat: repeat-y;
          font-size: 16px;
          line-height: 180%;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
          padding-top: 0px;
          padding-right: 10px;
          padding-bottom: 10px;
          padding-left: 10px;
          border-bottom-width: 1px;
          border-bottom-style: dashed;
          border-bottom-color: #CCCCCC;
          }
          #main .entry .foot {
          background-image: url(http://stat.ameba.jp/user_images/c4/41/10118472544.jpg);
          background-repeat: no-repeat;
          background-position: bottom;
          padding: 10px;
          font-size: 13px;
          text-align: right;
          }


          表示確認


          これで日記部分の設定完了!
          残るは後少しになってきましたね。

          アメブロカスタマイズ講座(10)

          0
            ================================
            この記事は、連載でお送りしています。
            部分的に読んだだけでは、内容がわからない場合がありますので、
            前回以前の記事を参考にしてください。
            記事に掲載されている内容についてコメントで質問いただいても
            お応えできない場合がありますので、予めご了承ください。
            ================================


            前回は.entryの背景画像の設定をしました。
            今回は.entryの上部「ページャ」(.page)の設定と
            関連する細かな調整をします。
            (前回の予告と違っていてすみません)

            ページャ(.page)とは、この部分です


            ステップ1
            .pageの中の文字を中央寄せにし、文字の大きさや高さなどを設定します。

            /*-----------------------------------------------------
            #main ページャ
            -----------------------------------------------------*/

            #main .page{
            font-size: 12px;
            text-align: center;
            padding: 5px;
            height: 12px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 5px;
            margin-left: 0px;
            background-color: #FFFFFF;
            }


            表示確認


            ステップ2
            .pageが存在しているので、
            .entryの上端と、sub_b/sub_aの上端がズレています。
            これらの上端を揃えます。
            (必要な場合のみ)


            すでに設定している#sub_a、#sub_bの設定に
            以下を加えて調整します。
            数値はご自身のデザインに合わせて調節してください。

            #sub_a{
            float: right;
            width:170px;
            padding:0;
            background-color: #97D4D5;
            background-image: url(http://stat.ameba.jp/user_images/92/73/10122831307.jpg);
            background-repeat: no-repeat;
            margin-top: 17px;
            }


            #sub_b{
            float: right;
            width:175px;
            background-image: url(http://stat.ameba.jp/user_images/50/5e/10118485389.gif);
            background-repeat: repeat-y;
            padding: 0px;
            margin-top: 27px;

            }


            #mainに設定していた、背景色を抜きます

            表示確認


            上部が揃って、スッキリしましたね。
            次回は.entryの中を調整する予定です(^^;

            アメブロカスタマイズ講座(9)

            0
              年末年始の話題もこれくらいにしておいて、
              おなじみの話題の続きに行きましょうか。

              ================================
              この記事は、連載でお送りしています。
              部分的に読んだだけでは、内容がわからない場合がありますので、
              前回以前の記事を参考にしてください。
              記事に掲載されている内容についてコメントで質問いただいても
              お応えできない場合がありますので、予めご了承ください。
              ================================


              アメブロカスタマイズ講座も、中間点を折り返し、
              後半戦に入ってきました。
              ゴールはすぐそこです。

              今日は、ブログの中心部とも言える、日記部分、
              アメブロで言うところの.entry周りの調整に入ります。

              まず、.entryの論理構造のおさらいです

              1).entry
              2).entry_head
              3).title
              4).theme
              5).contents
              6).foot

              ステップ1
              ベース画像から、.entryに貼り付ける画像の切り出しを行います。
              それぞれ、
              .entryヘッダ画像、.entryボディ画像、.entryフッタ画像
              と呼ぶことにしましょう。


              ステップ2
              次に、切り出したそれぞれの画像を、.entryの中の
              どのクラス(.entry_headなどのこと)に割り当てるかを
              考えます。

              これは、ヘッダ画像によって割り当てるクラスを
              変更する必要があるからです。
              以下の画像をご覧下さい。



              ヘッダ画像の高さが低い場合、
              ヘッダ画像の中には「日付」だけ入ればよいため、
              .entry_headに.entryヘッダ画像を割り当てます。

              .entryに.entryボディ画像
              .entry_headに.entryヘッダ画像
              .footに.entryフッタ画像

              という割り当てです。
              これはわかりやすいですね。

              ところが私が作った.entryヘッダ画像は高さがあり、
              この画像の中に日付、タイトル、テーマを入れたいと思います。
              その場合

              .entryには.entryヘッダ画像
              .contentsに.entryボディ画像
              .footに.entryフッタ画像

              を割り当てます。

              /*-----------------------------------------------------
              .entry(日記部分)
              -----------------------------------------------------*/
              .entry{
              background-image: url(「.entryヘッダ画像のURL」);
              background-repeat: no-repeat;
              background-position: 0px 0px;
              padding: 0px;
              margin-top: 0px;
              margin-right: 0px;
              margin-bottom: 10px;
              margin-left: 0px;
              }
              .entry .contents{
              background-image: url(「.entryボディ画像のURL」);
              background-repeat: repeat-y;
              }
              .entry .foot{
              background-image: url(「.entryフッタ画像のURL」);
              background-position: 0px bottom;
              background-repeat: no-repeat;
              }


              表示確認(部分)

              .entryヘッダ画像の中に、日付、タイトル、テーマが
              入っているのがお分かりいただけると思います。

              次回は、.entryの中のテキストのレイアウトを調整していきます。

              アメブロカスタマイズ講座(8)

              0
                年末だろうがなんだろうが、進んじゃいます(^^;

                前回までに#sub_bに背景画像を設定しました。


                今日は#sub_bにsub_bヘッダ画像、sub_bフッタ画像を設定し、
                #sub_bの内容を調整します。

                STEP1
                まず、自分の#sub_bの内容を見て、
                一番先頭にあるコンテンツ、一番下にあるコンテンツを
                確認します。

                私の場合は、#sub_bの先頭のコンテンツは#calendar、
                最後のコンテンツは#rssという名です。


                デフォルトでは、#sub_bの最後のコンテンツは#rssですが、
                先頭のコンテンツは、アメブロカスタマイズ講座(3)のSTEP3
                で設定した内容によって異なりますので、
                ご自身の#sub_bの先頭コンテンツの名を調べる必要があります。

                コンテンツの名前(ID)の調べ方は
                予備講座(2)を参照してください。

                ちなみに、先頭コンテンツのタイトルが「カレンダー」
                である場合、HTMLファイルの「カレンダー」という文字列を
                探し出し、直前の"id="という記述を探し出します。
                これが、「カレンダーの名前(ID)」です。

                以下、先頭コンテンツが#calendar、最後のコンテンツが
                #rssである場合を例に記述を進めます。

                /*-----------------------------------------------------
                sub_b
                -----------------------------------------------------*/
                #sub_b #calendar{
                background-image: url(「#sub_bヘッダ画像のURL」);
                background-repeat: no-repeat;
                padding-top: 10px; /* 要調整 */
                }

                #sub_b #rss{
                background-image: url(「#sub_bフッタ画像のURL」);
                background-repeat: no-repeat;
                background-position: left bottom;
                padding-bottom: 10px; /* 要調整 */
                }


                表示確認(部分)


                これで、#sub_bへの画像の設定は終わりました。
                レイアウト確認用のために最初に設定した、
                #sub_bの背景色を抜きます。
                #sub_aへの背景画像の設定の方法も全く同じですので、
                ここでは重複の説明をしません。
                ぜひ#sub_aへの背景画像設定にチャレンジしてください。

                #sub_a,#sub_bへの背景色が設定できたものとして
                先を進めます。

                表示確認


                STEP2
                #sub_aと#sub_bの中の文字の大きさや、
                スペースの取り方を設定します。
                #sub_aと#sub_bを一気に設定してしまいます。

                /*-----------------------------------------------------
                sub_a/sub_b共通
                -----------------------------------------------------*/

                #sub_a .menu_frame, #sub_b .menu_frame{
                margin-top: 0px;
                margin-right: 12px;
                margin-bottom: 5px;
                margin-left: 0px;
                padding-top: 0px;
                padding-right: 0px;
                padding-bottom: 5px;
                padding-left: 10px;
                border-bottom-width: 1px;
                border-bottom-style: dotted;
                border-bottom-color: #999999;
                font-size: 12px;
                line-height: 135%;
                }
                #sub_b ul,#sub_a ul{
                list-style-type: none;
                margin: 0px;
                padding-top: 0px;
                padding-right: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                }

                #sub_a .menu_title,#sub_b .menu_title{
                font-size: 14px;
                border-left-width: 3px;
                border-left-style: solid;
                border-left-color: #006666;
                margin-top: 10px;
                margin-bottom: 10px;
                margin-left: 10px;
                padding-top: 0px;
                padding-right: 0px;
                padding-bottom: 0px;
                padding-left: 2px;
                }
                #sub_a .mainMenu,#sub_b .mainMenu{
                margin: 0px;
                padding: 0px;
                }


                数値の部分や、色の設定部分は、
                デザインにあわせて調整してください。
                line-heightは、行間設定です。
                100%だと、行間は0です。
                読みやすい行間は135〜180くらいです。
                私の場合、日記の本文は180%くらい、
                メニュー部などの、本文以外の文章には135%くらいを
                設定しています。

                文字サイズも、メニュー部は日記部より、少々小さめ
                (今回は12ピクセル)を設定しました。

                表示確認(部分)


                残念ながら年内に連載が終了しませんでしたが、
                年末年始の時間があるときにでも、
                ぜひチャレンジしてみてくださいね〜

                アメブロカスタマイズ講座(7-2)

                0
                  ================
                  アメブロのサイドバーにある、
                  広告の削除方法についての記事です
                  ヘッダ部分にある「ユーザナビ」の消し方はこちら
                  ================


                  ここまで「表示確認」で示していたサンプルの確認画面に
                  間違いがあったので、訂正します。
                  今の段階では、以下のように#sub_bの中に広告が
                  表示されているはずです。



                  非常に目立つ場所にあって(広告なんだから当たり前か)、
                  邪魔ですので、これを抜いてしまいましょう。
                  やっていいものかどうか考えてしまいますが、
                  できるんですから、やっちゃいましょう。

                  この広告は、ヘッダの説明文を消したときのような
                  displayの設定では消えません。
                  そこで、画面の外に飛ばしてしまいます。
                  CSSの「広告/アメブロ特有コンテンツ」部分に
                  以下を追加します。

                  #defaultAd{
                  position: absolute;
                  left: -9999px;
                  height: 1px;
                  float: left;
                  display: none;
                  }


                  表示確認


                  広告は画面の左の遥か彼方、
                  9000ピクセル向こうに飛ばしてしまいました。

                  ここまでのCSSを一通り示しておきます。
                  コピペして利用してください。
                  URLやピクセルなどは、各自の設定に合わせて調整してくださいね。

                  /*-----------------------------
                  スタイルリセット
                  ---------------------------*/
                  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,
                  pre,form,input,textarea,p,blockquote{
                  margin:0;
                  padding:0;
                  }

                  ul,li,ol{list-style-type:none;}
                  img{
                  border:none;
                  vertical-align:bottom;
                  }
                  form{
                  margin:0px;
                  }


                  #frame,
                  #wrap,
                  #defaultAd dl{display: inline-block;min-height: 1%;}


                  * html #frame,
                  * html #wrap,
                  * html #defaultAd dl{height: 1%;}
                  #frame,
                  #wrap,
                  #defaultAd dl{display: block;}

                  /*-----------------------------------------------------
                  基本レイアウト
                  -----------------------------------------------------*/

                  #main{
                  float: left;
                  width: 465px;
                  margin:0;
                  padding:0;
                  background-color: #9999CC;
                  }

                  #sub_a{
                  float: right;
                  width:170px;
                  margin:10 0 0;
                  padding:0;
                  background-color: #FFCC99;
                  }

                  #sub_b{
                  float: right;
                  width:175px;
                  background-color: #CCCC00;
                  background-image: url(http://stat.ameba.jp/user_images/50/5e/10118485389.gif);
                  background-repeat: repeat-y;
                  padding: 0px;

                  }
                  #frame{
                  width:100%;
                  background-image: url(http://stat.ameba.jp/user_images/99/f2/10121210573.jpg);
                  background-repeat: repeat-x;

                  background-color: #009997;
                  display: block;
                  margin: 0px;
                  padding: 0px;

                  top: 0px;
                  }
                  #wrap{
                  width: 820px;
                  margin-right: auto;
                  margin-left: auto;
                  margin-top: 10px;

                  }
                  /*-----------------------------------------------------
                  背景画像を見せるための処理
                  -----------------------------------------------------*/

                  #frame:after,
                  #wrap:after{
                  content:".";
                  display:block;
                  height:0;
                  clear:both;
                  visibility: hidden;
                  }

                  /*-----------------------------------------------------
                  広告/アメブロ特有コンテンツ
                  -----------------------------------------------------*/

                  #amebaBar,#userNaviArea{
                  display: none;
                  visibility: hidden;
                  }


                  #defaultAd{
                  position: absolute;
                  left: -9999px;
                  height: 1px;
                  display: none;
                  margin: 0px;
                  padding: 0px;
                  }


                  /*-----------------------------------------------------
                  ヘッダ部
                  -----------------------------------------------------*/
                  #overHeader{
                  margin: 0px;
                  padding: 0px;
                  height: 158px;
                  width: 100%;
                  }
                  #header{
                  margin: 0px auto;
                  padding: 0px;
                  height: 158px;
                  background-image: url(http://stat.ameba.jp/user_images/88/cd/10118181820.png);
                  background-repeat: no-repeat;
                  width: 800px;
                  }
                  #header h1{
                  font-size: 12px;
                  margin: 0px;
                  padding: 0px;
                  }
                  #header h1 a{
                  padding-top: 135px;
                  display: block;
                  padding-bottom: 12px;
                  padding-left: 100px;
                  color: #009999;
                  }
                  #header h2{
                  display: none;
                  }


                  アメブロカスタマイズ講座(7)

                  0
                    ヘッダ部分が終わりましたので、
                    ヘッダ部よりも下の部分の調整していきます。

                    ここまでの内容でコツを掴んだ方は、
                    どんどん先に進んでいっちゃってくださいね。

                    ステップ1
                    まずはヘッダより下の部分を大きく囲む
                    #wrapの調整をしましょう。


                    #wrapは、上記の(4)の部分です。
                    この部分の幅を、ベース画像の、以下の部分の幅に合わせます。



                    私の場合は#mainが465ピクセル、#sub_aと#sub_bがそれぞれ
                    170ピクセルですので、
                    465+170+170+余裕分=820ピクセルとします。

                    ヘッダ画像の幅が800ピクセルですので、
                    これよりも大きくなり過ぎないように、画像の幅を調整します。

                    #wrap{
                    width: 820px;
                    margin-right: auto;
                    margin-left: auto;
                    }


                    表示確認


                    先に指定したCSSの「基本レイアウト」部分を調整します。

                    /*-----------------------------------------------------
                    基本レイアウト
                    -----------------------------------------------------*/

                    #main{
                    float: left;
                    width: 465px; /* #mainの幅 */
                    margin:0;
                    padding:0;
                    background-color: #9999CC;
                    }

                    #sub_a{
                    float: right;
                    width:170px; /* #sub_aの幅 */
                    margin:0;
                    padding:0;
                    background-color: #FFCC99;
                    }

                    #sub_b{
                    float: right;
                    width:175px; /* #sub_bの幅 + 余裕(ここでは5px) */
                    margin:0;
                    padding:0 5 0 0; /* "5"はwidthで足した余裕分 */
                    background-color: #FF9933;
                    }


                    この前後のステップが一発でうまく行くことは、まずありません。
                    画像を貼り付けていく過程で、余分な幅が出てしまったり、
                    幅が足りなかったりするものです。
                    ここからのステップは、実際に画像を貼り付けて表示確認を
                    しながら、画像の幅を調整して再度切り出したり、
                    CSS設定の幅をピクセル単位で調整していきます。


                    ステップ2

                    真ん中のsub_bから調整を進めてみます。
                    ベース画像から、みっつの画像を切り出します。
                    sub_bヘッダ画像、sub_bボディ画像、sub_bフッタ画像
                    とそれぞれ呼ぶことにします。



                    これらを、sub_bに貼り付けていくのですが、
                    まずはsub_bボディ画像から貼り付けます。
                    先ほど指定したばかりの
                    #sub_b{
                    を修正します。

                    #sub_b{
                    float: right;
                    width:175px;
                    margin:0;
                    padding:0 5 0 0;
                    background-color: #CCCC00;
                    background-image: url(sub_bボディ画像のURL);
                    background-repeat: repeat-y;

                    }


                    表示確認


                    ここでは、sub_bの右側に少しだけ、
                    背景色として指定した#CCCC00の色(■)が見えていますね。
                    この部分がsub_bとsub_aの間の「余裕分」「間隔」
                    ということになります。

                    次回はsub_bのヘッダとフッタを貼り付けます。

                    アメブロカスタマイズ講座(6)

                    0
                      今日は、ヘッダ部分をいじってみましょう。
                      「ブログデザインに挑戦しよう」では、ヘッダ部分を調整したので、
                      このあたりはもう慣れたものですよね?(^^

                      ステップ1
                      ブログへの訪問者が見て、
                      「あ、これはアメブロだ」とわかる部分は、
                      ページの上部にある「アメブロバー」と「ユーザナビエリア」
                      です。
                      これ、邪魔ですね。



                      邪魔なので消えていただきましょう。
                      前回までのCSSの最後に、以下の記述を追加します

                      /*-----------------------------------------------------
                      広告/アメブロ特有コンテンツ
                      -----------------------------------------------------*/

                      #amebaBar,#userNaviArea{
                      display: none;
                      visibility: hidden;
                      }



                      表示確認


                      #userNaviAreaはおとなしく消えてくれましたが、
                      #amebaBarは、その高さ分が余白になってしまっています。

                      これを消す方法をいろいろと試してみました。
                      「#overHeaderごと隠してしまう」という手によって、
                      この#amebaBarを完全に消してしまうこともできます。
                      しかし、大きな副作用が起きてしまい、
                      いろいろと面倒が起きますので、
                      今回は#amebaBarによる余白は仕方のないものとして
                      このまま行きます。

                      ステップ2
                      ヘッダ画像を用意します。
                      ベース画像から、ヘッダ画像を切り出します。

                      これはとても重要なことなのですが、
                      アメブロでは幅、高さ共に
                      800ピクセルを超える画像をアップすると、自動的に
                      リサイズされて、勝手に小さな画像にしてしまいます。

                      これを避けるためには、サイズを800ピクセル以内で
                      作成する必要があります。
                      私もヘッダ画像は800ピクセルぎりぎりで作りました。

                      ヘッダ部分の調整と共に画像を貼り付けます。

                      /*-----------------------------------------------------
                      ヘッダ部
                      -----------------------------------------------------*/
                      #overHeader{
                      margin: 0px;
                      padding: 0px;
                      height: 158px; /* ヘッダ画像の高さ */
                      width: 100%;
                      }
                      #header{
                      margin: 0px auto;
                      padding: 0px;
                      height: 158px; /* ヘッダ画像の高さ */
                      background-image: url(ヘッダ画像のURL);
                      background-repeat: no-repeat;
                      width: 800px; /* ヘッダ画像の幅 */
                      }


                      表示確認


                      だんだん「らしく」なってきましたね。

                      ステップ3
                      「ブログデザインに挑戦しよう」でも行った、
                      タイトル文字やサイト説明文の調整を行います。
                      これはもう、ざっくりとした説明でいいですよね。
                      私は、サイト説明文については消してしまいます。
                      色や、ピクセル部分については、自分のタイトル画像に
                      あわせて調整します。

                      #header h1{
                      font-size: 12px;
                      margin: 0px;
                      padding: 0px;
                      }
                      #header h1 a{
                      padding-top: 135px;
                      display: block;
                      padding-bottom: 12px;
                      padding-left: 100px;
                      color: #009999;
                      }
                      #header h2{
                      display: none;
                      }

                      表示確認


                      ヘッダ部分については完成しちゃいましたね。
                      今日はこのへんにしときましょうか。

                      | 1/3PAGES | >>

                      calendar

                      S M T W T F S
                            1
                      2345678
                      9101112131415
                      16171819202122
                      23242526272829
                      3031     
                      << July 2017 >>

                      selected entries

                      categories

                      archives

                      recent comment

                      recommend

                      過去問で効率的に突破する! 「中小企業診断士試験」勉強法 (DO BOOKS)
                      過去問で効率的に突破する! 「中小企業診断士試験」勉強法 (DO BOOKS) (JUGEMレビュー »)
                      斎尾裕史
                      何をどう勉強するかを、具体的に知るための本。受験者必読。

                      links

                      profile

                      search this site.

                      others

                      mobile

                      qrcode

                      powered

                      無料ブログ作成サービス JUGEM