CSS素人がCSS編集でボタンを作る方法 | 台南在住日記とか

台南在住日記とか

Made in Taiwan, Live in Taiwan.

 Ameba Owndで索引ページを作りました私は詐欺師、お父さんは被害者(ΦωΦ)フフフ…のサイトを作ってから、新しい悩みが生じました。

 

 それは、このブログから気軽にサイトへ行ける方法がわかりません真顔

 

 いろいろと検討してから、やっぱり記事の最後にボタンを入れたほうがわかりやすくて便利だと思いますが、アメブロは画像にリンクを付ける機能がないみたいですね。(あるいは、知らないだけ?うーん

 

 だから、もっともシンプルな方法を使いました

 

 それは「CSS編集」を利用します。お願い

 

 「CSS編集」というのは、いろいろな英文字と数字で構成するもので、一見難しそうですが、実はその英文字と数字の意味がわからなくても、記事を充実することが可能ですよ。

 

 ここでは素人としてのやり方を少し紹介しようと思います。お願い

 

 まずは、作ったボタンです↓↓

 

 クリックしてみてください。

 

 索引サイトお父さんの作品集サイトへ行けるはずですね。

 

 作る方法が簡単です。

 

STEP 1

日頃に使っている画像編集APPで好きなボタンを作って(使ったのはmicrosoftのペイントです)アメブロにアップします

 

STEP 2

アップしたボタンを貼り付けます。

 

STEP 3

HTML表示に切り替えます。

 

STEP 4

この英文字と数字ばかりの怖い画面になりましたね。チーン

それを気にしないで、一番下のスペースで、

 

<a href="リンク"><img src="写真"></a>  を貼り付けます↓↓

 

 

STEP 5

リンクのところに、サイトのアドレスを貼り付け、

写真のところに、写真のアドレスを貼り付けます。

 

上の怖い英文字と数字を覚えていますよね。

写真のアドレスはそこに隠していますよ。キョロキョロ

 

そうです!その

https://stat.ameba.jp/user_images/20210415/12/tidalava/5a/df/p/o0861016414926680772.png

は写真のアドレスですね。

(一気に二枚のボタンを入れたので、下の

https://stat.ameba.jp/user_images/20210415/12/tidalava/71/bc/j/o0861016414926680769.jpg

も写真のアドレスですよ。)

 

基本的には、その「user_images」を含んでいるアドレスなら、アメブロにアップした写真ですね。お願い

 

STEP 6

貼り付けた成果を確認してください。

やっぱり複雑で意味がわからない英文字と数字ばかりですね。ゲロー

 

でも、みなさん!

この複雑で意味がわからない英文字と数字って、自分で編集したCSSコードですよ!ガーン

 

CSSの意味さえ分からない自分が、こんなに複雑なコードを書きましたよ!びっくりびっくりびっくり

 

STEP 7

この偉い自分に拍手してください!ラブ

 

STEP 8

通常表示に戻ってください。

 

STEP 9

通常表示に戻ると、この画面になりました。

 

ボタンですから、サイズを「小」に設定しましょう

 

STEP 10

記事を投稿して、実際に作ったボタンをクリックしてください

サイトに行けたなら成功しました!

 

STEP 11

編集完了のCSSコードをコピーして、wordなど日頃使っているところに保存します

 

 私は毎日LINEで家族と連絡していますから、LINEのノートに保存しましたお願い

 

 これで、これからの記事のHTML表示にこのコードを貼り付けると、ボタンを貼り付けられますね。

 

 そして、素人ならではのポイントですが、編集した記事のHTML表示はすごく複雑になりますから、編集は何も書いてない時にしてくださいね。

 

 以上は不器用な素人のやり方でした。