うらなか書房のあやしいグッズあり〼

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他少し物騒なものや奇妙なものの紹介をしています(たまにお役立ち情報や雑記も書きます)。

たまに毒吐くちゃん

カテゴリー「Web関連」の人気記事TOP3

ブログを書く時に使える便利なWebサービス【リンクカード、画像軽量化など】

time 公開日:

ブログを書く時に、他のサイトへリンクを貼ったり、画像を使用したりすることがあると思います。
そういった場面で活用できるかもしれない便利なWebサービスを以下でご紹介します。

sponsored link

リンク

リンクカード「Embedly」

Embed Code Generator | Embedly

▲のようなリンクカードを表示できるWebサービス。
上記のページに行って、リンクしたいページのURLを入力するとコードが発行されるので、それを記事に貼り付けます。

頻繁に使う場合はブックマークレットを利用するといいでしょう。
ブックマークレットページにある「+Embed」というボタンをブラウザのブックマークツールバーにドラッグすると「+Embed」ボタンが出現するので、リンクしたいページでそのボタンを押します。するとその場でコードが発行されます(いちいちEmbedlyのサイトに行かなくても済むようになります)。

WordPressの場合はプラグインもあります。

それぞれカスタマイズできる部分などに少し違いがあって、

Embedly

Webサイト ブックマークレット プラグイン
SNSボタン 消せる 消せない 消せる
サイトの説明文 コードの<p>~</p>を削除すれば消せる。文章の短縮も可(この場合は<p>と</p>は消さず中身の文章だけをいじる)。 消せる(説明文をクリックすると文章を短縮することも可) 消せない?(パッと見た感じ設定画面に説明文の項目が見当たりませんでした)
画像の選択 ログインすれば可能 できない できない
画像の大きさ ログインすればsmallを選べる 小か大を選べる(画像が小さい場合ははじめから小しかない。消すことも可) %やピクセルでの指定が可(設定画面で一律)
コード あり(記事中に貼り付ける) あり(記事中に貼り付ける) 記事中にURLを書くだけでOK(その行にはURLのみを書く。また、WordPressのoEmbed機能を無効化する必要がある)

という感じです。私はブックマークレットが一番使いやすいように思えたのでそれを利用しています。

また、このブログではカードの周りにCSSで影をつけています。

div.embedly-card{
box-shadow: 0 3px 8px #999!important;
}

サイトのサムネイル画像+リンク「HeartRails Capture」

HeartRails Capture | サムネイル画像/PDF ファイル作成サービス

▲のように、サイトの外観の縮小画像(サムネイル)にリンクを貼ったコードを発行してくれます。
「HeartRails Capture」に行き、リンクしたいサイトのURLを入力し、サイズ縁の有無などを選択します。

WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】 | うらなか書房のあやしいグッズあり〼

の記事のように、他サイトのデザインを伝えたい時に活用させてもらっています。

注意点としては、リンクのターゲットが指定されていないので、aタグに

 target="_blank"

を追加するといいかもしれません。
それと細かいことですが、画像のaltの内容がURLになっているので、気になる方はサイトのタイトルなどに直すとよろしいでしょう。

画像変換・軽量化

GIFアニメを作成「Animated GIF Maker」

Online Animated GIF maker

Amazon詳細ページへ

▲のようなGIFアニメを作成できます。

GIFアニメ作成手順

  1. 画像(GIF、JPG、PNG)を何枚か用意して、同じフォルダに保存します。
  2. 「Animated GIF Maker」に行き、画像を選択し(CtrlやShiftキーを押しながらファイルを選ぶと複数枚を一気に選択できます)、「Upload!」ボタンを押します。
  3. 画像の順番をドラッグ&ドロップで変更します。
  4. Delay time」の数字を変えて画像が切り替わる秒数を変更します(初期設定の20だとかなり速いです。上の画像の場合は200です)。
  5. Animate it!」というボタンを押します。
  6. ボタンを押すとGIFアニメが出現するので、画像が切り替わる間隔や順番を確認します。
  7. それでいいようなら、GIFアニメの下にあるリンク「optimize the GIF」を押します。そこでGIFアニメの軽量化をすることができます。
  8. 画質が劣化しない程度に軽量化したら、「save」ボタンを押します。するとGIFアニメがダウンロードされます。
注意
それぞれの画像の大きさが異なっていてもGIFアニメを作ることは可能なのですが、GIFアニメのサイズが先頭の画像サイズに合わせられるので、一番大きな画像を先頭に持ってくるか、全ての画像のサイズを同じサイズでそろえておくといいでしょう。

ちなみに同じサイトに「Optimize PNG images」「Optimize JPEG images」もあって、PNG画像とJPEG画像を軽量化することができます。

画像を軽量化「TinyPNG」

TinyPNG – Compress PNG images while preserving transparency

PNGとなっていますが、JPEG画像も軽量化できます(軽量化した画像もJPEGのまま)。
同じフォルダ内にある画像であれば、複数枚を一気に軽量化+ダウンロードできるので(PNGとJPEGが混ざっていても可)、数が多い場合はこれを使うといいでしょう。

ちなみにWordPressの場合はプラグインになっていて(「Compress JPEG & PNG images」)、これを有効化すると、メディアライブラリにアップロードした画像がPNGかJPEGの場合は自動で軽量化してくれるようになります。

SVG画像に変換「ZorroSVG」

ZorroSVG – Put a Mask on it

JPEGやPNG画像は拡大すると表示が荒くなるのですが、SVG画像の場合は拡大しても劣化しないとのことで、Retina(解像度が高いディスプレイ)対策になるのでは、と思い試してみることにしました。
「PNG or GIF」と書いてありますが、JPEGファイルも変換できました。

ちょっとあやしいデザイン一覧【Tシャツ、グッズなど】 | うらなか書房のあやしいグッズあり〼

上記のページのデザイン画像は全てSVG画像です。私が持つタブレットやスマホで確認した所、正常に表示されていました(ただ古い機器なので、最新のものの場合はどのように見えるのか分からず……)。
また、JPEGやPNGを使用していた時よりも全体で10%ほど軽量化することができました。

ブログの全ての画像をSVGに差し替えるのはかなり大変ですし、まだまだ不都合な点も多いので(そのままだとWordPressのメディアライブラリにアップロードできなかったり、SNSに画像が流れなかったりします……詳しくはこちら)、どうしてもRetinaに対応させておきたい画像や、拡大・縮小して数ヶ所で使い回したいアイコンなど、今の所ピンポイントで使用するのがよさそうです。

漫画のコマを使用できる「マンガルー」

マンガルー – 有名マンガのコマをWebサイト、ブログ、SNSで使える無料Webサービス

漫画のコマを画像として使用できるWebサービス。「マンガルー」が権利者に正式に許諾を得ているので、著作権の問題を気にせずに使うことができます。

こんな画像や、

こんな画像があります。

紹介したい漫画のコマを貼ったり、文章中のアクセントとして挿入してみたり……などといった使用方法が考えられそうです。

記事にコードを載せる「Github gist」

Build software better, together

▲のように、ブログにコードを簡単かつ綺麗に載せることができるツールです。
詳しい使い方は下記の記事をご覧ください。

GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】

スポンサーリンク

AmazonでTシャツや電子書籍(短編小説集)を販売しています

Amazon詳細ページへ Amazon詳細ページへ

Tshirt TrinityでTシャツやバッグを販売しています

TSHIRTS TRINITY

マスコットキャラ

たまに毒吐くちゃん

当ブログのマスコットキャラ「たまに毒吐くちゃん」。所々に出没します。
TSHIRTS TRINITYClubTSUZURIでTシャツ・グッズ販売中です!

  

同じカテゴリーの記事

WordPressテーマ「マテリアル」のカスタマイズ方法【更新日を表示、スマホのメニューを最初から開いておく等】

WordPressテーマ「マテリアル」のカスタマイズ方法【更新日を表示、スマホのメニューを最初から開いておく等】

無料ワードプレステーマ「マテリアル」のカスタマイズ方法を載せています(更新日を表示、スマホのグローバルメニューを最初から開いておく、カテゴリーとタグを記事下に表示、サイト説明文にリンクを貼る、カテゴリーごとの記事の表示をフッターに移動する)。
Read More
ブログを書く時に使える便利なWebサービス【リンクカード、画像軽量化など】

ブログを書く時に使える便利なWebサービス【リンクカード、画像軽量化など】

リンクカード「Embedly」、サムネイルにリンク「HeartRails Capture」、GIFアニメ作成「Animated GIF Maker」、画像を軽量化「TinyPNG」、SVG画像に変換「ZorroSVG」、漫画のコマを使用できる「マンガルー」を紹介しています。
Read More
【WordPress】「悪意あるログイン試行」への対策【.htaccess】

【WordPress】「悪意あるログイン試行」への対策【.htaccess】

WordPressの「悪意あるログイン試行」への数が急増したので、.htaccessを使い、ログインページなど特定のファイルへの海外からのアクセスを制限することにしました。その方法や問題点を書いています。
Read More
【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

画像が横にスクロールするjQuery製のスライドショーを紹介しています。自動で繰り返し、それぞれの画像にリンクを貼ることが可能です。WordPress用とそれ以外用のコードを載せています。
Read More
WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをプラグインでAMPに対応させ(有効化するだけなので簡単)、そのページに広告(アドセンスの表示・非表示の切り替えが可)、SNSシェアボタン、関連記事などを表示する方法と、AMP用のアナリティクスのコードの貼り方、AMPでエラーが出た時の対処法について書いています。
Read More
GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】

GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】

GitHub GistのEmbedにより、プラグインやライブラリを使わずにブログに手軽にコードを貼り付ける方法や、注意点、表示のカスタマイズをするCSSなどを載せています。
Read More
CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

CSSで作るスライドショー(幅と高さを固定、自動で繰り返す、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンクを貼ることができる)のコードを載せています。JavaScriptやjQueryは使いません。
Read More
【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

ワードプレスのプラグイン「Jetpack」の機能「関連投稿」を任意の場所に表示+表示する記事数を変更するカスタマイズを載せています。
Read More
WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】

WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】

ワードプレスの無料テーマ(テンプレート)で、おすすめの「個性的なテーマ」「初心者向けのテーマ」「カスタマイズに向いているテーマ」を2つずつ紹介しています。いずれも日本語、レスポンシブデザイン対応、SEOに強いといわれているテーマです。
Read More
2017年使用中のJetpackの機能【WordPressプラグイン】

2017年使用中のJetpackの機能【WordPressプラグイン】

WordPressの公式プラグイン詰め合わせ「Jetpack」の内で使用中の機能(Markdown、関連投稿、サイト統計情報、コンタクトフォーム、購読、プロテクト、パブリサイズ、サイトマップ、拡張配信、シングルサインオン)を紹介しています。
Read More
【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

WordPressのプラグイン「SNS Count Cache」が有効化できなかったのですが、PHPのバージョンを変更した所、無事有効化することができました。Twtterのシェア数の表示もできるようになりました。
Read More
【WordPress】Jetpack Markdownを使う時の注意点2つ

【WordPress】Jetpack Markdownを使う時の注意点2つ

Jetpack Markdown(ジェットパック マークダウン)を使おうとした所、困ったことが2つ起きました(見出しが出ない+段落が効かない)。その解決方法を書いています。
Read More
レトロな雰囲気のフリーフォント おすすめ4個【商用無料で漢字も使える】

レトロな雰囲気のフリーフォント おすすめ4個【商用無料で漢字も使える】

「国鉄方向幕書体」「機械彫刻用標準書体フォント」「うつくし明朝体」「しねきゃぷしょん」「コーポレート・ロゴ」というレトロな雰囲気のフリーフォントを紹介しています。見本のバナーもあります。
Read More
【2017年】おすすめのWordPressプラグイン【無料、定番多め24個】

【2017年】おすすめのWordPressプラグイン【無料、定番多め24個】

実際に使ってみて、記事が書きやすくなったり、管理がしやすくなったWordPress(ワードプレス)のプラグインを紹介しています。定番のものが多めです(スパム対策やバックアップ、リンク切れチェック、公式プラグイン「Jetpack」など)。
Read More