アメブロ CSS 編集用デザインで アメブロを遊ぼう!①リンクを動かす

アメブロには多彩なデザインが最初から用意されていますが、
編集用デザインを利用する事で更に自分好みのデザインに編集して楽しむ事ができます。

もしあなたがアーティストならブログデザインは腕(センス)の見せどころですし、
もしあなたが経営者なら美しいデザインでお客様を魅了するチャンスです。

 

どちらにせよ、
見やすい・快適なブログ制作は読者さんを楽しませる事が出来るポイントです。

 

このブログはアメーバキング2が気になる方の為にレビューサイトとして作ったものでしたが、
せっかくアメブロを楽しもうと決めたのですから、

アメブロをより楽しめる方法も紹介しちゃいますヽ(*´∀`)ノ

 

その中でも今回は他サイトや他ページへ移動する際の
「リンクを動かす方法」についてお話しましょう。

利用するデザインはCSS編集用デザイン

アメブロでは多種多様なデザインから自分好みのデザインを選ぶことができますが、

今回は真っ白なデザイン「CSS編集用デザイン」を選びましょう。

デザイン変更ではCSS編集用デザインを選ぼう!

 

自分でCSS編集するとなるとハードルが高く感じてしまう方も多いですが、

実はそれほど難しい事ではありません。

 

難しくないだけでなく、より自分の思い通りのデザインのブログが出来るので是非挑戦してみましょう!!

 

早速CSSの編集を行おう!!

早速CSSの編集を選んで自分好みのデザインを作りましょう

早速デザイン変更項目の適用中のデザイン:CSS編集用デザインの下にあるCSSの編集をクリックしてみましょう。

ブログデザインのCSSの編集画面に移動しました

編集画面に移動しましたね。

 

早速CSSを入力してリンクを動かしてみよう!!

 

編集画面の下の方に移動すると「保存」ボタンが見えてくるんですが、そのすぐ上にある枠の中に文字を入力する事でリンクを動かせるようになります。

これを入力するとリンクが動くようになりますよ

↑この画像のように

/*その他、拡張があれば記述*/
の下に入力しましょう。

 

入力する文字は


/*↓これを入力するとリンクが動くようになります*/
a:hover{position:relative; top:2px;left:2px;}


です。

 

コピペで構いませんから入力したら「保存」をクリックしてください。

 

アメブロのリンクは動くようになりましたが、これは欠点ですね。

リンクボタン

リンク先のタイトル

リンク先の説明文

ほらね?

動くようになったでしょ?

ただしこのプログラムの欠点は「>>次へ」が大きく動いてしまうので不便だという事です。
ヽ(´Д`;)ノ

という事でリンクを動かしたいという気持ちを抑えて、リンクの色が変化するように設定した方が良いかもしれませんよね?

 

次の記事では「リンクの色が変化する」為のCSS編集のお話をします。


アメーバキング2について