ブログサービスの、
ここで記事を上げている…はてなブログ、アメーバブログ、ムラゴンブログについて。
ひと口に画像リンクを張ると言っても、
そのやり方を記述してないな・・・と思い。
また画像リンクのURLについても、
比較してみたいと思います。
画像は、
はてなフォトライフって場所に上がり。
各投稿欄の＋写真を投稿
ボタンからクリックして上げることもできるし、
あらかじめ画像をフォトライフに上げてから、張っつけることもできます。
ただ『はてなブログカスタマイズガイド』本で、両者で上げる画像の容量に違いがあると読んだので。
自身では
はてなフォトライフへ事前に上げてから、記事で張りつけるようにしてます。
フォトライフへは、
記事投稿の①一番上のフォトアイコンをクリックして画像モードにし、
②をクリックするとページにいけます。
黒いヘッダーバーにある“アップロード”でも、
下にある“アップロード”でも、
どちらでも同じページにいきますんで。好きなほうから画像アップできます。
フォルダを指定して画像を上げるときも、上下どちらかのアップロードで、そのフォルダ内に画像がアップされます。
画面の右側でフォルダを新規に作り、
そこへ画像を上げることもできますし。
まずは画像を上げてみて、
あとからフォルダを作って整理することもできる。
アップロードをクリックすると、
そこが画像を上げる画面となります。
広い範囲のどこででもクリックし、
PCに入ってる画像を指定して張りつけてください。
画像の上げかたは以上です。
例えば、
スライダー画像で上げる一例など…CSSで画像設定するような場合、
張りたい画像の上で右クリック ⇨
画像リンクをコピーをクリック。
するとURLはこんな感じ ⇩
スライダー画像では、このパターンなリンクで張ってます。
https://cdn-ak.f.st-hatena.com/images/fotolife/s/*****.jpg
もう一つ、
この中から選んだ画像をクリックして、1枚出すとします。
で、この上で右クリックし
画像リンクをコピーすると…アドレスはこんななります。
https://cdn-ak.f.st-hatena.com/images/fotolife/s/*****.png
Jpgとpng…なにが違うんだろ、
たぶん読み込むサイズが違うと思われる…
試しておらず、深くはわからないんですが💧
ここも画像は画像管理で上げることできるので、事前に上げてから張るようにしてます。
設定・管理 ⇨ 画像管理から入り。
ファイルの選択をクリックし、
PCに入ってる画像などを選択してアップロードします。
画像をもっと追加するを押すと、一度に5つまで上げられるようです。
一覧が並ぶココで、
張りたい画像上で右クリック ⇨
画像リンクをコピーを選択し、CSSなどにペーストする。
URLはこんな感じ
https://stat.ameba.jp/user_images/*****.png?car=110
ヘッダー画像や、
フリースペースのアイコンをこのやり方で取得してます。
ただ、pngのうしろに
見慣れぬモノがついており…“?car=110”を外した状態でペーストします。
もう一つ…はてなと同じく、
選んだ画像をクリックして1枚出し。
この上で右クリックし、
画像リンクをコピーすると…アドレスはこんななります ⇩
https://stat.ameba.jp/user_images/*****.jpg
jpgの後ろはなにもなく。
おそらくこのままで張れるだろうと思います。
アメブロでもjpgとpng…
これにもどんな違いが？不明なままです。
ムラゴンには画像専用の項目がありません。
記事投稿の画像アイコンに移り、
画像アップロードから直接アップし、
記事へ張るときもココから選ぶやり方です。
ワンクリックで画像を張れて、
便利といえば便利ですが、画像はムラゴン側にひとまとめ…って感じでしょか😅
この一覧画像の上で右クリック ⇨ 画像リンクをコピーすると、URLはこんな感じです。
https://public.muragon.com/*****/resize/184x184.jpg?dummy=*****
jpgの後ろになにやら付いてて不明。
184×184ってことは、
単にココに載るサイズが反映されてるだけですね、、
でも記事に張り付けると、
しかるべきサイズで表示されるし、そこから好きなサイズに変更もできるようになってます。
ではヘッダー画像などは、どう入れるかというと…
その該当画像にマウスを置き、
右クリックで“画像リンクをコピー”します（ここまでは同じ）。
そのURLアドレスを、CSSの画像設定欄にペーストするわけです。
画像アドレスは、
記事画像と同じく、例えばこんな感じになると思います ⇩
https://public.muragon.com/**********/resize/184x184.png?dummy=*****
ですがこのまま貼り付けても、
鮮明な背景にはなりません。表示はされますが、画像がボヤけちゃいます。
なので、
ここにはムラゴンに上げる前のヘッダー画像のサイズを、入力するようにしてください。例えばこんな感じで…
https://public.muragon.com/**********/resize/1100x800.png?dummy=*****
加えて、
うしろについた“?dummy=*****”は削除して入力ください。
CSSへの入力こんな感じです。
background-image: url("https://public.muragon.com/**********/resize/1100x800.png");
これでヘッダー画像に
だいたい、、（完璧じゃないですが💧）反映されてると思います。
あるいは今さらながら、、
ヘッダー画像に関しては、アップできる場所がムラゴンブログにありました。
それはデザイン変更からヘッダを開き、
その中にあるファイルの選択から画像をアップロードするやり方。
そこで上げた該当画像にマウスを置き、
右クリックで“画像リンクをコピー”（ここまでも同じ）。
その画像URLアドレスを、
CSSの画像設定欄にペーストすることで反映します。
ヘッダ項目から上げる画像の反映は、
上で記したような修正はいらず、そのままで利用できるコードなようです。
background-image: url("https://public.muragon.com/**********.png");
はてなとアメブロに関して、
画像のコピペによっては、URLや容量が違うように思えます。
という…結論なんだかどうだか、、
な内容ですが、そんな違いになってます。
コメント