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表示はすごく複雑になりますから、編集は何も書いてない時にしてくださいね。
以上は不器用な素人のやり方でした。