20160303

(この記事は過去にMovableTypeでブログを運営していた時の記事です。)

Movable Typeで運営している当ブログ、ほとんどスタイルについては放置していたのですが、幾つか気入らない点が出てきたのでまとめて修正しました。

Bootstrapを利用し幾つかのプラグインも組み込んだレスポンシブなスタイルをせっかく導入したのに、それらがうまく働かない要因がいつかありましたので対応してみました。

Youtubeの貼り付け対応

Youtubeの動画貼り付けのさい、Youtubeの埋め込みのコードはiFrameで動画の大きさに従って大きさの指定が入っています。 しかし、これでは読み込まれたデバイスの画面サイズにレスポンシブに同期しないため一工夫必要です。

このため、まず以下のようなCSSスタイルを追加します。

.youtube-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.youtube-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}</code>

この設定ののち、Youtbeのコードを上記で指定したクラスで囲みます。

<div class="youtube-wrap">
<iframe>.....</iframe>
</div></code>

Google Code Prettifyのオートローダー導入

導入したテーマはあらかじめGoogle Code Prettifyを組み込んでくれていたのですが、サーバーにコードを置いてロードしていました。

気づいたら、オートローダーができていたので、こちらに切り替えました。

まず、元々のスタイルシートやJavaScriptを読み込んでいたフッターを修正します。

```html

Recent Articlesの追加

トップページが表示記事を少し絞る代わりに、サイドバーに"Recent Articles"のウィジットを追加し直近に投稿した10記事のリストを表示するようにしました。