アメブロのサイドバーに、画像や文字を入れてリンクを付ける方法 | カタチの無いスキルを、あなたらしいコンテンツへ/セラピスト·カウンセラー·講師のためのオンライン化サポート

カタチの無いスキルを、あなたらしいコンテンツへ/セラピスト·カウンセラー·講師のためのオンライン化サポート

資格や肩書ではなく‟あなたがいい‟と選ばれる、オンラインを活用した、スモールビジネス・クリエイティブサポート。
デジタル苦手、文章がまとまらない、時間がない。そんな方の知識や経験をオリジナルコンテンツにまとめ、コストを抑えた起業を提案します。

こんにちは!

あなたの思いをとことん引き出し視覚化、ファンを増やすサポーター・杉山まいこです。

 

 

アメブロのサイドのフリースペース、活用していますか?

私のブログで言うと右側のプロフィールが入っているところですね。

 

あ

 

 

設定により、左右どちらもある方、片方だけの方とあるのでチェックしてみてください。

サイドを変えるならデザインの設定方法のカラムから

 

今日はこのサイドバーの部分を活用する方法を書いていきますね!

 

まず、この部分はパソコンからしか見ることができません!

※タブレットは見れます

 

ヘッダーとヘッダー下にあるグローバルメニューと同じですね。

では、早速作りましょう♪

 

 

◆アメブロサイドスバーの設定方法

設定・管理をクリックします。

配置設定へ(サイドバーの設定の部分、右下)

 

あ

 

この設定で、「フリースペース」使用する機能に移動します。

並び順が表示順なので、好みにカスタマイズしましょう。

 

移動したい部分を左クリックしながら移動するだけです。

 

あ

 

次に、サイドバーに入れるものを作ります。

そう、作ります!

 

通常の記事を書くように作成するのです。

 

ブログを書くサイドバーに入れたいものを作成しましょう。

 

サイドバーには

・画像

・文字

・リンク

など何でも入れれます。

 

 

 

ただし、サイズがあります。

2カラムの場合は幅は300px

3カラムの場合は狭い方が180pxです。

 

どちらに入れるかによって変わるので注意してくださいね。

 

私の場合は2カラムなので300pxです。

ですので写真の幅も300に変更します。

 

そして、写真をクリックしてどこかのリンクに飛ぶようにしたい場合

ブログを書く時と同じ。

 

画像を選択した状態で右クリック。

 

あ

あ

 

リンクURLを入れておきましょう。

 

サイドバーに入れたいものが完成したら、

ブログ記事の一番下にあるHTML表示をクリックします。

 

すると英語やら数字の表示に変わるので、

それを全てコピーします。

 

そして、設定・管理→フリースペース編集をクリックして

そこに張り付けましょう。

 

あ

 

前回、アメブロの文字を見やすくしようで、張り付けたのと同じところです。

 

前回の貼り付けの下でOKです。

1行あけておくと分かりやすいので、1行あけて張り付けています。

 

保存をクリックする前に、きちんと出来ているかどうか、プレビューで確認しましょう。

 

あ

 

OKなら、保存をクリックで終了です。

 

 

◆アメブロサイドバー設置まとめ

①ブログを書くように表示したいものを作成

②HTMLで表示してコピー

③フリースペース編集にペースト

 

以上です!

かんたんですよ。

 

 

私はこの貼り付けのあと、ちょっと作り直して、こんなふうに完成しましたー!

 

アメブロカスタマイズ

 

 

ちなみに、こんな感じに、ボタン風につくれば、

ヘッダーの下にあるグローバルメニューの代わりにも使えますよ。

 

アメブロカスタマイズ

 

ぜひぜひお試しくださいね。

 

 

 

 

はなうたデザイン