おしゃれ好きでパソコン好きのアラサー女子
ゆいりんです♡
関西人らしいちょっと派手めな服が好き♡
カラー、柄物、インポートが多めです♡
コーディネート、パソコン、美容、
好きなことについて発信します(^^♪
(プロフィールはこちら)⇐作成中
今回はアメブロのサイドメニューについて書いていきます。
- サイドバーにリンクを追加
- サイドバーの配置設定
- 「ブログの記事を書く」から枠と画像を作る
- サイドバーに画像リンクを追加しよう
- 画像のサイズを合わせよう
まとめ
テキストリンクも同じ♡
① サイドバーの配置設定
まずは、フリースペース編集をする前に
配置設定にフリースペースを追加しましょう。
ホーム➔ブログ管理➔設定・管理➔配置設定
配置設定の使用しない機能から
使用する機能にフリースペースを
指でスライドさせます。(ドラッグ＆ドロップ)
フリースペースを画像のように
使用する機能に配置できれば
設定完了です(^^♪
次のステップへ♡
② いつも通り「ブログの記事を書く」から枠と画像を作ろう
配置設定を済ませたら
ブログの記事を書くから
囲み枠の中に画像を挿入して
画像のリンクを作成します。
⇧⇧⇧
私はこの画像枠を
サイドバーに追加していきます。
HTMLで囲み枠を作り
その中に画像を追加したら
HTML編集に切り替えて
タグをコピーします。
画像リンクが二つあるので
<a>タグの画像リンクを削除します。
※一つ目のhttps://～.jpgのほうです。
③ サイドバーに画像を追加
コピーしたHTMLタグがこちら。⇩⇩⇩
<div style="padding:15px;border: 3px solid rgb(255, 206, 205);border-radius:10px;"><a href="飛ばしたいリンク先"><img alt="" height="420" src="https://stat.ameba.jp/user_images/20200502/01/coco-yuirin/ce/f7/j/o1080108014752130975.jpg" width="420"></a></div>
黄色のマーカー…囲み枠のHTMLタグ
※枠がいらない方は黄色のマーカー以外のHTMLをコピーしてください。
ピンクのマーカー…リンクのHTMLタグ
パープルのマーカー…画像のタグ
上記のタグをコピーしてフリースペース編集に
そのまま貼り付けると、こうなります。
⇩⇩⇩
サイドメニューに枠と画像が追加されました(^^♪
しかし、画像のサイズが
原寸サイズのままなので
途中でちぎれちゃってますね。
ここから画像のサイズを
設定していきたいと思います。
③ 画像のサイズを合わせる
<div style="padding:15px;border: 3px solid rgb(255, 206, 205);border-radius:10px;"><a href="飛ばしたいリンク先"><img alt="" height="420" src="https://stat.ameba.jp/user_images/20200502/01/coco-yuirin/ce/f7/j/o1080108014752130975.jpg" width="420"></a></div>
⇩ heightとwidthを書き換えます。
<div style="padding:15px;border: 3px solid rgb(255, 206, 205);border-radius:10px;"><a href="飛ばしたいリンク先"><img alt="" height="auto" src="https://stat.ameba.jp/user_images/20200502/01/coco-yuirin/ce/f7/j/o1080108014752130975.jpg" width="100%"></a></div>
height="420" ➔ height="auto"
width="420"➔ width="100%"
変更するとこうなります。⇩⇩⇩
サイドバーに枠も画像も
ぴったり収まりました(^^♪
今回は枠アリにしましたが
画像のリンクだけを貼りたい方は
下記のHTMLタグに
画像URLとリンク先だけ変更してくださいね♡
このURLをフリースペースに貼れば
枠なしの画像リンクが追加できます。
頑張ってわかりやすく
書いたつもりですが伝わったでしょうか？
手順は
- サイドバーの配置設定にフリースペースを設置する
- 「記事を書く」で画像のリンクを作る
- HTML表示にしてコピーしたHTMLをフリースペースに貼る
- 画像のサイズを調整する
- 完成♡
メールでのお問い合わせはこちらからお願いします。
