Qiita風のページを作ってみた

/***** 変数定義*******************************************/
:root { --out-width: 95%; /*メインの幅*/ --side-menu-top: 201px; /*サイドメニューのTopの位置*/ --main-padding: 30px; /*メイン記事の内側の空白の幅*/
}
@media screen and (min-width:960px) { /*　画面サイズが960pxからはここを読み込む　*/ :root { --out-width: 50%; /*メインの幅*/ --side-menu-top: 201px; /*サイドメニューのTopの位置*/ --main-padding: 30px; /*メイン記事の内側の空白の幅*/ }
}

#side-menu { text-align: left; position: fixed; top: var(--side-menu-top); /*縦位置の指定、高さを調整できるように変数で指定している。*/ left: calc(100vw / 2 + var(--out-width) / 2 + 20px); /*横位置の指定、メイン記事の幅の変更に追従。*/
}

<div id="main" class="entry-content">

<div id="side-menu"> <div id="sticky-navigator"></div>
</div>

$("#sticky-navigator").stickyNavigator({ wrapselector: ".entry-content" });

(e.fn.stickyNavigator.defaults = { wrapselector: document, targetselector: "h3,h4,h5" });

if (e(t).scrollTop() > 0) {

figure.fig { counter-increment: fig-no; width: auto; text-align: center;
}
figcaption.fig-cap::before { content: "fig." counter(fig-no) " ";
}

<figure class="fig"> <a href="#.png"><img src="#.png"></a> <figcaption class="fig-cap">キャプチャ タイトル</figcaption>
</figure>

 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"> </script>

pre { width: 100%; margin: 1em -3em; padding: 0 3em; position: relative; font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
code { font-size: 14px; line-height: 1.4; width: 100%;
}