Pimp my Code. @wataru420

My name is Wataru Fukunaga.


テーマ:
以前にこんな記事(AmebloにGistのソースコードを貼り付けたい!(かなり妥協) )を書いたところ、

それめんどくさいよねーとDisられた。orz

そこで、貼付け用のHTMLを簡単に生成できるツールを作りました。
良かったら使って下さい。
Gist2Ameblo
Pimp my Code. @wataru420-gist2ameblo


以下使い方の説明です。

貼付けるGistのembedタグをコピーする。


Pimp my Code. @wataru420-Gist


ファイル名の右にあるembedリンクや、上部のshow embedリンクをクリックするとembedタグが表示されます。
このタグをコピーします。
gist全体のembedだと全ファイル文のHTMLが、ファイル個別で選択するとファイル単体用のHTMLが生成されます。

コピーしたタグをGist2AmebloのInputBoxに貼付け、フォームを送信します。
すると、必要なHTMLが下に表示されます。

CSSのフリープラグインへの追加。


Pimp my Code. @wataru420-gist2ameblo-css

<link rel="stylesheet" href="https://gist.github.com/stylesheets/gist/embed.css"/>
このタグがフリープラグインに登録されている必要があります。

このタグの部分をフリープラグインへ追加しておく必要があります。
追加の方法はここ に貼り付けて、サイドバーの設定 でフリープラグインを使用する状態にします。

生成されたHTMLの貼付け。


テキストエリアに貼りつけようのHTMLが生成されます。
このHTMLをアメブロのHTMLタグ入力モードで貼り付けます。

これだけです。

サンプル

実際に張り付けるとこんな感じになります。

<link rel="stylesheet" href="https://gist.github.com/stylesheets/gist/embed.css"/>

是非使ってみてください。

注意


フリープラグインは「表示を確認する」や「アメンバー限定記事」やスマートフォン、フューチャーフォンでは適用されないので、色などは付きません。
また、一度貼りつけたHTMLは貼付け後にGistを変更した場合に変更が反映されないので、再度修正する必要があります。
Gistは公開設定じゃないとembedタグが生成されません。

アメーバブログではじめるこだわりブログ(Ameba公式ガイド)第2版
アメーバブログではじめるこだわりブログ(Ameba公式ガイド)第2版 ブログメディア研究グループ

翔泳社 2011-09-14
売り上げランキング : 51488


Amazonで詳しく見る
AD
いいね!した人  |  コメント(2)  |  リブログ(0)

わちゅるさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。