エンターテイナー・アモルのカレイドスコープ

AWsの代表、エンターテイナーであるメリーさんのアモルが万華鏡の如く感じたことを書き綴る

【ブログ】まさか記事末尾のマシュマロへのリンクに気付いてくれてない?

 こんばんは、アモルです。ところでこの挨拶っていつも悩みます。今記事書いてるのは夜なのでこんばんはなのですが、多分今晩中には書き上がらないから、描き上がる頃にはこんにちは、だし、そもそも、読むのがいつになるか、誰にも分かりませんしね。

 

 

 さて、本題に入っていきます。突然ですが、このブログが読者様からのコメントを受け付けているのはご存知ですか?

 実はこのブログ自体のコメント機能以外にもコメントを受け付けているんです。

f:id:nagaeryuuiti:20190903110505j:image

 このスクショはいつも記事の末尾に挿入されているパーツです。

 ツイッターフェイスブックのシェアボタンの他に、私のマシュマロへのリンクがある事が分かると思います。

 が、どうも、このリンクを踏んでくださった方が今の所いらっしゃらない。まぁ、そもそもコメントするって行為自体がハードル高いんで、そんなものなのかもしれせんが、もしや、ボタンの下に文字がある事で、それをボタンと認識してもらえてないのでは、と思いました。

 そもそもボタンじゃないですもんね。

 

 ところで、小学生の頃にHTMLでWebページを一度作って以来ご無沙汰だったので全然知らなかったんですが、最近のCSSってすごいですね。それ単体でビジュアルを大きく変更出来るみたいです。

A-AWs ベーシック

 このリンク先は私が代表を務めるAWsが公開してるTRPGシステム「A-AWs*1のページなのですが、色々と見栄えが良くなっています。てっきりjqueryとかJavaScriptとか使ってるのだと思ってたのですが、CSSだけ、という事で、凄い。

 

 まぁ私が何も知らなすぎるだけなんですけどね。そんなわけで色々調べていると、なかなか面白そうな記事を見つけました。

CSSで作る!押したくなるボタンデザイン100(Web用)

 御誂えたように、今の目的にぴったりです。これがあれば、マシュマロへのリンクをボタンに出来ます、ヤッタネ!

 

マシュマロ

 

 というわけでやってみたらこんな感じになりました。良いですね。

 早速ブログ末尾にも反映します。

 

 って、あれれ? スマホで確認してみると、ボタンがないぞ?

 調べてみるとこんな記事に行き着きました。

はてなブログのCSSカスタマイズ【スマホ対応版】 – Jill Tone Blog

 なるほど、はてなブログの「デザインCSS」はスマートフォンに対応してないようですね。この記事の経験に従い、記事上に<style>タグをつけてCSSを反映させます。すると

 

f:id:nagaeryuuiti:20190903120048j:image

 

 出来たー! これで安心ですね。皆さん、ぜひこのボタンを押してください!

 

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

 

 



*1:Aの魔法陣』をベースにサプリメントとして公開してる建前なのでシステムとまでは厳密には言えませんが