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

MyEnigma

とあるエンジニアのブログです。#Robotics #Programing #C++ #Python #MATLAB #Vim #Mathematics #Book #Movie #Traveling #Mac #iPhone

はてなダイヤリー or はてなブログユーザに便利なCreateLinkの設定方法

Memo

「はてな」ではじめるブログ生活―はてな公式ハンドブック

「はてな」ではじめるブログ生活―はてな公式ハンドブック

はじめに

はてなダイヤリーや、

はてなブログでブログを書く時は、

はてな記法やMarkdownに準じた動画のリンクや、

画像のリンクを作成する必要があります。


今回ははてなダイヤリーやはてなブログでブログを書くときに、

簡単に動画のリンクや画像のリンクを作成してくれる

ChromeのアドオンであるClickLinkの設定方法について

説明したいと思います。


インストール方法

Chrome上で下記のリンクからインストールしましょう。

Chrome ウェブストア - Create Link


設定方法

ウインドウ->拡張機能から、

CreateLinkのオブションをクリックします。

そして、Formatsの+ボタンを押して下記のように、

フォーマットを追加しましょう。


f:id:meison_amsl:20150428085941p:plain


(コピペできるようにtextも貼っておきます。)

はてなリンク [%url%:title=%text%]
はてな写真  [%url%:image]
はてな動画  [%url%:movie]
はてなgist    ><script src="%url%.js"></script><
コードハイライト >|cpp| ||<
Markdownリンク [%text%](%url%)
Markdown写真 ![%text%](%url%)
Markdownコードハイライト ```cpp ```

はてな記法における使い方

基本的には、リンクを作りたいページ上で右クリックをして、

CreateLiinkで作りたいリンクのボタンを押すだけで、

必要なリンクがクリップボードにコピーされます。


例えば、あるyoutubeの動画をはてなダイヤリーに埋め込みたい時は、

その動画のページ上で右クリック->Create Link−>はてな動画をクリックし、

あとはブログの作成画面でCtrl+vすれば必要なリンクが貼られます。

最後にプレビューでちゃんと動画が埋め込まれているかを確認しましょう。


はてなgistは

gistにアップロードされているコードを挿入したい場合に使用します。

挿入したいgistのページでリンク生成をすると、

はてなダイヤリーにそのまま貼れるようなリンクを作成してくれます。


また、コードハイライトは下記の記事のように、

プログラムコードをハイライトしたい場合に使用します。

入力したプログラムコードを色付けするスーパーpre記法 シンタックス・ハイライトの実装について - はてなダイアリー日記

cppの後の|の後にコードを挿入して下さい。

今回の設定ではコードの言語をC++であると仮定しているため、

もし他の言語でハイライトしたい場合は、

上記の記事を参考にして変更して使用して下さい。

はてなブログにおけるMarkdown記法の場合の使い方

はてなブログの場合、Markdown記法でブログを書くことができます。

[Qiita - Markdown記法 チートシート - Qiita](http://qiita.com/Qiita/items/c686397e4a0f4f11683d)

その場合には、はてな記法とは別のMarkdown記法での記法が必要です。


リンクを作ったり、写真のリンクを作りたい場合は、

MarkdownリンクとMarkdown写真を選べばOKです。

コードハイライトも、コード名の後ろにコードを入れればOKです。


youtubeの動画リンクやgistのリンクに関しては、

下記のような編集ツールのリンク作成ツールを使った方が楽かと思います。

f:id:meison_amsl:20150428085822j:plain

参考資料

「はてな」ではじめるブログ生活―はてな公式ハンドブック

「はてな」ではじめるブログ生活―はてな公式ハンドブック

はてなダイアリー 実践デザインカスタマイズガイド

はてなダイアリー 実践デザインカスタマイズガイド