WordPressカスタマイズまとめ

WordPressブログ

WordPressのカスタマイズのまとめ記事。WordPressにはたくさんのテーマ(テンプレート)がありますが、テーマの選び方からカスタマイズまでの紹介をしていきます。公式のテーマTwenty Twelveをサンプルとしてカスタマイズしていきます。

また、WordPressの始め方や設定など(カスタマイズ以外)は別記事でまとめてます。

初心者でも迷わないWordPressの始め方や使い方まとめ!

WordPressのカスタマイズの前にやっておく事

TwentyTwelveカスタマイズ

以上WordPressのカスタマイズまとめでした。

コメント

  1. Okingatarashi より:

    しげぞう様

    天才っ!すごーーーーい
    (max-width: 599px) {
    の { を消したのに戻ら無くて泣きの2通目コメントを送りましたが
    今、見直したら { 消されて無くて。。。

    今、直して保存したら…

    戻ったぁ~~~!!!??
    スゴイ!ポンコツで…ごめんなさい。
    本当にありがとうございました。

  2. しげぞう より:

    Okingatarashi様

    返信ありがとうございます。えっと、スタイルシートの中で指摘されていた部分なんですが、@media screen and (max-width: 599px)という部分が599px以下のブラウザサイズの場合という条件分岐なんです。一般的な7インチタブレットのサイズが600pxなので、それ以下つまりスマホの場合という条件分岐になります。

    それでですね、そのスタイルシートに追加されている条件分岐の部分をちょっとピックアップしてみます。

    /*ナビメニュー分岐*/
    @media screen and (max-width: 599px) {
    
    #site-navigation {
        display: none;
    }
    
    /*ブログの説明*/ 
    .site-description {
       background: #fff !important;
       display: none; !important;
    }
    }

    この最後に2つ「 } 」がありますよね、これがOkingatarashi様のサイトの場合は1つしかありません。つまり、条件分岐が閉じられていないため、コレ以降に書いたコードが全てスマホ用のスタイルという事になってしまってます。なので、条件分岐を終わらす「 } 」を上記のように1つ追加して条件分岐と閉じてみてもらえないでしょうか。

  3. Okingatarashi より:

    しげぞう様

    返信をありがとうございます。

     
    です。まず、スタイルシート見直します。
    SSLの記事で、.h 何とか見たいなファイル触って、再度直した事がいけないのかな?
    リダイレクトループ?とか言うのにひっかかるのか、スマホや見るデバイスで見える状況が違ったりしてるのですが、変更をプレビューで見るとスタイル反映してないんですよね…
    本当に、ごめんなさい。ご迷惑様です…

  4. しげぞう より:

    Okingatarashi様

    返信遅くなってすみません!多分原因はスタイルシートの途中に記述ミスがある事だと思われます。例えば途中で「 } 」が1つ抜けていたり、多かったりしただけでもそれ以降のスタイルが反映されない場合があります。なので、本当は1つ1つ反映されるか確かめながら記述をしていくと良いのですが。。

    一度ブログを見てみようと思ってアクセスするのですが何故か今表示されませんので、お手数ですが再度URLを教えて頂けると助かります。どうぞよろしくお願い致します。

  5. Okingatarashi より:

    しげぞう様

    こんばんは!パニックHELP!です。
    今夜9時前にOPENしました。ありがとうございました。
    ここまではいいのですが、なぜ?どうして?
    今まで必死に書いたスタイルが半分くらい…無効みたい…有効な部分も残っているのですが。
    この間の品番とかの部分…勿論子テーマに書き続けてきました。
    トップに行くボタンも元の色に戻ってしまいました…
    何が考えられますか?
    ぐずぐず言わずにやり直しかしら…入れ直したけど、ダメだった…ポンコツが焦ってるからどこかがおかしいだけでしょうか。
    思いつくことがあったら教えて下さい。宜しくお願いします。
    早々のご迷惑HELP!でごめんなさい。

  6. しげぞう より:

    Okingatarashi様

    返信ありがとうございます。それとサイトのオープンおめでとうございます!!サイトのURLや名前の表記も好きなように使ってやって下さい。全く問題ないですし私も非常にありがたいです。ここまで結構長かったですがOkingatarashi様の諦めない精神は凄いです(笑)

    今後も継続しながらまた何かあればいつでもコメント下さい。私もOkingatarashi様のようなサイトはあまり経験がないのでヘルプになるかは分かりませんが、できるだけ応援したいと思っていますので今後ともどうぞよろしくお願い致します。

  7. Okingatarashi より:

    しげぞう様
    おはようございます。HELP!の私です。
    ちょっと伺いたいのですが、6月25日の夜、オープンのあいさつ?ブログをアップしますが
    このサイトのURLを付けてしげぞうさんの名前書いても(しげぞうさんって、表記)いいですか?
    英語版と日本語版が、あるのですが、ご迷惑になると困るので確認してからと思います。Facebookページのアップもするから、英語版も書いちゃう感じになります。ご迷惑なら断られても気にしませんので気兼ねなく断って下さい。
    もし、構わない様でしたら、URLはカスタマイズがいいのか「アフィリエイトで稼ぐ」の方がいいのか教えて下さい。
    ご一考願えますと助かります。宜しくお願いします。

  8. シン より:

    しげぞうさん。

    教えてもらったcssを元に試したらなんとか行けました!

    ありがとうございました。^ ^

  9. しげぞう より:

    シン様

    コメントありがとうございます。リンクの幅というのはおそらく高さかな?と思います。違ったらすみません。

    一応私の場合は目次リンクの行間というか高さをスタイルシートで以下のようにしてます。Twenty Twelveの場合ですが。

    .entry-content li {
        line-height: 1.75;
    }

    この1.75の部分の数値を大きくするとさらに行間は開きますので、一度これで調整してみて、イメージと違うという場合には再度コメント頂けると助かります。どうぞよろしくお願い致します。

  10. シン より:

    しげぞうさん。今、wordpressの固定ページで目次ページを作ったのですが、各記事リンクの幅が狭くてちょっと見にくいです。

    僕の理想としては各記事リンクの幅を
    https://affiliate150.com/wordpress-customize

    のようにしたいのですがどうしたら良いのでしょうか?

    よろしくお願いします。

  11. たこやき より:

    しげぞう様

    ばっちり線が入りました!いつもありがとうございます!

  12. しげぞう より:

    たこやき様

    コメントありがとうございます。記事タイトルの下の線ですが、これは使っているテーマによって違ってくる部分があるかと思います。一応私の場合(Twenty Twelve)の場合ですが、スタイルシートに以下のコードを追加してます。

    #content .entry-title {
        border-bottom: 1px dotted #CCC;
    }

    上記の記述では「border-bottom」が下線の部分で、1pxの点線(dotted)で色を(#CCC)という風に指定できます。点線は「dotted」ですが、「solid」に書き換えると実線になります。

  13. たこやき より:

    しげぞう様

    いつもありがとうございます。またまたひとつ質問です。
    記事タイトルの下に線がありますが、それはどのようにすれば線が入るのでしょうか。

    またお手すきの際にでもよろしくお願い致します。

  14. okinagatarashi より:

    しげぞう様
    こんにちは。お世話になります。
    遅くなってなど!とんでもないです!!何をおっしゃるやら!見てくれただけで感謝しまッス!!
    予定が変わって今日もWardpressと戦っています。

    いけました!!すごい!!
    出来たよ!!出来た!!前よりいい!!ブログ用もこれに変えます!
    本当にありがとうございました!

  15. しげぞう より:

    okinagatarashi様

    返信おそくなってすみません。とりあえずナビの色なんですが、下記2つの記述を追加してカラーを変更するとナビの色を変更できると思います。スタイルシートに追加です。

    /* ナビ背景色 */
    #site-navigation li a {
        background-color: #000;
    }
    
    #site-navigation li.current_page_item a, #site-navigation li.current-menu-parent a {
        background-color: #000;
    }

    それとカーソルが乗った時の色は下記を追加してカラーを変更してみて下さい。

    /* ナビカーソルが乗った時の色 */
    #site-navigation li a:hover {
        background-color: #000;
    }

    上記でカラーの変更ができない場合はお手数ですが再度コメント頂けると助かります。どうぞよろしくお願い致します。

  16. okinagatarashi より:

    しげぞう様
    お世話になります。ご返信をありがとうございました。
    お忙しい中ありがとうございます。

    月曜中、火曜の午後と別の要件で私も手一杯です。
    ご迷惑が一杯なのでちらっとでも見て貰えるだけで有り難いです。
    宜しくお願いします。

    本当に本当にありがとうございます。

  17. しげぞう より:

    okinagatarashi様

    コメントありがとうございます。別テーマですね!ちょっと見てみます。今からちょっと用事なので、返信は週明けになると思いますので、ちょっと待ってもらってもいいですか?すみません。またコメントへの返信しますね。

  18. okinagatarashi より:

    しげぞう様
    ごめんなさい。こんにちは。
    聞いたらいけない事を聞きます。
    テーマをwelcartに変更したのですが、
    ファイル類が複雑でお手上げです。
    フォーラムはワードプレスのフォーラムよろしく何がなんだか全く・・・

    テーマがwelcartですがHELP!お願い出来たりしますか?

    ナビメニューとか、今まで教わったマシーン語は使えてますが
    マウスが来ると白い文字が鯉グレーに変えてたけど同じコードで背景がグレーになっちゃったりです。
    ここは、Twenty Twelveでの事だから図々しいのは重々承知なので
    気兼ねなく。断って下さい。

    welcartって、このサイトみたいに、私みたいな初心者助けてくれるサイト見つからないです。
    もし、どこかご存知だったら教えて下さい。
    ご迷惑お掛けします。ごめんなさい。

  19. しげぞう より:

    たこやき様

    わざわざありがとうございます。数ヶ月前にこのブログだけアドセンスの配信停止されて、しばらく復旧させずにアドセンス以外の広告に変更しておりましたが、ドキドメのサイトを統合した関係でドキドメ関連の記事だけアドセンスを復活させようかと思っています。そのため、配信停止のままの広告を設置して審査待ちをしている状況です。

    アドセンスは復活してもしなくても個人的には特に影響はないのですが、実験も兼ねて審査をしている所です。上手くいけばWordPress関連記事だけはアドセンスが表示されるようになると思います。

  20. たこやき より:

    いつも本当にお世話になっております。
    ドキドメのアドセンスが表示されていないようなのですが…私の勘違いでしたらすみません。

タイトルとURLをコピーしました