(sccカスタマイズ）ヘッダー画像の大きさの変更とTopページの設置

  • 不明 のアバター
    kudaninfo · メンバー ·

    いつも大変お世話になっております

    SCCカスタマイズがどうしても上手くいかないので編集タグを教えていただければ幸いです
    ■ヘッダー画像の大きさを上下にもう少し大きくしたいということと
    ■固定ページ部分が今黒い帯に白字なのを白帯に黒字に変えたいです

    ブログに入る前に入口（Topページ？ｈｔｍｌというやつでしょうか？）をつくりたいのですが
    そういったことはこちらでもできるのでしょうか？
    できるのであれば作りたいのでご教授どうぞよろしくお願い致します

    ヘルプが必要なブログは (ログイン中のユーザーにのみ表示) です。

  • 不明 のアバター
    asazuki508 · メンバー ·

    ヘッダー画像の大きさを上下にもう少し大きくしたい

    #branding img {
    height: 500px;}

    を追加すればOKです（「500px」は任意）。画像は事前に縦方向に300/500（500は任意）の割合で圧縮しておくと縦方向に歪まなくていいと思います。

    固定ページ部分が今黒い帯に白字なのを白帯に黒字に変えたいです

    #access a {
color:#555555;
}

#access {
background-image:url('http://comguideja.files.wordpress.com/2011/09/bg-gra-gray04.png');
background-repeat:repeat-x;
background-position:0 1%;
}

#access li:hover > a {
background-image:url('http://comguideja.files.wordpress.com/2011/09/bg-gra-gray04.png');
background-repeat:repeat-x;
background-position:0 40%;
color:#FFFFFF;
}

    を追加すればOKです。お好みで%の数値をいじって、色を調整して下さい。

    ブログに入る前に入口（Topページ？ｈｔｍｌというやつでしょうか？）をつくりたいのですがそういったことはこちらでもできるのでしょうか？

    できます。
    「設定」→「表示」→「フロントページの表示」のところで、「固定ページ (以下を選択)」を選択し、「フロントページ」、「投稿ページ」のところで固定ページをそれぞれ選定すればOKです。「フロントページ」が「ブログに入る前の入口（Topページ？ｈｔｍｌというやつ）」にあたるものです。一方、「投稿ページ」の方は、iifworksさんの現在のブログの表示の状態へ移行するための空ページで、たとえば、ヘッダー画像の下にあるメニューにその固定ページを追加しておくといいと思います。

  • 不明 のアバター
    kudaninfo · メンバー ·

    asazuki508様いつもお世話になっております

    教えていただいたSCCを編集するツールも無事に日本語表記で
    インストールできたのですが
    いざやってみるとまだまだ私には難しかったので今回もタグ編集教えていただき
    とても助かりました！
    ですが、画像下の固定ページの黒帯は％を変更しても黒のままで変化ありませんでした”
    リンク（文字）の色変更はできたのですが黒帯の変更がsccのどこをいじっても変化しないのですが何が原因でしょうか…？””
    （カーソルをリンクにもっていくと黒帯の部分が白くなるのではなく黒帯全体を白にして
    文字だけにしたいと思っています）

    頼り切ってしまって申し訳ないのですがわかる範囲で結構ですので教えていただけましたら幸いです＞＜”

    Topの設置もなんとなくわかりましたのでやってみたいと思います！！
    ありがとうございました！

  • 不明 のアバター
    asazuki508 · メンバー ·

    お手数をおかけしますが、以下のCSSと差し替えてみてください。

    #access a {
color:#555555;
}

#access {
background:none;
background-image:url('http://comguideja.files.wordpress.com/2011/09/bg-gra-gray04.png');
background-repeat:repeat-x;
background-position:0 1%;
}

#access li:hover > a {
background-image:url('http://comguideja.files.wordpress.com/2011/09/bg-gra-gray04.png');
background-repeat:repeat-x;
background-position:0 40%;
color:#FFFFFF;
}

    ie（インターネットエクスプローラ）での表示チェックを忘れていました。失礼しました。

  • 不明 のアバター
    kudaninfo · メンバー ·

    迅速な対応ありがとうございました！！

    希望通りのカスタマイズができました
    先程のレスに書き忘れましたがヘッダーの変更も確認できましたので
    お礼申し上げます！！<(_ _)>”

  • 不明 のアバター
    asazuki508 · メンバー ·

    うまくいかれたようでよかったです！！

    今後はチェック漏れがないように気をつけたいと思いますm(__)m

  • 不明 のアバター
    kudaninfo · メンバー ·

    度々失礼致します(′Д`；)
    ヘッダー画像の件なのですが、画像の方を300/500に合わせても
    公式設定されている1000／300で「切り取って使う」になってしまって
    どうしても画像がゆがんでしまいます
    トリミングも縦にも調整できるかとおもったら1000/300の横長での調整しかできなくて…

    切り取らず縦長にカスタムした画像はどうしたら設置できるでしょうか？

    SCCの方で直接ヘッダータグを画像ファイルのURLを入れることで設置することはできないでしょうか？

    よろしくお願い致します～””

  • 不明 のアバター
    asazuki508 · メンバー ·

    切り取らず縦長にカスタムした画像はどうしたら設置できるでしょうか？

    以下のステップを踏めば、縦方向に圧縮した画像を作成可能です。
    ステップ１：縦横の比が変わらないようにして、横幅を1000pxに変更する。
    ステップ２：縦方向が500pxになるように切り取る（トリミングする）（「500px」は任意）。
    ステップ３：縦横の比の固定を解除して、縦方向を288pxに圧縮する。

    ちなみに私はこの作業をPhotoscapeで行っています。

    以上の画像処理をした画像をアップロードすればうまくいくと思います。

    SCCの方で直接ヘッダータグを画像ファイルのURLを入れることで設置することはできないでしょうか？

    少なくとも私にはやり方がわかりません。レンタルサーバにインストールして使うWordPress

  • 不明 のアバター
    asazuki508 · メンバー ·

    （誤って投稿されてしまいました…。つづきを書きます。）であれば可能です。

    ご参考：デモ（しばらくするとテーマ等が変更されます。）

  • 不明 のアバター
    asazuki508 · メンバー ·

    お詫び：「画像は事前に縦方向に300/500（500は任意）の割合で圧縮しておくと」と説明してしまいましたが正確には「画像は事前に縦方向に288/500（500は任意）の割合で圧縮しておくと」の間違いでした。

  • 不明 のアバター
    kudaninfo · メンバー ·

    早々のご返信ありがとうございました！

    デモ拝見致しました
    やっぱり画像をつくる段階で調整するんですよね
    やってみます！

    Topも置くことができました
    いつもご丁寧にご指導ありがとうございます

  • 不明 のアバター
    asazuki508 · メンバー ·

    うまくいったようでよかったです！

    画像の縦方向の縮小をするときにPhotoScapeを使用する場合は、
    ステップ１，３は、「ホーム」→「リサイズ」
    ステップ２は、「トリミング」→「比率/サイズの割り当て」
    のところで作業ができます。やってみてください。

    Topを置くだけでかなりイメージがかわるものなのですね。勉強になりました。

  • トピック「(sccカスタマイズ）ヘッダー画像の大きさの変更とTopページの設置」には新しい返信をつけることはできません。