アメブロカスタマイズ講座(予備講座: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;
    }
    という記述を追加して、試してみましょう。

    コメント
    なんとかできましたー
    ご指導ありがとうございます。

    質問です 
    画像をリピートしないというコマンドですが(background-repeat: no-repeat;)
    これがないとどうなるんだろうと思いやってみたのですが、プレビュー画面では変化がありませんでした。
    通常はこのコマンドがないとリピートしてしまうものなんでしょうか?
    よろしくお願いいたします。
    >掛軸さん
    おおっ!さっそくやってくださいましたね!
    ありがとうございます。
    リピートの件ですが、
    画像よりも領域が大きい場合、繰り返しが
    見えてしまいますが、
    今回のような画像と領域が同じ、または
    領域のほうが小さい場合、
    繰り返しが行われても見えません。
    ためしに、menu_titleのheightなどを
    大きめに設定して、リピートさせてみてください。
    画像が繰り返されているのがお分かりいただけると思います。
    • コージ
    • 2008/12/10 8:11 AM
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << September 2017 >>

    selected entries

    categories

    archives

    recent comment

    recommend

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

    links

    profile

    search this site.

    others

    mobile

    qrcode

    powered

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