CSS カスタマイズ

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

    悩みに悩んだのですが、どうしてもブログをシンプルにカスタマイズしたくて思いきってｃｓｓアップグレードを購入しました！

    ですが、何度やっても反映されないし組み合わせ方がまったくわかりません”
    すべてのカスタマイズ方法をきくのもどうかとおもいましたが、自分ではもうどうにもできないのでわらにもすがるおもいで
    どうか助けていただきたく投稿させていただきました

    ■ブログ名のフォントサイズをもう一回り大きく　書体の変更
    ■投稿ページのタイトル書体をゴシックに変更　サイズを120％くらいに変更
    ■投稿ページの本文の書体をゴシックに変更　サイズを85％くらいに変更　もう少し太めのゴシック
    ■リンクの色を水色から黒に変更とサイズ変更
    ■カレンダーの上下のグレーの枠を白に変更

    本当にすべてなのですが以上のカスタマイズを教えていただけましたらよろしくお願い致します

    コード？の組み合わせを詳しく教えていただけましたら今後はそれを参考に自分でやってみたいと思います

    ｃｓｓカスタマイズにお詳しい方どうか助けていただけましたら幸いです！！！　

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

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

    追記です　使用テーマはDuster by Automatticを使用しています

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

    追記２：

    質問を投下した後、スタイルシートリファレンスを参考に自分でやってみたらなんとか本文のサイズとフォントカスタマイズができました！
    ですが、サイト名のフォントとサイズ変更、本文の件名？のサイズ変更、リンクの色、サイズ変更、カレンダーの枠消去が、詳しく記載されていなくてできませんでした、どのようにくみこまばいいか詳しく教えてください、よろしくお願いいたします

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

    追記3：

    たびたびすみません””
    リンクの色とフォントサイズも解決したのですが、各ページの件名（タイトル）もリンクしているためかサイドバーのリンクとフォントの大きさが一緒になって小さくなってしまいました。
    件名のフォントの大きさのみちょっと大きくするにはどうすればいいですか？

    これ以上はお手上げでしたのでご教示よろしくお願い致します
    最終的にまとめますと質問をまとめますと

    ■各ページのタイトル文字リンクのフォントの大きさの変更
    ■リンクにマウスカーソルを合わせると色が変更するのではなく黒のままで
    文字の下にアンダーラインで表示する
    ■ブログタイトルのフォントと文字サイズの変更
    ■「昔の投稿」のリンクの色を黒に変更

    よろしくお願いいたします！！

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

    追記３までの内容を反映させたCSSを作ってみました。 

    body,input,textarea,.wp-caption .wp-caption-text {
font-family:Meiryo,'Trebuchet MS',Verdana,sans-serif;
font-weight:500;
}

.entry-content,.entry-summary {
font-size:85%;
}

#site-title a {
font-size:36px;
}

.entry-title {
font-size:120%;
}

.singular .entry-title {
font-size:150%;
}

.widget a,#content nav a,.entry-content a,section.ephemera .entry-title a,.widget_duster_ephemera .entry-title a,.comment-meta a,#respond .logged-in-as a,.singular .entry-header a,section.feature-image.large:hover .entry-title a,section.feature-image.large .entry-title:hover a {
color:#222;
}

.widget a:hover,#content nav a:hover,section.ephemera .entry-title a:hover,.widget_duster_ephemera .entry-title a:hover,.comment-meta a:hover,#respond .logged-in-as a:hover,.singular .entry-header a:hover,section.feature-image.large:hover .entry-title a:hover,section.feature-image.large .entry-title:hover a:hover,.entry-title a:hover,.entry-meta a:focus,.entry-meta a:active,.entry-meta a:hover {
color:#222;
text-decoration:underline;
}

.entry-content a:hover {
color:#777;
}

section.ephemera .entry-title a span,.comment-reply-link {
color:#222;
}

.commentlist > li.bypostauthor .comment-content a,.commentlist .children > li.bypostauthor > article .comment-content a {
color:#cacaca;
}

.commentlist > li.bypostauthor .comment-content a:hover,.commentlist .children > li.bypostauthor > a:hoverrticle .comment-content a:hover,.commentlist > li.bypostauthor .comment-content a:focus,.commentlist > li.bypostauthor .comment-content a:active,.commentlist > li.bypostauthor .comment-content a:hover {
color:#cacaca;
text-decoration:underline;
}

.commentlist > li.bypostauthor .comment-meta a:focus,.commentlist > li.bypostauthor .comment-meta a:active,.commentlist > li.bypostauthor .comment-meta a:hover {
color:#cacaca;
text-decoration:underline;
}

.commentlist > li.bypostauthor .comment-reply-link:focus,.commentlist > li.bypostauthor .comment-reply-link:active,.commentlist > li.bypostauthor .comment-reply-link:hover {
color:#cacaca;
text-decoration:underline;
}

.commentlist > li.bypostauthor .comment-content a:focus,.commentlist > li.bypostauthor .comment-content a:active,.commentlist > li.bypostauthor .comment-content a:hover {
color:#eee;
text-decoration:underline;
}

.widget_calendar #wp-calendar tfoot td {
background-color:#FFFFFF;
}

.widget_calendar #wp-calendar th {
background-color:#FFFFFF;
}

    なお、CSSカスタマイズの方法についてですが、Firefoxの「Firebug」を使って、あらかじめ、Web上でCSSを修正しながら、その修正内容をテキストエディタなどに貼っていき、最後にまとめてWordPress.comのCSSスタイルシートエディタに貼りつければOKです。重複している部分は自動的に削除・統合されますので、なりゆきで作業していっても問題ないと思います。

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

    asazuki508様ありがとうございました！！！

    すごいです　私がしようとしていたカスタマイズはこんなにも長いコード？ソース？を組み合わせないといけなかったんですね、、、英数字に弱い私にはやはり難しそうです…！
    大変助かりました！
    これを参考にフォントサイズなどを調整していけばいいのですね！
    教えて頂いたカスタマイズ方法もやってみたいと思います！

    本当にありがとうございましたー！！

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

    直接、CSSスタイルシートエディタを編集して作るのは私にはとても難しいです。ですので、Firebugというアドオンを使っています。

    なお、上記のCSSを参考にしたり、編集したりしていくよりも、とりあえずCSSスタイルシートエディタに貼って、テーマに反映させておいて、Firebugを使って、部分的に付け足していく方法をおすすめします。

    もしくは、現在、traumaniaさんが作ったものから出発して、Firebugを使って、部分的に付け足していく方法をおすすめします。

    とにかく、一度、Firebugを使ってみてください。後悔はしないと思いますよ。

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

    Firebugの何たるかについて解説してある記事を見つけました。
    意外と知られていない機能が多い！？Firebugの使い方 | THE HAM MEDIA BLOG
    ご参考まで。

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

    ご丁寧に細かく教えて頂き本当にありがとうございます！！
    とにかくやってみることが大事ですよね＾＾

    ｆｉｒｅｆｏｘはインスト済みなのでFirebug使ってみたいと思います！
    ありがとうございましたー

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

    Firebugのサイトにいってきたんですが、英語表記なのでわかりません…；；日本語版か他の簡単にコードをカスタマイズできる便利なサイトはないでしょうか？

    どれをインストールすればいいかわからなくて…

    無知でお恥ずかしいですがご教授よろしくお願い致します

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

    以下の場所からインストールできます。
    Firebug :: Add-ons for Firefox
    緑色の「Add to FIrefox」ボタンをクリックすると何かウィンドウが開くので、そこで「許可」をクリックしてください。そうすると自動的にインストールされます。FIrefoxを再起動すると、画面の下か上に蛍のマークが表示されるので、そこをクリックするとFirebugが起動します。
    なお、インストールしたものは日本語になっておりますのでご安心下さい。

  • トピック「CSS カスタマイズ」には新しい返信をつけることはできません。