WordPressでgistを使う方法

WebDesign

こちらの記事のようにコードを記事に埋め込む際にはgistが非常に役に立ちます.

単純にコードを埋め込むだけなら,非常に簡単です.コードの名前と本体をそれぞれフォームに書いて,右下のCreate public gistを押すだけで,gistが作成されます.通常のページならば,Embedの横の

<script> ~ </script>

を埋め込みたい場所にコピーすれば,埋め込みは完了です.WordPressの場合はscriptタグをdivタグで囲んで,

<div><script
src="https://gist.github.com/botamochi6277/c381249aba9e9ba3806e9a82f1d27e61.js"></script></div>

と書けば,以下のように埋め込まれます(プレビューだと1度目では表示されないことがあります.リロードしてみてください).divタグを使う理由はこちらから.
create-gistembed-gist

ただし,WordPressに単純に埋め込んだだけだと,幅や高さが設定されていないため,下の画像のよう非常に縦長になってしまいます.このときの解決法がstackoverflowで紹介されていました.
gist-long
方法は次のコードを記事に入れてください.特に場所は指定されていません(僕の場合scriptの直前に置いています).

<style type="text/css">
.gist {width:100% !important;}
.gist-file
.gist-data {max-height: 300px;max-width: 100%;}
</style>

これで縦幅の最大値が300pxとなるため,読みやすい高さになります.

また,この方法はGitHubのコードを埋め込むgist-itでも次のように有効です.moongiftで紹介されています.

<div>
<script src="http://gist-it.appspot.com/github/botamochi6277/matlab-exportfig/blob/master/exportfig.m"></script>
</div>

コメント

タイトルとURLをコピーしました