今年の WordPress デフォルトのテーマTwenty Fifteen:サイドバーを右に移動させる

今年の WordPress デフォルトのテーマであるTwenty Fifteenは、ブログに焦点を置いたすっきりとしたデザインが特徴です。 このテーマをインストールすると、Twenty Fourteenテーマのように、サイドバーの左側に位置しています。 そして ルックス>カスタマイズでの色のオプションが追加されており、 デフォルトでは、暗、黄色、ピンク、紫、青 中プリセットカラー(Preset colors)を選択することができているという点が気にね。
Twenty Fifteen Color option WordPress
もちろんCSSを使用して色を変更することが可能ですが、事前に設定された色設定を提供して使いやすさを考慮した点に良いスコアを与えると思います。

前述したようにテーマの特徴の一つは、サイドバーの左側に位置しているという点です。 サイドバーを右に移動するには、次のようなCSSコードをスタイルシート(style.css)に追加します。 (ユーザーCSSコードをスタイルシートに追加する方法は、 ここを参照してください。)

@media screen and (min-width: 955px) {
    .site-content {
        float: left;
        margin-left: 0px;
        width: 70.5882%;
    }   
    .sidebar {
        float: right;
        right:0;
        margin-right: 0px;
        max-width: 413px;
        width: 29.4118%;
    }   
    body:before {
        right: 0;
        left:auto;
    }       
    .site-footer {
        margin: 0 0 0 6.1%;
    }
}
(Reference: http://wordpress.stackexchange.com/)

これにより、次のサンプル画面に示すようにサイドバーが右に移動します。 (一部ではうまく動作しないとも言いますが、私のサイトではうまく動作しますね…)
Move sidebar to the right in WordPress 20 15 theme

以上で簡単なCSSを使用してTwenty Fifteen(2015)のテーマからサイドバーを右に移動する方法を説明しました。

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

4のコメント

    1. こんにちは?

      ブログを訪問していただきありがとうございます。

      Twenty Fifteenテーマは2015年出てきたテーマでこのテーマを触れ本紙長くなって正しい答えを与えることができない点ご了承ください。

      言われた三行のアイコンをHamburger icon呼ばれます。

      https://www.thewordcracker.com/basic/divi-%ED%85%8C%EB%A7%88%EC%9D%98-%EB%A9%94%EA%B0%80-%EB%A9%94%EB%89%B4%EC%97%90-%ED%96%84%EB%B2%84%EA%B1%B0-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0/ 文を見ればDiviというテーマでハンバーガーのアイコンを使用する方法が記載されています。 ハンバーガーのアイコンは、特定のフォントで提供されます。

      Twenty Fifteenはしばらく見てみると、次のCSSがメニューアイコンと関連がありますね。

      .secondary-toggle:before {
      color: #333;
      content: "f419";
      line-height: 40px;
      width: 40px;
      }

      上記の「f419」部分はハンバーガーのアイコンに関連しています。

  1. または、次のようなCSSコードを使用して WordPress Twenty Fifteenテーマでサイドバーを右に移動させることができます。

    body:before {
    右:0;
    left:auto;
    direction:ltr;
    }
    .sidebar {
    フロート:右;
    margin-right:auto;
    margin-left:-100%;
    direction:ltr;
    }
    .site-content {
    フロート:右;
    margin-right:29.4118%;
    余白左:自動;
    direction:ltr;
    }
    .site-footer {
    フロート:右;
    margin:0 35.2941%0 0;
    direction:ltr;
    }
    // Source: http://wpguru.co.uk/2015/10/how-to-move-the-sidebar-to-the-right-in-twentyfifteen/

    別の方法として、サイドバーを右に移動させたチャイルドテーマを利用することができます(https://www.tipsandtricks-hq.com/wordpress-twenty-fifteen-2015-child-theme-with-right-sidebar-7732 )

コメントを残す

*電子メール情報は公開されません。