本文でのショートコードは以下になります
[catlist id=1 thumbnail=yes thumbnail_class=lcp_thumbnail]
そしてスタイルシートには以下のように記述します。
1 2 3 4 5 6 7 |
.lcp_thumbnail{ float: left; } .lcp_catlist li{ clear: both; } |
右に表示したければrightとすればok
本文でのショートコードは以下になります
[catlist id=1 thumbnail=yes thumbnail_class=lcp_thumbnail]
そしてスタイルシートには以下のように記述します。
1 2 3 4 5 6 7 |
.lcp_thumbnail{ float: left; } .lcp_catlist li{ clear: both; } |
右に表示したければrightとすればok
1 2 3 4 5 6 7 8 9 |
// sample-categoryというカテゴリスラッグを持つページにBody Classを追加 add_filter( 'body_class', 'sp_body_class' ); function sp_body_class( $classes ) { if ( is_category( 'sample-category' ) ) $classes[] = 'custom-class'; return $classes; } |
Wordpressのダッシュボードの外観→カスタマイズ→追加css
で以下のコードを追記する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@media only screen and (min-width: 960px){ .full-width-content.full-containar .content{ width:100%; } .full-width-content.full-containar .site-inner{ max-width:100%; } .full-width-content.full-containar .breadcrumb, .full-width-content.full-containar .entry-header, .full-width-content.full-containar .center-block, .full-width-content.full-containar .yarpp-related, .full-width-content.full-containar .entry-footer, .full-width-content.full-containar .comment-respond, .full-width-content.full-containar .after-entry{ max-width:700px; margin-left:auto; margin-right:auto; } } |
このCSSを投稿画面で全幅レイアウトを選び、
「Custom Body Class」に「full-containar」と入力
投稿画面のhtmlは下記のように入力
1 2 3 4 5 6 |
<div class="center-block"> 中央に寄せたい本文をここに入力 100%のグラフはこのブロックの外側に入力 </div> |
Wordpressの記事ページの横幅を全開に広げる
1 2 3 4 5 6 7 8 9 10 |
<div class="siteorigin-panels-stretch panel-row-style panel-row-style-for-4204-1" style="margin-left: -30px; margin-right: -30px; padding-left: 0px; padding-right: 0px; border-left: 0px; border-right: 0px;" data-stretch-type="full-stretched"> 記事 </div> |
CSSのコピペだけでおしゃれな見出しができた備忘録
Wordpressでh1タグを個別に装飾の対象にする為に
①外観⇒テーマの編集⇒style.cssに”h1#hogehoge {}”と記述
②{}内にサルワカ様のページのコードをコピペ
③本文内で<h1 id=”hogehoge”>を書けばOK