ホーム > サポートメニュー > ユーザー助け合い掲示板

質問内容・回答一覧ツリー

Q. ブログに似顔絵を載せる方法について - 投稿者:間浜行夫(2017年05月30日 19:29) No.7569  
Q. ブログに似顔絵を載せる方法について
ブログの右のサイドバー部分に似顔絵を載せる方法はありますか。
自分のブログに載せるのなら、カレンダーを下にずらして空白を作り、空いた部分に似顔絵を載せる予定です。

お忙しい所申し訳ありませんが、教えていただければ助かります。
  • 記事ID:No.7569
  • 投稿日時:2017年05月30日 19:29 (2017年06月01日 18:34更新)

回答一覧(返信数 4 件)

投稿者:3steps A. Re: ブログに似顔絵を載せる方法について

仮記事を作成し、画像をアップロードして埋め込みます

記事のプレビューでアップロードした画像を確認します。
Windowsの場合は右クリックし、画像のURLをコピーしておきます。
ここでメモ帳などにURLを一時的に貼り付けておくと、クリップボードが更新されてもURLが分かります。
(ブラウザによっては「画像のURLをコピー」などの名称に変わる場合があります)
iOSの場合は左クリック長押し…だったかなぁ


テンプレートの編集画面に移ります

HTMLの編集画面で挿入したい位置に以下のコードを貼り付けます。
画像のURL部分は先ほどコピーしたURLを、
幅(width)と高さ(height)はお好みの数値に変えてください。
縦横比が崩れるのを防ぐには、本来の幅・高さの最小公約数を等倍します。

ご利用中のテンプレートで表示可能な最大幅は200pxなので、これを超えない数値にした方がいいでしょう。
たとえば800x600ピクセルの画像であれば、200x150ピクセルにすれば縦横比は崩れません。

※可能であれば、あらかじめ表示させるサイズにリサイズしておくと綺麗に表示されます。
800x600でアップロードして表示サイズを200x150にするよりも
200x150でアップロードして表示サイズも200x150にした方が綺麗ということです


カレンダーのすぐ上に挿入するのであれば、<div id="side">直下に以下のコードを挿入します。

<h3>似顔絵</h3>
<div class="sideContents">
<img src="画像のURL" width="幅" height="高さ" alt="自画像" />
</div>

実際にブログを確認して意図したとおりの表示ができているかを確認します。

確認できたら仮記事を削除しておきます。

※アップロードした画像も消してしまった場合は、この回答の最初の手順から(画像のアップロードから)やり直してください。

  • 投稿日時:2017年05月31日 14:46
投稿者:3steps A. Re: Re: ブログに似顔絵を載せる方法について

最小公約数ではなく最大公約数ですね
そして最大公約数でもなく、公約数の間違いでした
失礼しました

× 縦横比が崩れるのを防ぐには、本来の幅・高さの最小公約数を等倍します。

○ 縦横比が崩れるのを防ぐには、本来の幅・高さの公約数を等倍します。

  • 投稿日時:2017年05月31日 18:34
投稿者:間浜行夫 A. Re: Re: ブログに似顔絵を載せる方法について

ご丁寧な対応、うれしく思います。
ありがとうございました!

投稿者:間浜行夫 A. Re: ブログに似顔絵を載せる方法について

お忙しい所ご回答いただき、感謝しています。
ありがとうございました!