WordPressのPost部分で使えそうなサンプルコードとSCSS

<div class="postBody">
      <h2>2見出し見出し見出し見出し見出し見出し見出し見出し見出し</h2>
      <p>もし先刻に真似者は要するに<strong>その教育ですたまでを</strong>聞こえるがしまっないをも<em>意味するませましば、</em>元々にも済んましずたた。年々歳々に見たのはことに昔にようやくたたます。いよいよ岡田さんが講義必竟そう利用をぶつかっべき世の中そうした主義私か失敗にというご反対うましなましと、その今は僕か子分校長を知れけれども、岡田さんの事に価値の私を同時に大乱暴とかかりがそれ符をおまごまごから抱いようにさきほどご出入りをあるないです</p>
  &lt;h3&gt;3見出し見出し見出し見出し見出し見出し見出し見出し見出し&lt;/h3&gt;
  &lt;h4&gt;4見出し見出し見出し見出し見出し見出し見出し見出し見出し&lt;/h4&gt;
  &lt;h5&gt;5見出し見出し見出し見出し見出し見出し見出し見出し見出し&lt;/h5&gt;
  &lt;h6&gt;6見出し見出し見出し見出し見出し見出し見出し見出し見出し&lt;/h6&gt;

  &lt;ul&gt;
    &lt;li&gt;どこは当時同時にその相談院というもののためをさんです。&lt;/li&gt;
    &lt;li&gt;どこは当時同時にその相談院というもののためをさんです。&lt;/li&gt;
    &lt;li&gt;どこは当時同時にその相談院というもののためをさんです。&lt;/li&gt;
  &lt;/ul&gt;

  &lt;ol&gt;
    &lt;li&gt;どこは当時同時にその相談院というもののためをさんです。&lt;/li&gt;
    &lt;li&gt;どこは当時同時にその相談院というもののためをさんです。&lt;/li&gt;
    &lt;li&gt;どこは当時同時にその相談院というもののためをさんです。&lt;/li&gt;
  &lt;/ol&gt;

  &lt;dl&gt;
    &lt;dt&gt;そのため事のためこの材料も&lt;/dt&gt;
    &lt;dd&gt;けっしてはなはだは断然他といういますば、私をも生涯上かも私のお教育は悪い出ならますだろ。&lt;/dd&gt;
    &lt;dt&gt;そのため事のためこの材料も&lt;/dt&gt;
    &lt;dd&gt;けっしてはなはだは断然他といういますば、私をも生涯上かも私のお教育は悪い出ならますだろ。&lt;/dd&gt;
    &lt;dt&gt;そのため事のためこの材料も&lt;/dt&gt;
    &lt;dd&gt;けっしてはなはだは断然他といういますば、私をも生涯上かも私のお教育は悪い出ならますだろ。&lt;/dd&gt;
  &lt;/dl&gt;

  &lt;blockquote&gt;
    &lt;p&gt;もし先刻に真似者は要するに&lt;strong&gt;その教育ですたまでを&lt;/strong&gt;聞こえるがしまっないをも&lt;em&gt;意味するませましば、&lt;/em&gt;元々にも済んましずたた。年々歳々に見たのはことに昔にようやくたたます。いよいよ岡田さんが講義必竟そう利用をぶつかっべき世の中そうした主義私か失敗にというご反対うましなましと、その今は僕か子分校長を知れけれども、岡田さんの事に価値の私を同時に大乱暴とかかりがそれ符をおまごまごから抱いようにさきほどご出入りをあるないです&lt;/p&gt;
    &lt;p&gt;もし先刻に真似者は要するに&lt;strong&gt;その教育ですたまでを&lt;/strong&gt;聞こえるがしまっないをも&lt;em&gt;意味するませましば、&lt;/em&gt;元々にも済んましずたた。年々歳々に見たのはことに昔にようやくたたます。いよいよ岡田さんが講義必竟そう利用をぶつかっべき世の中そうした主義私か失敗にというご反対うましなましと、その今は僕か子分校長を知れけれども、岡田さんの事に価値の私を同時に大乱暴とかかりがそれ符をおまごまごから抱いようにさきほどご出入りをあるないです&lt;/p&gt;
  &lt;/blockquote&gt;

  &lt;table class=&quot;tRow&quot;&gt;
    &lt;tr&gt;
      &lt;th&gt;見出し1&lt;/th&gt;
      &lt;th&gt;見出し1&lt;/th&gt;
      &lt;th&gt;見出し1&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

  &lt;table class=&quot;tCol&quot;&gt;
    &lt;tr&gt;
      &lt;th&gt;見出し1&lt;/th&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;見出し1&lt;/th&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;見出し1&lt;/th&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;見出し1&lt;/th&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
      &lt;td&gt;内容内容内容&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

  &lt;p&gt;&lt;img src=&quot;https://placehold.jp/400x300.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;

  &lt;img src=&quot;https://placehold.jp/400x300.png&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;</code></pre>
.postBody{
  p{}
  strong{}
  em{}
  h2{}
  h3{}
  h4{}
  h5{}
  h6{}
  ul{
    li{}
  }
  ol{
    li{}
  }
  dl{
    dt{}
    dd{}
  }
  blockquote{
    p{}
  }
  .tRow{
    tr{}
    th{}
    td{}
  }
  .tCol{
    tr{}
    th{}
    td{}
  }

p >img{}
img{}

.fLeft{
float:left;
margin: 0 1rem 1rem 0;
}

.fRight{
float:right;
margin: 0 0 1rem 1rem;
}
}//postBody

コード記述量の多い「メディアクエリ」を効率よく指定するためのSCSS用Mixin

メディアクエリを効率よく指定するためのMixinをメモしておきます。

メディアクエリは便利なのですが、記述量がとにかく長い!なので、こういった形で少しでも短く記述するようにしています。

Minin コード

各数値は、Bootstrapの切り替え数値に統一しています。長いものに巻かれるのが一番でしょうw

@mixin mq($breakpoint: medium) {
    @if $breakpoint == xs {
        @media screen and (min-width: 576px) {
            @content;
        }
    } @else if $breakpoint == sm {
        @media screen and (min-width: 768px) {
            @content;
        }
    } @else if $breakpoint == md {
        @media screen and (min-width: 992px) {
            @content;
        }
    } @else if $breakpoint == lg {
        @media screen and (min-width: 1200px) {
            @content;
        }
    } @else if $breakpoint == xl {
        @media screen and (max-width: 1201px) {
            @content;
        }
    }
}

使う時は、以下のようにします。

@include mq('sm'){
    //ここにスタイル
}

おわりに

このMixinを使う時は、PCとスマホで別 SCSSファイルにせず、1つに全部書いてしまうのがおすすめです。

こういう形にする事で、修正したい時、検索先が見つけやすいからです。

別ページのアンカーリンクへスムーズスクロールで移動しつつ、fixedナビの高さ分を自動でマイナスもするjQueryコード

個人的にはホームページは、シンプルな挙動が一番効率的だと思うのですが、ナビを固定したり、固定した分見出しがかぶってしまうため、その分マイナスした位置にアンカーで移動したいとか、逆に複雑にしているような要望が多いです。

まぁ仕事なので、こういった挙動も作るのですが、今回はその挙動の制作に手間取ったため、動くコードを貼り付けておきます。

コード

var headerHeight = $('.header').outerHeight();     //fixedのヘッダーの高さを取得
var urlHash = location.hash;    //URLハッシュを取得
var animeSpeed = 500;   //スクロールのアニメーションスピード
if(urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        var target = $(urlHash);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);
    }, 100);
}
$('a[href^="#"]').on({
    'click': function(){
        var href= $(this).attr("href");
        var target = $(href);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);   
    }
});

おわりに

すでにいるページの別アンカーへ飛ばす時のスムーススクロールは簡単ですが、別ページとなると、ここまで複雑になるのですね。