20.個別記事にサイドバーを設置する

LINEで送る
Pocket

今私が使っているtwenty elevenですが、

実は投稿記事にサイドバーはなかったんです。

でも、せっかくなので

投稿記事にもサイドバー設置して

有効に使いたいじゃないですか。

てことでやってみました。

 

基本的に投稿記事は1段落構造になっています。

固定記事は2段落構造で、

twenty elevenは1段落目に本文、

2段落目にサイドバーがきています。

個別記事(投稿記事)そうしていきます。

 

管理画面内の外観→テーマ編集をクリックします。

サイドバー作成 (3)

画面右横、下の方のスタイルシート(style.css)をクリック。

サイドバー作成 (4)

左側の大枠にあるHTML用語がズラーっと並ぶ

一番下に以下の文字をそのままコピー&ペーストして下さい。

 /* — make 2 culum ————————————————-*/
/* Singular */
.singular #primary {
margin: 0 -26.4% 0 0;
}
#nav-single {
display: none;
}
.singular .entry-header .entry-meta {
position: relative;
}
.singular .hentry {
padding: 0;
}
.singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
width: 100%;
}
.singular #content, .left-sidebar.singular #content {
margin: 0 34% 0 7.6%;
}
.singular article .entry-title {
padding-top: 0;
}
.singular .entry-meta .edit-link a {
right: 0;
top: 0;
left: auto;
}
/* –End make 2 culum ————————————————-*/

これで2段落構成になりました。

これをしておかないとサイドバーが

本文の1番下にきてしまいます。

私はやらかしました。

 

次はサイドバー自体を表示させます。

先ほどクリックした右側のスタイルシートの少し上に

単一記事の投稿(single.php)

があるのでクリックします。

 

左側の大枠にあるHTML用語がズラーっと並ぶ一番下に

<?php get_sidebar(); ?>

があるので、その直前に

<?php get_footer(); ?>

をそのままコピー&ペーストして下さい。

これで2段落構成&右側サイドバーのできあがりです。

*今回はThems!-WordPress-というサイト様を参考にさせていただきました。

 

2015年4月改訂しました。

よければポチっとお願いします。

にほんブログ村 小遣いブログへ
にほんブログ村


お小遣い稼ぎ ブログランキングへ

LINEで送る
Pocket