WordPressで記事ごとに個別のCSSを設定して1カラムにする方法【サイドバーを消す】
By writer | 2015/04/21
今回は、ワードプレスで記事ごとに1カラムにする方法をご紹介します。普段2カラムのテーマを利用している方を対象にした内容です。
この記事を見てる方は右側にサイドバーがあると思いますが、このサイドバーを消して、メインコンテンツ（記事エリア）を広げるといった感じです。
こちらが1カラムにしたサンプルページ。
多分スマホで見てる方は違いを一切感じることができないと思いますが…。こんな感じで記事によって見せ方を変えるという参考に見てください。
記事ごとに個別のCSSを設定して1カラムにする方法
今回紹介するやり方は、記事ごとに個別のCSSを設定して1カラムにするといった内容です。そのため、まずは記事投稿画面にcssを追加できるようにします。
やり方は kachibito.net さんの「WordPressプラグインを使わずに記事ごとにcssを加えられるようにするカスタマイズ」を参考にします。
以下のコードをテーマファイルのfunctions.phpに追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
add_action('admin_menu', 'custom_css_hooks'); add_action('save_post', 'save_custom_css'); add_action('wp_head','insert_custom_css'); function custom_css_hooks() { add_meta_box('custom_css', '追加するCSS', 'custom_css_input', 'post', 'normal', 'high'); add_meta_box('custom_css', '追加するCSS', 'custom_css_input', 'page', 'normal', 'high'); } function custom_css_input() { global $post; echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />'; echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>'; } function save_custom_css($post_id) { if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; $custom_css = $_POST['custom_css']; update_post_meta($post_id, '_custom_css', $custom_css); } function insert_custom_css() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>'; endwhile; endif; rewind_posts(); } } |
また、 kachibito.net さんではプラグイン化もしてくれているので、「add-css-to-post.zip」をダウンロードしてファイルを解凍し、管理画面の「プラグイン」ページ→「新規追加」でアップロードしても使用できます。
有効化すると記事投稿画面に「add CSS」というのが追加されます。
今度は、導入した「add CSS」にサイドバーを消すコードと記事エリア、画像を広げるコードを書き込みます。
Stinger5のテーマを使ってる方は以下のコードをコピペで使用できます。それ以外のテーマの方は、サイドバー全体、記事エリア全体を囲っているタグをそれぞれ記入してください。また、PCのみに対応させるため Media Queries でCSSを切り替えて表示します。
|
1 2 3 4 5 6 7 8 9 10 11 |
@media only screen and (min-width:780px){ aside{ display:none; } main{ width:920px; } img{ width:100%; } } |
当サイトはstinger5を使用しているため、サイドバー全体を囲っている「aside」を display:none にします。
次に、記事全体を囲っている部分、Stinger5ではmainに width で大きさを指定。最後に画像の大きさを img で指定します。
これで記事ごとに1カラムに変えることができます。
おわりに
僕の場合、ハフィントンポストっぽくしたかったので今回このカスタマイズを導入しました。画像だけがメインになる場合、SEO面が不安になるのでグーグルボットを No Index にすることをオススメします。
kachibito.net さんの「add-css-to-post」を使えば他にもいろいろと応用ができそうなので、ぜひこの機会に導入をオススメします！
Share A COMMENT
コメントをシェアしよう