Aqua-Experience

読者です 読者をやめる 読者になる 読者になる

Aqua-Experience

自分の経験値を上げるべく日々新しい事へチャレンジ

ブログの本文にコードを貼り付けるなら「Gist」がおすすめ!

ブログ関係 ブログ関係-ブログ書き方

スポンサーリンク

私はあなたに有益な情報をお届けするために色々調べているわけです。
今、頭の中にはたくさんのストックがあるんですが、いかんせんそれをブログに貼り付ける技術がなかったんです。
何を言いたいかというと、htmlのコードを直接本文に貼り付けることができなかったんです・・・。
そして、これを調べた結果Gistというサービスにたどり着きました。
まずはこれをあなたにお伝えしましょう。

勉強机の画像

htmlコードを本文に書いてもおかしくなる

私ははてなブログの見たまま編集モードを使用しています。
例えば画像を貼り付けるコードを直接本文に貼り付けてみましょう。

一度画像を取り込んでからそのコードをコピーして本文に貼り付けると当然もう一つ画像ができてしまいます。
私はその画像のコードの仕組みを是非あなたに伝えたいのにそれができません!!
そこで色々調べてGistというサービスにたどり着きました。

Gistは英語だらけなので解説

まず、こちらをクリックしGistのページへいきます。

Create a new Gist · GitHub

こちらの画面の右上のSign upのボタンを押します。

Gistの初期画面

次に出てきた以下の画面でユーザー名・メールアドレス・パスワードを入力して一番下のボタンを押します。

Gist登録画面のStep1

Step2の画面は無料プランか有料プランかを選ぶ画面です。
無料プランが選択されているので、そのまま一番下のボタンを押します。

Gist登録画面のStep2

この時にメールが届いていると思いますので、メールを開き「verify email address」をクリックしておきます。
認証確認みたいなものです。
これで登録は完了です。

使い方

今新規作成画面になっているかと思います。
使い方は以下のような感じです。

Gist'のファイル作成画面

ファイル名を入力して、その下にコードを入力すればOK!!
新しくファイルを作りたい場合は右上のボタンをクリックします。

はてなブログへの貼り付けは?

編集サイドバーにGistの項目があるのでそれをonにしておきましょう。

はてなブログの編集サイドバーの画面

そして、ユーザー名を入力して連携ボタンを押せば自分がさっき作ったファイルが出てくると思います。
貼り付けたいファイルを選ぶだけです。
こんな感じですよ。

簡単でしょ?

まとめ

そんなに難しくないのでこちらを使ってみることにしました。
MarkDownやはてな記法を使用している方は違う方法でもっと簡単にできるみたいですよ。
さて、これを使って私は紹介したいものが幾つかありますので乞うご期待♪♪

 

【勉強時間記録】

3/1(火)0.5h

【おすすめ過去記事】


ブログ村に参加してみました。
ポチッと押していただけるとありがたいです。

にほんブログ村 ブログブログ ブログアクセスアップへ
にほんブログ村