701
回編集
差分
ナビゲーションに移動
検索に移動
ページの作成:「本当はWordpressのプラグインで実現したかったのだけど…（存在はしています…）プラグインの競合がいやだったので、ブラウ…」
本当はWordpressのプラグインで実現したかったのだけど…（存在はしています…）プラグインの競合がいやだったので、ブラウザにChrome使っていることだし、Chromeのアプリを使って実現してみました。なので…カテゴリ的には本来Wordpressではないのですが…やりたいことは「Wordpressにブログカードでリンクを張りたい」だったのでWordpressにカテゴライズしました。
Chromeの拡張機能を使っているので、基本的な使い方は…リンクしたいページで「Create Link」を使ってＵＲＬをコピーして…Wordpressの記事に貼り付ける感じです。
== 「Create Link」のインストール ==
GoogleのChromeのインストールが必須です…。インストールしていない人は…ほかの手段考えてください…
<ol>
<li>GoogleChromeを起動する。</li>
<li>ブックマークの一番左に（あるはずの）「アプリ」をクリックする。</li>
<li>アプリの一覧から「ウェブストア」をクリックする。</li>
<li>左上の「ストアを検索」テキストボックスに「Create Link」と入力し、エンターキーを押す。</li>
<li>拡張機能の「Create Link」の右側の「＋無料」ボタンをクリックする。</li>
<li>「新しい拡張機能の確認」ウインドウで「追加」ボタンをクリックする。</li>
<li>Chromeの右上にアイコンが追加され、インストール完了</li>
</ol>
== 「Create Link」の設定 ==
ブログカードで貼り付けられるようにするためには、設定する必要があります…
<ol>
<li>Chromeの画面の右上にある「Create Link」のアイコンをクリックする。</li>
<li>メニューから「Configure...」をクリックする。</li>
<li>「Formats」の表の下の「＋」をクリックする。</li>
<li>「Name」の欄に適当な名前を入れる。（僕は「BlogCard」にしたよ）</li>
<li>「Format」に以下のソースを入力する。
<source lang="html5">
<iframe style="border:none;display:block;margin:0 0 1.7rem;overflow:hidden;height:155px;width:100%;max-width:100%;" title="%title%" src="http://hatenablog.com/embed?url=%url%"></iframe>
</source>
</li>
<li>以上で設定完了。</li>
</ol>
== 使い方 ==
前出で説明したとおり、URLを取得するときに「Create Link」を使って、リンクのソースを記事に貼り付けます。
<ol>
<li>リンクを作成したいページを開く。</li>
<li>適当なところで右クリックして、「Create Link」→「前の手順で設定した名前（BlogCard）」をクリック。</li>
<li>Wordpressで作成している記事に貼り付ける。（ブログカードのhtmlが貼り付けられる）</li>
<li>記事が書き終わったら公開する。</li>
</ol>
== 参考サイト ==
ちなみに…以下の「Create Link」を使って作成しました…。MediaWikiユーザも便利！
[http://decoy284.net/2014/09/06/chrome-extention-create-link-blogcard/ Chrome拡張機能「Create Link」を使ってブログカードを適用する方法 | でこにく]<br/>
[http://celtislab.net/archives/20141225/blog-card-embed/ WordPressで「はてなブログカード」のような埋め込み機能作成 | セルティスラボ]<br/>
[[Category:WordPress]]
Chromeの拡張機能を使っているので、基本的な使い方は…リンクしたいページで「Create Link」を使ってＵＲＬをコピーして…Wordpressの記事に貼り付ける感じです。
== 「Create Link」のインストール ==
GoogleのChromeのインストールが必須です…。インストールしていない人は…ほかの手段考えてください…
<ol>
<li>GoogleChromeを起動する。</li>
<li>ブックマークの一番左に（あるはずの）「アプリ」をクリックする。</li>
<li>アプリの一覧から「ウェブストア」をクリックする。</li>
<li>左上の「ストアを検索」テキストボックスに「Create Link」と入力し、エンターキーを押す。</li>
<li>拡張機能の「Create Link」の右側の「＋無料」ボタンをクリックする。</li>
<li>「新しい拡張機能の確認」ウインドウで「追加」ボタンをクリックする。</li>
<li>Chromeの右上にアイコンが追加され、インストール完了</li>
</ol>
== 「Create Link」の設定 ==
ブログカードで貼り付けられるようにするためには、設定する必要があります…
<ol>
<li>Chromeの画面の右上にある「Create Link」のアイコンをクリックする。</li>
<li>メニューから「Configure...」をクリックする。</li>
<li>「Formats」の表の下の「＋」をクリックする。</li>
<li>「Name」の欄に適当な名前を入れる。（僕は「BlogCard」にしたよ）</li>
<li>「Format」に以下のソースを入力する。
<source lang="html5">
<iframe style="border:none;display:block;margin:0 0 1.7rem;overflow:hidden;height:155px;width:100%;max-width:100%;" title="%title%" src="http://hatenablog.com/embed?url=%url%"></iframe>
</source>
</li>
<li>以上で設定完了。</li>
</ol>
== 使い方 ==
前出で説明したとおり、URLを取得するときに「Create Link」を使って、リンクのソースを記事に貼り付けます。
<ol>
<li>リンクを作成したいページを開く。</li>
<li>適当なところで右クリックして、「Create Link」→「前の手順で設定した名前（BlogCard）」をクリック。</li>
<li>Wordpressで作成している記事に貼り付ける。（ブログカードのhtmlが貼り付けられる）</li>
<li>記事が書き終わったら公開する。</li>
</ol>
== 参考サイト ==
ちなみに…以下の「Create Link」を使って作成しました…。MediaWikiユーザも便利！
[http://decoy284.net/2014/09/06/chrome-extention-create-link-blogcard/ Chrome拡張機能「Create Link」を使ってブログカードを適用する方法 | でこにく]<br/>
[http://celtislab.net/archives/20141225/blog-card-embed/ WordPressで「はてなブログカード」のような埋め込み機能作成 | セルティスラボ]<br/>
[[Category:WordPress]]
