【突発的ハンドメイド作家無料コンサル!その4】PCの基本的な知識を得よう!1回目 | Lomi-Romi

Lomi-Romi

日本一萌える!天然石とハンドメイド☆

こんにちは!

ハンドメイドブログランキングへの応援をいただきましたのでまた書かせていただきます!

そういえばスマホ・・・まだ工具が届きませんうああん
土曜日に頼んだのに~アマゾーン早くして><

え~なんか今日のテーマつまらなそう!

とか思っちゃだめですよ!

そして、すでに充分な知識をお持ちの方には退屈な内容かもしれませんが
委託などをしていると分からない用語があったり、わからないと委託参加ができない
ことなどもありますので今日は豆知識的な、よく聞かれる疑問にお答えします!


☆リンクについての色々なこと☆
リンクとは→リンク【link】

★画像URLって?、直リンクて何??

まず、画像リンクを貼るには「画像URL」を知る必要があります。
これは自分のブログにアップロードした時に出来るものなので、各自違います。
ちなみに、私のブログにアップロードした画像URLでリンクを作成したものを他の方のブログ、またはHPに貼ることを直リンクといいます。
アメブロでは特に禁止されていませんが、個人のHPではほとんどが禁止されています。

それはリンクの画像を参照するのに、直リンクした相手のサーバーを経由するため負荷が多くかかり場合によってはHPが閲覧できなくなったりしてしまう為です。

大きなイベントなどでは自分から直リンクのURLを配っているところもあります。

たとえばクリエイターマーケットのページを見てみましょう
↓↓
クリマPRページ

リンク先を下にスクロールしてみていただくと
↓このように「リンクを貼るためのソース」が書かれています。
$Lomi-Romi

これをこのままコピーして貼ると
こうなります。↓
つくるひとの祭典 中部地区最大級のアート&デザイン&手作り GALLERY & MARKET

これが直リンクになります。直リンクなのでクリマ側でこの画像を変更すればこちらの画像も勝手に変更されますし、クリマ側で画像を削除してしまえばこちらで見た時は×の表示になります。

このようにサイト側で配っている場合は良いですがそうでない場合直リンクは禁止というのがインターネットのマナーとなっています。

さて、画像リンクの作り方をこれまでになく凄く丁寧に説明していきます。
これかくのに3時間くらいかかっちゃったんでもう2度と書かないと思います。
永久保存版ということで・・・

ちなみに私はIEを使っていないんですがたぶん初心者の方はIEの人が多いんじゃないかと思ってIEで説明します。他のブラウザの方はなんとなく応用してください(←おい)
スクショ撮りまくったのですごく時間かかりました。
読むとあっという間なのに・・・少しでも需要があったら嬉しいんですが・・><


このブログのTOPにあるデザフェス出展用のバナーを貼ってみましょう

リンクタグが簡単に作れるサイトがありますので
このサイト→☆リンクタグ作成スクリプト☆
を開いておいてください。これはとても便利なので画像リンクの作り方が分かる人でも使い勝手がいいですよ!


まずはTOPにあるバナー300pxを自分のPCにダウンロードしてみましょう(300pxは画像の横幅のことです。たとえばこのブログは3カラムで構成されていますが本文が入る中央部分の横幅は420pxですが画像が入る幅は370pxくらいです)なので自分のブログの幅より大きいものははみ出します)


バナーの上で右クリックして画像を保存してください。
とりあえずデスクトップに保存しましょう
$Lomi-Romi


次に自分のブログに画像をアップロードします。
画像ボタンをクリックして先ほどデスクトップに保存した画像を参照
アップロードしてください

$Lomi-Romi

アップロードした画像をクリックすると
↓このような画面になりますので、この画像の上で右クリックして
プロパティというのを見てください。
$Lomi-Romi

プロパティの画面↓にアドレス(URL)というのがあります。これが画像URLです。これをコピーしてください。
ちゃんとコピーできてないと画像がでてきませんので注意して下さいね。

$Lomi-Romi


つぎに先ほど紹介した
☆リンクタグ作成スクリプト☆を開いて
↓バナーURLというところに【画像URL】を貼りつけてください。

$Lomi-Romi


次にリンクする先のアドレスですが今回は
デザインフェスタ・クリエイターマーケット出展詳細!【メンバー発表】

という記事にリンクしますのでURLをコピーします
→ http://ameblo.jp/hibikihoshino/entry-11512106256.html

↓そしてリンク先URLというところに貼りつけて下さい

$Lomi-Romi

リンクタグというボタンを押すと
↓のような画面になりますのでテキストエリアの中を全部コピーしてください

$Lomi-Romi


最後にブログを書くのところをHTML表示にして貼り付けます。

メッセージボードに貼る時もHTMLタグを表示にしてから
貼りつけて下さい。

IEはそのようにしないと貼れないみたいですね。
ちなみにブラウザがクロームだとそのまま貼るだけになっています。(HTML表示というボタンはないです)
IEは全面的に新エディタに移行してるでいでしょうかね?
私はブラウザはグーグルクロームかファイヤーフォックスを使っていますが
こちらだと、普通にタグ表示になっています。

新エディタだと画像を貼ってそこにリンクするとかできるみたいなんですが
タグが多くなって文字数制限が出たりしませんか?
後何故か、画像が変な方向に寄ったりします。
アメブロの不便なところですね><

ライブドアなんかだとそういう現象はおこらないです。
実は優れてるブログシステムです。ライブドア。やるなほりえもんめ。

そんな感じで画像リンクは貼れましたでしょうか?

ちなみに、途中でちらっと出てきた画像の大きさについてもちょっとだけ説明しておきます。

皆さんがみてるこのブログの一番上のイラスト
Kathmiさんが描いてくれたものですがこの画像は横幅が800pxあります。

ブログのテンプレートの一番上のタイトルバナーの幅が800pxなのであらかじめそのサイズに合わせて画像を作り、ブログに使いました。ですので画像が横に伸びたりしていませんが
サイズの合わないものをいれたりすると画像が横に伸びてしまうこともあるようです。

そして左側のサイドバーですがこれは
180pxになっています。ここに入れるバナーははみ出さないように160pxで作っています。

このように画像を綺麗にブログ内に収めるにはサイズを考えて画像を作成することが大事です。サムネイルですといつもブログ上で小さい画像しか表示できませんよね?

最初から横幅を350PXくらいの写真にしておけば(オリジナルで表示)または新エディタですと(小さいサイズで貼りつける)のチェックを外すことで画面にあった大きさの画像をはることができます。

ブログを見た時、大きな画像が貼ってある方が見やすいのでぜひ実践してみてくだい。

画像加工のしかた・サイズの変更の仕方・綺麗な写真の撮り方などはまた次の機会に~

役に立ったなあと思いました次の更新のやる気に繋がりますので
ハンドメイドブログランキング応援してください!
チャリティー企画はじめました!



ランキングへご協力お願いします!
した


にほんブログ村

赤ちゃんサミットした
$Lomi-Romi
FC2 Blog Ranking
いつもありがとうございます!!

○●○●○●○●○●お知らせ○●○●○●○●○●


●デザインフェスタ●
東京ビックサイト
5月18日19日両日出展
International Art Event Design Festa

●クリエイターマーケット●
ポートメッセ名古屋
6月29日30日
つくるひとの祭典 中部地区最大級のアート&デザイン&手作り GALLERY & MARKET