【Blogブランディング】〜サイドバーに画像を入れる方法①

お役立ちスマホツール動画解説

無料アプリで、オシャレな文字入れ

デザイン風アレンジで、お手軽ロゴ制作

スマホで簡単作成 facebook バナー

プロ愛用編集ソフトをスマホで誰でも

ブランディング＆ビジネス構築

上質で洗練された【名刺】オーダーメイド

【ブログヘッダーバナー】カスタマイズ
　　┣ LINE＠・メルマガバナー制作

HP制作ワードプレスサポート

個人事業主の仕事の負担軽減！

　賢い相棒に生まれ変わる【PC時短設定】

ブランディングできるブログにしよう

　┣ アメブロサイドバーを整えよう ①

洗練ブランディングプロデューサー

木嶋菜穂子です

今回は、お問い合わせの多い

アメブロカスタマイズについて、

ブログで、ブランディングをしていくために

ぜひ活用したいのが、サイドの部分。

以下、ご説明しますね！

サイドメニューって、どこに書くの？

サイドは、

「フリースペース編集」で作成します。

マイページの左のバー　

一番下の「設定・管理」で

「フリースペース編集」をクリック

で、ここに、

html 表示で書いていきます。

（ブログ記事の下書きで書き、

　 htmlをコピペしたら楽です！）

最近新しくなって、

文字の大きさや色、リンクは

視覚的にさわれるようになってます＾＾

↓

はりたい画像の適切な大きさを確認する

まず。

今、ブログは、

２カラムですか？

３カラムですか？

それによって、

はれる画像の横幅も変わります。

２カラムの場合

サイドバーのサイズは300px。

３カラムの場合

広い方が300pxで、狭い方が180px。

で、画像をはるなら、

広い方が見やすいので

基本、横幅は 300px におさめます。

画像をどうやってはるの？

画像は、

一度アップされた画像しかはれません。

なので、

まだ一度もブログに載せたことがない画像を、

サイドに貼りたい場合

仮に昔の日付で（2017.1.1とか）

サイド用の画像をアップしておきます。

そして、

載せたい画像がある記事を「編集」で開き、

画像がある部分の html を見ます

例えば、

こちらの画像を載せたい場合、

（通常表示）

（html表示）

（画像を探す場合には、

　前後の文章で探すと良いです＾＾）

画像のhtml を抜き出して見ると、これ。

<img~ > の部分が画像そのものになります。

<a ＞は、リンク。（リンクは、次に説明します）

↓

</a>

この画像は、

横幅（width）＝ "500" 　

になっているので、

サイドに入るように、

横幅を300 に修正します

縦幅（height）は、自動で揃うので、

height="202"　ごと消しておきましょう

　　↓

</a>

これで、

はる画像の準備ができました。

続いて、<a>〜のリンクの貼り方を

次に説明しますね！

オシャレに発信するためのエッセンス

無料メルマガご登録はこちら

上質で洗練された【名刺】オーダー

毎月満枠！７月残1枠！

LINE@ご登録・特典

いいねが沢山つく写真になる！

ワンポイントアドバイス

ワンパターンになってしまう写真
もっとオシャレに見せたい写真
自撮りで雰囲気ってどうやるの？

LINE登録後、写真を添付して、

無料アドバイスGET♡

携帯でご覧の方は🔻ワンクリックで登録

【Blogブランディング】〜サイドバーに 画像を入れる方法①

【Blogブランディング】〜サイドバーに画像を入れる方法①