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

0
    ここから、実際のCSSをいじり始めます。
    ここまでは進め方や考え方でしたが、
    ここからはステップごとに劇的に「見た目」が変わっていきますよ。

    ところで「ブログデザインカスタマイズ講座」を
    「アメブロカスタマイズ講座」に変えました。

    では、ローカルのCSSを直接いじっていきましょう。

    ステップ1
    最初に「スタイルを素っ裸にする」です。
    既存のデザイン(スタイル)を全て剥いでしまって、
    一旦「何もデザインされていない状態」にします。

    アメブロの場合、独自にいじれるCSSはひとつだけでしたよね?
    (例:10005750477.css)
    この中のCSSを全て削除して、
    以下の内容だけにしてしまいます。


    /*-----------------------------
    スタイルリセット
    ---------------------------*/
    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;}
    /*-----------------------------------------------------
    背景画像を見せるための処理
    -----------------------------------------------------*/

    #frame:after,
    #wrap:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility: hidden;
    }
    /*----------------------------------------------
    基本レイアウト
    -----------------------------------------------*/

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

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

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


    表示確認


    本当に「素っ裸」にしてしまうと、レイアウトそのものが
    なくなってしまうため、最低限の基本レイアウトは残してあります。
    いわば「パンツ一丁」状態ですかね。

    ちなみに私の場合、作業中は
    #main,#sub_a,#sub_bなどには色をつけて
    領域の境界線をわかりやすくしています。

    ステップ2
    ページの背景画像を用意します。
    ベースとなるデザインの画像から、背景用の画像を切り出します。
    「切り出す」という作業は、Adobe製品をお持ちの場合「スライス」という機能を使うと、とても楽です。
    他社製品の場合でも、同様の機能を使うか、
    新規画像>貼り付けなどを応用して、ベース画像から背景画像を作成します。

    ヘッダ部分から、フッタの真上までの領域のシームレス画像です。
    この画像を、ページの背景として貼り付けます。
    (画像のアップロードやURLリンクの方法については以前の記事を参照)

    以下のスタイルを追加します。

    #frame{
    width:100%;
    background-image: url(背景画像URL);
    background-repeat: repeat-x;
    background-color: #009997;
    display: block;
    margin: 0px;
    padding: 0px;
    top: 0px;
    }


    私の背景画像はx軸シームレスなので
    background-repeat: repeat-x;
    となっています。
    y軸シームレス画像の場合は
    background-repeat: repeat-y;
    xyシームレスの場合は
    background-repeat: repeat;
    とします。

    また、x軸方向だけにリピートすると、
    横方向だけに画像が繰り返される為、
    背景画像よりも下の部分には何も背景が表示されません。
    そこで、上記の背景画像で言うところの、
    もっとも下の部分の色を背景色(#009997)として
    指定することで、背景画像と背景色が繋がっているように
    見せています。

    表示確認


    いよいよ、デザイン作業がはじまった!
    という感じがしてきましたね。

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

    0
      今日のブログデザインカスタマイズ講座アメブロ)は
      「アメブロページの論理構造を知ろう」です。

      「論理的な構造」についてのお話は以前の記事をご覧下さいね。

      アメブロの場合、HTMLをいじることはできないので、
      論理的な構造は不変です。
      この論理的な構造に、CSSによってどのような「スタイル」を
      与えていくかによって、デザインを進めていきますので、
      まずはこの「アメブロのページの論理的な構造」
      を押えておきましょう。



      これは非常に大雑把ではありますが、
      アメブロページの論理構造を視覚的に表したものです。
      実際はもっと複雑なのですが、まずはコレくらいを
      押えておきましょう。
      各名称をお伝えします。

      1)#overHeader
      2)#userNaviArea
      3)#header
      4)#wrap
      5)#main
      6).entry
      7)#sub_b
      8)#sub_a

      ここで、.entryだけ「#」ではなく「.」ではじまっている
      ことにお気づきかと思います。
      一般的に、そのページで一度しか使われない定義は「#」
      そのページで何度も使われる可能性のあるものは「.」
      で定義されます。

      CSSで"#"ではじまるものはIDと呼ばれ、HTMLでは"id="という
      記述に対応します。
      CSSで"."ではじまるものはclass(クラス)と呼ばれ、
      HTMLでは"class="という記述に対応します。
      覚えておくと便利です。


      .entryは、日記の外側をあらわしています。
      日記は、1ページにいくつも表示される可能性があるので、
      「.」になっています。

      さらに、.entryの中を覗いてみましょう。


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

      .entryの中にあるものは、全て同じページで繰り返される
      可能性があるので、「.」ではじまっています。

      たとえば、日記部のタイトルの背景や文字の色を
      変えたい場合には、CSSの

      #main .entry .title{

      で始まる記述を探すか、自分で記述をするなりして、
      設定するわけです。
      #main .entry .title
      は「#mainの中にある.entryの中にある.title」
      という意味です。

      以降は「日記部」「日記のタイトル」などという言い方は
      どこを指しているのか解りにくいので、
      直接、「.entry」だとか「.entry .title」という
      指し示し方をしたいと思います。


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

      0
        「デザインできました〜」という声を聞きませんが、
        ぼちぼちはじめましょうか。
        ここからはアメブロの話題です。

        STEP1
        作業を開始する前に、現在のデザインは保存しておいてください。
        以降、実際のブログ(みんなに公開しているブログ)を本番ブログ、
        PC上で操作しているものをローカルと呼びます。
        前回お伝えしたように、テキストとしてCSSさえ保存しておけば、
        作業の途中でも現在のデザインに戻したり、
        作業途中の状態を保存しておくことが出来ます。

        STEP2
        現在のデザインを保存したら、
        管理画面からいったんスキンを「ベーシック」にもどし、
        「カラムを変更」して、基本的なレイアウトを決定します。
        私は「3コラム-左」を選択しました。

        STEP3
        その後、「サイドバーの配置」で、メニュー内の配置を
        決定します。
        この決定は、後で変更すると、デザインが崩れる
        可能性がありますので、サイドバーの配置は
        この段階で決定しておきます。

        決定したら、前回の記事に基づいて、
        ブログページをローカル(PC)に保存します。

        STEP4
        ページをローカルに保存したらSTEP1で保存しておいた
        デザインに戻します。
        これで本番ブログのデザインはSTEP1の状態に戻っているはずです。

        以降、ローカルPCで作業を進めますが、
        作業の節目には作業途中であっても本番ブログで
        表示テストを行います。


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

        0
          今日は「ローカルで編集しよう」です。
          アメブロ/ソネブロ共通の話題です。

          インターネット上で何か操作をする場合「ネット上で〜する」
          というのに対し、自分のPCの中のファイルをいじる場合、
          「ローカルで〜する」
          という言い方をします。

          これまで、ブログの管理画面から
          CSSやHTMLを操作されてきたかもしれませんが、
          今後はステップ数も多くなりますし、失敗も増えてくると
          思います。
          そのたびにブログのレイアウトがぐちゃぐちゃになったり、
          最初からやり直すのは、ホネが折れますよね。

          そこで、ブログの内容をいったんPCに保存し、
          「ローカルで」作業をして、
          うまくいったら実際のブログのCSSを更新する、
          という方法で進めます。

          そうすれば、ブログは今の状態のまま、
          いろいろとデザインを試したり、
          試行錯誤をくりかえしたりすることができます。

          自分のブログのトップページを表示し、
          ブラウザから

          ファイル>名前をつけて保存(IE)
          ファイル>名前をつけてページを保存(FireFox)

          とし、PCの任意のフォルダ(新規フォルダ)内に保存します。
          このとき、「ファイルの種類」は「Webページ、完全」を
          選択します。

          保存したら「〜htm」もしくは「〜html」という
          名前のファイルを開いてみましょう。
          ブログページがブラウザによって開かれます。
          これによって、
          ブログのページが、PCに保存されたことがわかります。

          ソネブロの場合、この〜htmlの内容を
          テキストエディタで直接編集します。

          テキストエディタは、Windowsであれば「ノートパッド」などの
          ものが最初から付属してありますが、
          TeraPadなどの
          フリーのソフトもあります。

          アメブロの場合は、ローカルに保存した際に作成される
          index_filesまたはindex.filesというフォルダ内にある、
          10005750477.css
          などの数字のついたcssファイルを、
          同じくテキストエディタで編集します。
          (他のcssファイルを編集することはありません)
          (アメブロではHTMLは編集しません)

          HTML、CSSともに、テキストエディタで編集するほか、
          DreamWeaverなどのWebページ編集ソフトをお持ちの方は、
          そちらを使ったほうが効率がよいと思います。

          (ソフトの操作法については、ここでは触れません)

          〜htmlまたは〜cssファイルを編集し、
          編集した結果を〜htmlファイルをブラウザで開いて確認、
          という操作を繰り返します。

          「とりあえず、ここまではうまくいった」
          という節目では、htmlファイルまたはcssファイルを
          別名で保存し、世代管理を行います。
          こうすれば、どこかで大失敗しても、
          最初まで戻らなくても済みます。
          とりあえず、編集を始める前に現状のhtml、cssを
          別名保存しておきましょう。
          そうしておけば、少なくとも「今の状態」に戻すことはできます。

          まずは、「ローカルで操作する」、すなわち

          ・ファイルをローカルに保存する
          ・ローカルでHTML、CSSの編集を行い、表示チェックを行う

          という操作に慣れましょう。

          ソネブロ完成

          0
            ソネットブログのカスタマイズも完了しました。

            http://basaranet.blog.so-net.ne.jp/

            やっぱり、こっちのほうがラクだったなぁ。

            ちなみに、比較用のワシのアメブロ

            ソネブロとアメブロでは、日記部とメニュー部が
            入れ替わっていますが、これは同じにできます。

            つまり、アメブロでもソネブロでも、
            やろうと思えば自分の(ほぼ)思ったとおりに
            改造できる、ということなんですね。

            お付き合いいただき、ありがとうございました。
            手法については、ゆっくり紹介していきます。


            アメブロの広告を見えなくする

            0
              アメブロに勝手に表示される広告を、
              完全に見えなくすることに成功しました。

              http://ameblo.jp/basaranet/

              方法はこちら

              ただし、この行為は、アメーバブログの利用規約に
              反する可能性もあります。

              --------引用
              第14条(弊社の権利)
              * 弊社は、会員の事前の承諾を必要とせず、本サービスを利用して広告等を掲載する権利を有します。

              --------引用ここまで
              http://helps.ameba.jp/rules/post_104.html

              ただし、広告を消すことは、利用者の禁止行為とは
              されていないようです。

              私のブログを参考になさってもよいとは思いますが、
              以上のような記述があることはご理解ください。

              しかし、気になる記述をみつけました。
              --------引用
              3.禁止事項
              (7) 商業用の広告、宣伝を目的としたブログの作成(弊社タイアップ等は除く)

              --------引用ここまで
              http://helps.ameba.jp/rules/blog_guideline.html

              個人的なブログしかダメ・・と言っているようにも見えます。
              広告の表示といい、商業行為の禁止といい、
              やはりフリーのブログでは難しいのかもしれませんね。

              アメブロカスタマイズ講座(お知らせ)

              0
                ワシのアメブロのデザインカスタマイズが、
                ほぼ終了しました。

                http://ameblo.jp/basaranet/

                苦労しました・・・(@_@;

                これをどのようにみなさんにお伝えしようか、
                考えています。

                IEでは、ブラウザのバグのため、
                広告部分の表示がおかしくなることがありますが、
                その他のブラウザでは正常です。

                ところで、ソネブロ(so-netブログ)のほうも、
                いじりはじめています。
                http://basaranet.blog.so-net.ne.jp/

                ソネブロ特有の上部のバーを消したり、
                広告を消したりするのは、アメブロの場合に比べると、
                はるかにラクです。

                でも、ソネブロは日記のテキストに広告がリンクされるのが
                いただけませんね。

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

                0
                  昨日の「ブログデザインカスタマイズ講座(1)」
                  でお伝えするのを忘れていたことがあるので、
                  そのことについて記します。

                  ・・・というか、参加いただいてますでしょうか??(^^;不安です

                  今日お伝えするのは「シームレス画像」についてです。

                  「シームレス」とは、「継ぎ目のない」という意味です。
                  以下の画像をご覧ください。


                  縦横に繰り返されても違和感のない、xyシームレスもあります。


                  このように、縦または横に繰り返して表示した場合、
                  画像が一枚に繋がって見えるような画像のことを
                  「シームレスな画像」といいます。
                  ブログデザインの、このような部分に使用します。

                  xとあるのはx軸シームレス、
                  yとあるのはy軸シームレスな画像を使います。

                  なぜ、このような画像にする必要があるのでしょう。

                  ブログを見るとき、ブラウザのサイズは人によってまちまちです。
                  また、日記の本文の量も、日によってまちまちですね。
                  「伸びたり縮んだりする画像」が必要になります。

                  百聞は一見にしかず。
                  この画像でその役割がお分かりいただけると思います。

                  作るのは、さほど難しいことではありません。
                  ラインやグラデーションなど、
                  単純な模様はシームレスであることが多いのです。

                  図20081210-01の画像も、よく見ると単なるグラデーション
                  であることがお分かりいただけると思います。

                  それでもシームレス画像を作るのは難しい、
                  という場合は、所定の部分をベタ(単色塗りつぶし)で
                  作成されるのが、後々ラクです。

                  デザイン性が多少落ちるのと、
                  画像を駆使してブログをゴリゴリカスタマイズする、
                  という楽しみは薄れますが、
                  初心者の方にはベタのほうがよいかもしれません。

                  以上のような点に留意をされて、
                  ページデザインを作成されるのがよいと思います。

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

                  0
                    ではいよいよ、
                    ブログデザインのフルカスタマイズに入ります。

                    ============================
                    この記事からブログのデザインを始められる方は、ぜひこれまでの
                    「ブログデザインに挑戦しよう」と「予備講座」
                    の記事も予めご覧ください。
                    これまでに掲載したステップや操作は、今後省略していきます。
                    また、今後も、一度掲載したステップは省略しますので、
                    よろしくお願いします。

                    ============================

                    最初から、いきなり大きな壁が現れますが、
                    がんばりましょう。

                    第一回は「全体のページデザインを考える」です。

                    私はこのようなデザインを作ってみました。(原寸大)
                    これで今回の講座のデザインを進めてみようと思います。
                    途中で気が変わるかもしれませんが(^^;

                    今回のデザインは、先に紹介した
                    こちらのブログからアイデアを
                    参考にしつつ、オリジナルの要素を加えてみました。

                    原寸大で、ページ全体のデザインを作成します。
                    ページのメインとなる部分が800ピクセル程度
                    収まるようにします


                    毎回、部分ごとに必要なパーツ画像を作ってもいいのですが、
                    せっかく「フルカスタマイズデザイン」をするのですから、
                    このように一気にページ全部をデザインしてしまったほうが
                    全体のバランスを見てデザインすることができます。

                    「ページのメインとなる部分が800ピクセル程度」
                    である以外、他の部分のサイズは、
                    この段階ではさほど気にしません。

                    必要に応じて、画像に合わせてCSSの設定を変えたり、
                    CSSの設定に合わせて画像を作り変えます。
                    この段階では、「全体のイメージを作る」ことを
                    目的とします。

                    私はFireWorksでこの画像を作成しました。

                    実際に作業を進めていく上で
                    不可能であることが判明したり、
                    私にも方法がわからなかったりする場合には
                    そのつどデザインを変更する場合があります。

                    この画像が、全体のデザインのベースとなります。
                    (以降の作業の途中で修正も可)
                    ブログのデザインに必要なこまごまとした画像のパーツは、
                    このベースの画像から切り出して作成します。

                    ここでは日記本文などの文字を乗せていませんが、
                    実際に掲載されることになる日記などの
                    文字の色もこの時点である程度考えておきます。

                    デザインが完成されましたら、一度アップして、
                    このブログのコメントでお知らせいただくか、
                    ご自身のブログで公表してください。

                    ここでみなさんにページのデザインを作成していただくため、
                    かなり時間が必要だと思います。
                    しばらく(数日程度)このブログでは他の日記を書いたり、
                    ブログに関するコラムや予備講座を記したいと思います。


                    アメブロカスタマイズ講座(予備講座:2)

                    0
                      今回は
                      「”仮説”と”検証”でブログのデザインを変更してみよう」
                      という話題です。

                      これまでの内容に比べると少々レベルが高いので、
                      読んでもよくわからない場合は読み飛ばしていただいても
                      構いません。


                      これまでの「ブログデザインに挑戦しよう」や
                      今回の講座でも

                      「講座に記載された部分の変更はできるけど、
                      講座に書いてない部分を変更するにはどうしたらよいのか?」
                      という疑問が湧くと思います。

                      そこで
                      「ある特定の部分を変更するには?」
                      へのヒントをお伝えします。

                      どんなブログにも応用できますので、
                      アメブロ以外の方も参考になさってください。

                      たとえば、アメブロでこの部分を変更したいと思ったとします。


                      次のように操作します。

                      ステップ1
                      ここには「アメブロランキング」と書かれています。
                      この文字をコピーします。

                      ステップ2
                      ページを表示した状態でブラウザの
                      表示>ページのソース(FireFox)
                      表示>ソース
                      を選択しますと、HTMLのソース(このページのHTML文章)が
                      表示されます。

                      キーボード操作
                      「Ctrl」+「F」
                      で「文字列検索」をします。
                      先ほどの「アメブロランキング」を入力して、
                      この文字列が書かれている部分を探し出します。



                      見つかりました。
                      この記述の直前に、何が書かれているか、見てみます。

                      <h4 class="menu_title">

                      とあります。
                      このmenu_titleによって、
                      「アメブロランキング」の記述部分が定義されているらしい、
                      つまり、
                      CSSではmenu_titleという記述の部分で
                      この部分「アメブロランキング」のスタイルが
                      記述されているらしい、
                      という仮説を立てます
                      ソネットやアメブロ以外では、
                      別の名前で定義されていますので、
                      別途ご自身のブログのHTMLを検索してみてください。
                      なお、class=は、id=と記述されている場合もあります。
                      この違いについては別途記載します。

                      ステップ3
                      ブログの管理画面から、CSS編集
                      (ソネットの場合にはHTML編集)
                      を行います。

                      この中からmenu_titleと書かれている部分を検索します。

                      さて、こまったことに複数箇所に出てきました

                      .menu_title,
                      .mainMenu ul,
                      .mainMenu dl,
                      .mainMenu p,
                      .list,
                      .link_blog,
                      #archives select,
                      #theme_list select,
                      #search form{
                      margin-left: 6px;
                      margin-right: 6px;
                      }

                      という部分と

                      h4.menu_title{
                      margin:0 0 10px 0;
                      padding:3px 6px;
                      color: #333333;
                      background-color:#EFEFEF;
                      font-size:1.17em;
                      font-weight: bold;
                      }

                      という部分です。
                      前者は、menu_titleを含めた複数の定義を一気に行っています。
                      (カンマ”,”でつながっているのは、複数の定義を一度に
                      行っていることをあらわします。つまり、この部分の定義を
                      変更すると、menu_title以外の定義の部分のデザインも
                      変わってしまうことになります)

                      後者はmenu_titleだけの定義を行っています。

                      そこで、後者に目をつけ、
                      ここの

                      background-color:#EFEFEF;

                      という記述を

                      background-color:#ff0000;
                      (#ff0000は赤)
                      と変更してみます。

                      今は、
                      「menu_titleのCSS情報を変更することによって
                      ”アメブロランキング”という部分のデザインを
                      変更できるはずだ」
                      という仮説を検証するための操作ですので、
                      できるだけ「変化」がわかりやすくなるように
                      定義を変更します。
                      そのために「背景を赤にする」ということにしています。

                      この変更を行って、ブログの表示を確認してみます。

                      「アメブロランキング」の部分が変わりましたね。
                      どうやら仮説は正しかったようです。

                      ただし、「アメブロランキング」以外の、
                      メニューのタイトル部分も変わってしまいました。
                      menu_titleは、
                      サイドメニューにあるタイトル部分のデザインを
                      定義している部分だったようです。

                      menu_titleがサイドメニューのタイトルを定義している部分だ、
                      ということがわかったので、後は自由にデザインします。

                      サイドメニュータイトル用の背景画像を用意し、
                      この部分を変更してみます。

                      h4.menu_title{
                      に、
                      background-image: url(背景画像のURL);
                      background-repeat: no-repeat;
                      を追加します。
                      no-repeatは「背景画像を繰り返さない」という意味です。
                      先に追加した背景色の設定は削除します。
                      CSSまたはHTMLを保存し、表示を確認します。



                      思ったとおりの変化ですね。
                      こうすることによって、自分が変えたい部分の「アタリ」をつけ、
                      変化させることができます。

                      必ずしも「仮説」が正しいとは限りませんので、
                      実際には試行錯誤が必要です。
                      ワシもスイスイとアメブロのデザイン変更を
                      しているわけではなく、
                      試行錯誤を繰り返しながら微調整を繰り返しています。

                      また、どうにもうまくいかないときはデザインを修正したり、
                      諦めたりすることもあります。

                      CSSの指定の仕方の細かい内容については
                      こちらに詳しく掲載されています。
                      もしくはCSSなどでググってみましょう。

                      =======
                      so-netの場合は、サイドメニューのタイトルは
                      sidebar-title
                      で定義されています。
                      so-netの場合には、自分でCSSの定義を追加する必要があります。

                      .sidebar-title{
                      background-image: none;
                      color:#ffffff;
                      background-color:#000000;
                      }
                      という記述を追加して、試してみましょう。

                      << | 2/3PAGES | >>

                      calendar

                      S M T W T F S
                         1234
                      567891011
                      12131415161718
                      19202122232425
                      2627282930  
                      << November 2017 >>

                      selected entries

                      categories

                      archives

                      recent comment

                      recommend

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

                      links

                      profile

                      search this site.

                      others

                      mobile

                      qrcode

                      powered

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