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

Last Updated:2015年04月20日| | 4のコメント

今年の 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. または、次のような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 )

    応答