Wp Firefoxアドオン「Make Link」の設定方法

 

 

選択範囲を引用+リンク(テキストを選択してから利用します)。<br /> <br /> <blockquote>%text_br%<br /><a href=”%url%”>%title%</a></blockquote><br /> <br /> 画像を自分のブログに表示&ページにリンク(画像の上で右クリックして利用します)。<br /> <br /> <a href=”%url%”><img src=”%imgurl%” border=”0″></a>

Wp Firefoxアドオン「Make Link」の設定方法 | 海岸通りの夕陽

 

 

 

Firefoxのアドオン「Make Link」は、Webページの紹介記事を書くブロガーなら、ぜひインストールしておきたいアドオンのひとつです。右クリックメニューからリンクタグなどを簡単にクリップボードにコピーでき、さらに、コピーする内容を詳細にカスタマイズできます。<br /> <br /> <br /> Make Linkはページ内を右クリックしたメニューから呼び出しますが、右クリックする場所によって取得できるデータが異なります。
ブロガー御用達Firefoxアドオン「Make Link」の設定方法 – できるネット+ 編集部ブログ

 

 

 

 

選択範囲を引用+リンク(テキストを選択してから利用します)。<br /> <br />

<blockquote>%text_br%<br /><a href=”%url%”>%title%</a></blockquote><br />

 <br />

 画像を自分のブログに表示&ページにリンク(画像の上で右クリックして利用します)。<br />

 <br />

 <a href=”%url%”><img src=”%imgurl%” border=”0″></a>

Wp Firefoxアドオン「Make Link」の設定方法 | 海岸通りの夕陽

 

ブロガー御用達Firefoxアドオン「Make Link」の設定方法

 

Firefoxのアドオン「Make Link」は、Webページの紹介記事を書くブロガーなら、ぜひインストールしておきたいアドオンのひとつです。右クリックメニューからリンクタグなどを簡単にクリップボードにコピーでき、さらに、コピーする内容を詳細にカスタマイズできます。

Make Linkはページ内を右クリックしたメニューから呼び出しますが、右クリックする場所によって取得できるデータが異なります。

ページ内を右クリックし[Make Link]-[HTML]で、このページにリンクするタグを作成できます。[設定]をクリックすると設定画面が表示されます

 

設定画面。最初から設定されている4つの書式のほか、[新規]をクリックして新しいフォーマットを作ることができます

 

タイトルとフォーマットを入力します。このとき、以下のような変数が利用できます

 

以下の表は、Make Linkで利用できる6つの変数(URLやページのタイトルなどの情報を取得したもの)が、どの場所(リンク、選択したテキスト、それ以外のページ内、画 像)を右クリックしたときにどんな情報を取得できるかを記したものです。これを元にカスタマイズすると、さまざまなタグが作成できます。

 

Make Linkで利用できる変数

 

text ページ内 表示しているページのタイトル
選択範囲 選択したテキスト
「%text_n%」にすると改行コードをそのまま反映
「%text_br%」にすると改行を<br />タグに置換
リンク リンクが張られているテキスト
url ページ内 表示しているページのURL
選択範囲
リンク リンク先のページのURL
title ページ内 表示しているページの説明(metaタグのdescriptionの内容)
選択範囲 表示しているページのタイトル
リンク リンク先のページのタイトル(aタグのtitle属性)
input ページ内 任意のテキスト(コピー時に入力欄が表示される)
選択範囲
リンク
imgurl 画像 画像のURL

 

カスタマイズ例

 

選択範囲を引用+リンク(テキストを選択してから利用します)。

<blockquote>%text_br%<br /><a href=”%url%”>%title%</a></blockquote>

画像を自分のブログに表示&ページにリンク(画像の上で右クリックして利用します)。

<a href=”%url%”><img src=”%imgurl%” border=”0″></a>

作成した新しいフォーマットが[Make Link]のメニューに加わりました

 

 

メニューが増えすぎたときには「Menu Editor」

 

Firefoxにアドオンをたくさんインストールしすぎると、右クリックメニューが増えすぎて使いにくくなってしまいます。上の画面写真でも、すでにその傾向がありますね。

こんなときには「Menu Editor」というアドオンを使いましょう。右クリックメニューの内容をカスタマイズし、並び順を変えたり、不必要なものを消してしまうことができます。

「Menu Editor」を使って、[Make Link]をいちばん上のクリックしやすい位置にしてしまうこともできます
カテゴリー: 夕陽のある海岸通り | コメントをどうぞ

wp 「はてなブログ風」のブログカードリンク

WordPressで「はてなブログ風」のブログカードリンクが超簡単に作れる裏技!

 http://hatenablog.com/embed?url=https://anisosa.net/archives/1146

http://hatenablog.com/embed?url=https://anisosa.net/archives/1146

WordPressで使える!はてなブログ風ブログカードを簡単に早く作る方法。

ブログを書くときリンクを貼ることがあると思います。普通に青文字のテキストだけだったら寂しいですよね。機能としてはそれでいいのですが、視覚的にリンクとして分かりやすいかと聞かれると、正直見にくいし寂しいです。

このリンクをブログカードとして見せれたら見栄えが良くなり見やすさも格段に上がります。今回は”はてなブログ風”のブログカードを簡単に作る方法を見つけたので作成方法を紹介したいと思います。

※ここでは利用者数の多い「Google Chrome」と、「Firefox」の2つでやり方を紹介します。

はてなブログ風のブログカードとは

ここで紹介するはてなブログ風ブログカードは下のように、リンク先のタイトルや記事の概要、サムネイルなどが表示されます。

作成方法も簡単で早く作ることができます。
では実装方法の紹介します!

【手順1】「Pz-HatenaBlogCardをインストール

まずはブログカードを作成する「Pz-HatenaBlogCard」というプラグインをインストールします。

ダッシュボードのメニューから、「プラグイン」→「新規追加」と進み、右上の「プラグインを検索」と書かれた検索窓にプラグイン名「Pz-HatenaBlogCard」を検索をします。

出てきた「Pz-HatenaBlogCard」のプラグインをインストールし、完了したら有効化します。ここまででブログカードを表示する準備は完了です。

プラグイン実装方法

「Pz-HatenaBlogCard」をインストールした時点で、あとは下記のショートコードを記事に貼り付ければブログカードを作成することが出来ます。

[blogcard url=”リンク先のURL”]

しかしブログカードを作成するときに、いちいちURLをコピペしてショートコードを作成するのはメンドくさいですよね!そこでブラウザの拡張機能を使って簡単にブログカード作成することが出来ます。

【手順2】ブラウザのリンク作成用の拡張機能を入れる

ブログカードを簡単に早く作成するためにブラウザの拡張機能を使います。
「ブラウザの拡張機能はなんか難しそう」なんて思う人もいるかと思います。しかし、そんなことはありません。インストールも簡単にすることができます。

【GoogleChromeの場合】
1, Googleで「Create Link」と検索します。
2, 出てきた結果のうち、「Create LInk – Google ウェブストア -」を選びます
拡張機能_クローム
3, 右上の「+ CHROMEに追加」というボタンをクリックします。私は追加しているので「追加済み」になっていますが、追加してない人は「追加」で表示されます。
Googleストア
4, 「Create Linkを追加しますか?」と聞かれるので、「拡張機能を追加」をクリックします。
【Firefoxの場合】
1, Firefoxで「Make LInk」と検索します。
2, 出てきた結果のうち、「Make Link :: Add-ons for Firefox」を選びます
拡張機能_firefox
3, 右の「+ Firefoxへ追加」というボタンをクリックします。
firefoxストア
4, ポップアップがでたら、「インストール」をクリックします。
5, Firefoxを再起動させる。

【手順3】拡張機能にショートコードを設定する

拡張機能を入れたら次はショートコードを設定します。

ショートコードの設定は、ブログカードを作るためのショートコードをブラウザの拡張機能に覚えさせて、ボタン一つで呼び出せるようにします。

【GoogleChrome 「Create Link」の場合】
1, 右上のメニューバーから「Create LInk」を選び、「Confiure」をクリックします。
2, 表の下にある「+」ボタンをクリック。
フォーマットの追加
3, 「Name」の部分に分かりやすい名前と、その横に下記のコードを貼り付けます。
[blogcard url=”%url%””]
これで完成です!
【Firefox 「Make Link」の場合】
1, 右クリックでメニューバーを出し、「Make Link」→「設定」を選びます。
2, 右下にある「新規」をクリックして名前とコードを入力する。
フォーマットの追加_firefox
これで完成です!

【手順4】リンクを取得し、記事に貼り付ける

これで早く呼び出せる準備は整いました。後はリンクを取得し、記事に貼り付けるだけです。

GoogleChromeでは上部にメニューバーがあるので、そこクリックして作ったテンプレートのやつを選びます。

ブログカード挿入_chrome

Firefoxでは、リンクを作りたいサイトを表示させた状態で、右クリックです。そこから「Make Link」を選択しテンプレートを選択すればOKです。

ちなみに右クリックからリンクを取得するやり方はGoogle Chromeでもできます。

ボタンを押しても反応はないですが、それだけで表示されてるサイトのリンクがコピーされた状態になっています!あとはそれを貼り付けるだけ!超簡単。

プレビューで確認してブログカードが作成されているのを確認してみましょう!

まとめ

どうでしたか?一度登録してしまえば、あとは簡単に早くブログカードをつくれます。

正直この方法を見つけたとき感動してしまいました。このブログカード作成方法利用して、一緒に見栄えの良いブログを作成していきましょう。

 

 

 

WordPressで「はてなブログ風」のブログカードリンクが超簡単に作れる裏技!

 

コード
 

 

記事を書くとき、外部リンクや内部リンクを貼ることがあると思いますが、普通に青文字のテキストだけだったら寂しくないですか?

いわゆるリンクってこんな感じだと思うんですが、これにプラスしてブログカードリンクも作れたら見栄えがさらによくなります。

ブログカードにもいろいろとデザインがありますが、今回は”はてなブログ風”のブログカードを作る方法を解説していきます。

なんではてなブログ風かというと、単純にはてなブログやってる人のリンクカードに憧れてたんですよね、それまで普通にテキストリンクだけだったんで。

ざっくりとしたやり方を初めに言っておきますと、こんな感じです。

ざっくり説明:
  1. ① 「Pz-HatenaBlogCard」プラグインをインストール
  2. ② ブラウザにリンク作成機能を入れる
  3. ③ 拡張機能にショートコードを設定する
  4. ④ リンクコードを記事に貼り付ける

では見ていきましょう。

 

 

”はてなブログ風”のブログカードとはどういうものか?

まず、本家はてなブログのブログカードがこちらです。

はてなブログカード

(※リンクにはなっていません。)

 

こんな感じではてなブログでは、リンク先の記事タイトルや記事の概要、サムネイルなどが表示されたブログカードが作れるのです。

それに対して、今回紹介するブログカードがこちらです。

chromeChrome拡張機能まとめ|作業が10倍はかどる拡張機能40選

突然ですが、このページはGoogle Chomeで見ていますか? 便利な拡張機能は入れていますか? 僕はChromeをもう5年か6年かそれ以上…
 

 

どうですか?

「お! いいな!」と思った方はやり方も超簡単なので真似してみてくださいね!

では早速やり方の説明に行きましょう!

なお、最後に通したやり方を動画で解説していますので、文章じゃわかりづらいという方は動画を見ながらやってみてください!

 

 

【手順①】”Pz-HatenaBlogCard”をインストール

まずは必要となるプラグインをインストールしましょう!

「Pz-HatenaBlogCard」というプラグインをインストールしてください。

ダッシュボードのメニューから、「プラグイン」→「新規追加」と進んでいただき、右上の「プラグインを検索」と書かれた検索窓にプラグイン名「Pz-HatenaBlogCard」と打ち込んで検索をかけます。

 

説明

 

出てきた「Pz-HatenaBlogCard」のプラグインをインストールし、完了したら有効化します。

これだけで完了です。

 

 

【手順②】ブラウザのリンク作成用の拡張機能を入れる

「Pz-HatenaBlogCard」をインストールした時点で、あとは下記のショートコードを記事に貼り付ければすぐにできます。

ですが、もっと簡単にするためにもうひと作業します。

ブラウザのリンク作成用の拡張機能にショートコードを設定します。

ブラウザもいろいろとありますが、ここでは利用者数の多いGoogleChromeと、Firefoxの2つでやり方を紹介します。

GoogleChromeでは「Create Link」という拡張機能を、Firefoxでは「Make Link」という拡張機能を入れましょう。

インストールも簡単にできます。

下記の説明を見ながらインストールしてみてください。

 

【GoogleChromeの場合】

  1. ① Googleで「Create Link」と検索窓に打ち込んで検索する。
  2. ② 出てきた結果のうち、「Create LInk – Google ウェブストア -」を選ぶ。
  3. ③ 右上の「+ CHROMEに追加」というボタンをクリック
  4. ④ 「Create Linkを追加しますか?」と聞かれるので、「拡張機能を追加」をクリック

 

 

【Firefoxの場合】

  1. ① 検索窓に「Make LInk」と打ち込んで検索をかける。
  2. ② 出てきた結果のうち、「Make Link :: Add-ons for Firefox」を選ぶ。
  3. ③ 「+ Firefoxへ追加」と書かれた緑のボタンをクリック。
  4. ④ なんか画面出てきたら、「今すぐインストール」みたいなやつをクリック。
  5. ⑤ Firefoxを再起動させる。

   

【手順③】拡張機能にショートコードを設定する

拡張機能が入れれたら、次はショートコードを設定します。

ショートコードを設定するというのはどういうことかというと、先ほどのブログカードを作るためのショートコードをブラウザの拡張機能に覚えさせるということです。

「テンプレートを作っておく」みたいな感じかな?

やり方は、拡張機能の設定画面から、表示名とコードを入力して保存しちゃえばOKです!

 

【GoogleChrome 「Create Link」の場合】

  1. ① 右上のメニューバーから「Create LInk」を選び、設定を表す「Confiure」をクリック。
  2. ② Formatを一つ追加したいので、表の下にある「+」ボタンをクリック。
  3. ③ 適当に分かりやすい名前と、その横に下記のコードを貼り付ける。完成!

 

 

【Firefox 「Make Link」の場合】

  1. ① 右クリックでメニューバーを出し、「Make Link」→「設定」を選ぶ。
  2. ② 右下にある「新規」をクリックして名前とコードを入力する。
  3. ③ 「OK」で完成!

   

【手順④】リンクを取得し、記事に貼り付ける

さて、これでテンプレート化できましたので、あとはリンクを取得し、記事に貼り付けるだけです。

 

GoogleChromeでは上部にメニューバーがあるので、そこクリックして作ったテンプレートのやつを選びます。

一見何も変化がないようですが、実はそれだけで表示されてるサイトのリンクがコピーされた状態になってるんです。

 

 

Firefoxでは、リンクを作りたいサイトを表示させた状態で、右クリックです。そこから「Make Link」、テンプレートを選択すればOKです。

ちなみに右クリックからリンクを取得するやり方はGoogleChromeでもできます。

 

 

リンクを取得したら、あとは記事に貼り付けて終わりです。

プレビューで確認してみましょう!

最後に、全部通して動画で解説しているので、参考にしてください。

//cdn.embedly.com/widgets/platform.js

カテゴリー: 夕陽のある海岸通り | コメントをどうぞ

wp 見出し

 

 

ブログの見出しデザインを制覇せよ!CSS貼り付けだけの簡単素材で記事を彩る 

  2015/12/07    あとで読む

 約 7 分で読めます

 

 

corridor-598319_1280

ブログデザインの中でも大きな要素を占めるものの1つが「見出し」。

トップページや個々の記事、またサイドバーなど、ブログのいたるところで使われるものですね。

見出しはテーマごとにいろいろとデザインがされていて、テーマの特徴がとてもよく出るものですが、そうであるからこそ逆に人気のテーマでは「あ、これはあのテーマ使ってるな」と見出しのデザインからすぐ分かり、他のブログと見栄えが代わり映えしなくなることからデザインの差別化も必要となって来ます。

ここではそんな重要な位置づけである見出し用のデザインで、特徴があり過ぎず、すぐにブログに馴染んで使用できるものを紹介と、CSSの簡単貼り付け(コピペ)で利用する使い方の解説です。

ブログの見出しは勿論、タイトルやその他のタグなどに適用して、是非個性あるブログ運営に生かしてくださいね。

 

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

 

CSSの利用の仕方

では早速見ていきましょう。

ここではWordpressの記事作成で通常使われる「見出し2」(h2タグの見出し )に対するCSSを紹介しています。

どれもそのままコピーしてブログのCSSに追加すればすぐ使えるようになっていますので、是非いろいろと試してみてくださいね!

  • 1.基本の利用法
    • コレが使いたい!というデザインのCSSをブログのCSSに貼り付けてください。
    • 貼り付けても変な表示になる等あれば、下方にある初期設定用のCSSも貼り付けてください。
  • 2.記事本文だけへの適用
    • ブログのテーマごとに、記事本文の 見出し2(h2タグ)への指定が変わります。
    • 詳しくは下方の関連記事で解説しますが、有名どころのテーマで言えば、以下のようにしてみてください。
      (全てのh2 を以下の “” 内に置き換える)

       

      • 賢威“#main-contents .contents  h2”
      • Simplicity“div.article h2”
      • Stinger5“div.post h2”
      • Twenty Fifteen“div.entry-content h2”
    • 関連記事 ブログのデザインカスタマイズの決め手!CSSの適用範囲を確認する技
  • 3.見出し2以外の見出しへの利用
    • 見出し2以外の見出しに利用したい場合、例えば「見出し3」では h2 を h3 に、「見出し4」では h2 を h4 に全て変更します。
  • 4.記事タイトルへの利用
    • 記事のタイトルは基本 h1 タグが使われます。h2 を 全て h1 に置き換えます。
  • 5.見出し以外への利用
    • 見出し以外に追加たい場合には、h2 を適用したいHMTLタグに置き換えます。
  • 6.ブログのCSSへの反映
  • 7.色変更などのデザインカスタマイズ

初期設定用CSS

WordPressのテーマでは既に見出し2(h2)がいろいろとデザインされている(CSSが設定されているため)ことから、なにか表示が変だ、という場合には、以下の初期設定をCSSの最初に貼り付けてみてください。

CSSの初期設定

またモバイルでの文字の大きさを調整したい(少し小さく表示したい)という場合には、以下のコードをCSSの一番最後に貼り付けてみてください。

CSS – モバイル用 

前置き長すぎ!それでは順番に見てみましょう!

標準タイプ(塗りつぶし)

標準的に使える見出しデザインです。

塗りつぶし基本

見出しサンプル – 塗りつぶし01

 

 

角丸

見出しサンプル – 塗りつぶし02

 

 

影付き(ボックス)

見出しサンプル – 塗りつぶし03

 

 

影付き(ボックス – 内側)

見出しサンプル – 塗りつぶし04

 

 

影付き(テキスト)

見出しサンプル – 塗りつぶし05

 

 

影付き(ボックス – 内側 + テキスト)

見出しサンプル – 塗りつぶし06

 

 

標準タイプ(ワク)

標準的に使えるワクで囲ったタイプの見出しデザインです。

枠デザイン基本

見出しサンプル – ワク01

 

 

角丸

見出しサンプル – ワク02

 

 

影付き(ボックス)

見出しサンプル – ワク03

 

 

影付き(ボックス – 内側1)

見出しサンプル – ワク041

 

 

影付き(ボックス – 内側2)

見出しサンプル – ワク042

 

 

影付き(テキスト)

見出しサンプル – ワク05

 

 

影付き(ボックス – 内側 + テキスト)

見出しサンプル – ワク06

 

 

左+下

見出しサンプル – ワク07

 

 

左+下(背景色あり)

見出しサンプル – ワク08

 

 

左+右

見出しサンプル – ワク09

 

 

上+下(シンプル)

見出しサンプル – ワク10

 

 

 グラデーション

グラデーションは設定が結構あります。
CSSの多さにびっくりしないでくださいね(笑)
(少し古いブラウザなど考慮しなければそんなでもないんですけど)

ネット上で簡単にシミュレーションできるサービス(以下のURL)がありますので、そちらでグラデーションのかかり具合や色の組み合わせを試してCSSのコードを取得してみてください。

  • Ultimate CSS Gradient Generator
    • 色々と触ればグラデーションの作り方がわかると思いますが、最後のコードの取得が分かりづらいかも知れません。
    • CSSコードの上にマウスを持って行くと、右下に小さく「copy」とでるので、そこをクリック!するとコピーできます。

取得したコードは、以下の箇所に貼り付けてください。

 

 

以下はそのジェネレーターで作成した例です。こんな感じのが簡単にできるんですね。嬉しすぎ ^◇^)

取得したコードの位置も見てみてください。

ふっくらグラデーション

見出しサンプル – グラデ01

CSSコード – グラデ01

左右グラデーション1

見出しサンプル – グラで02

CSSコード – グラデ02

左右グラデーション2

見出しサンプル – グラで03

CSSコード – グラデ03

2色ふっくらグラデーション

見出しサンプル – グラで04

CSSコード – グラデ04

 特徴的な形 – 下三角

吹き出し調の枠です。人気のテーマ「Stinger5」に取り入れられてますね。

下三角

見出しサンプル – 特徴的01

 

 

下三角 – 白背景

見出しサンプル – 特徴的02

 

 

下三角 – 輪郭のみ

見出しサンプル – 特徴的03

 

 

下三角 – 上下のみ

見出しサンプル – 特徴的04

 

 

 特徴的な形 – 前後に丸

先頭に丸

見出しサンプル – 特徴的051

 

 

先頭に丸

見出しサンプル – 特徴的052

 

 

左右に丸

見出しサンプル – 特徴的06

 

 

 特徴的な形 – 前後に三角

先頭に三角

見出しサンプル – 特徴的071

 

 

最後に三角

見出しサンプル – 特徴的072

 

 

左右にに三角

見出しサンプル – 特徴的073

 

 

先頭に三角(反転)

見出しサンプル – 特徴的081

 

 

最後に三角(反転)

見出しサンプル – 特徴的082