±0+α 〜Live lightly〜

少ないもので身軽に暮らす、ミニマルライフ

【超初心者の覚書】ボタンは見た目が良くなったかな?

ブログの設定を見直したり、ブログ内のバーツを整える作業をしていました。より見やすく、自分の伝えたいことをシンプルに伝えられるように改善していくようにしました。

 

初歩的なことができていまくて、使っているデザインテーマ「soboku」を活かしきれていませんでした。主にモバイル用です。
レスポンシブデザインモードをオンにしていないとテーマが反映されていない状態になってしまうのです。知らなかったとはいえ勿体無いことをしていました。

 

シェアボタンを変えてみました。
デザインがシンプルで自分好みだったので、そのまま利用させていただきました。はてなブログのデザインテーマを作った方なのでご存知な方も多いと思います。SHIROMAGのSHIROMAさんです。

www.notitle-weblog.com

ちゃんと手順通りに進めれば、私のような超初心者にもできました。

初期設定のシェアボタンは大きさがばらばらで見た目に美しくはないですよね。これがすっきりとしただけでも、なんだか上等になった気がします。

 

 ショッピングリンクボタンをわかりやすくしていました。
といっても、またもや詳しい方のサイトをほぼ丸写しです。

general21.com

スタイルCSSがPC用とモバイル用とわかりやすく解説してありました。希望通り、すっきりとカエレバのショップリンクボタン化ができました。

「コピペするだけで大丈夫」は超初心者にとっては怖いキーワードです。まずコピーする範囲が分からなくで躓き、どこに貼り付けていいか分からず躓き、うまく動かないとなったら今まで貼り付けてあったものがどの範囲のものだったかが分からないというトリプルコンボでやられます。

ちょっと賢くなってコメントを入れる方法が分かってからは、貼り付けた範囲がわかるようになりました。

/*ここにコメントを入れてもCSSに影響しません*/

詳しく知りたい方はこちらをどうぞ。www.htmq.com


変えたところは、Yahooショピングがボタンとしてなかったので追加した事、ボタンの色です。正直目立たないところですが…

Yahooのショッピングボタンを作るCSSはshopkinkのあるところへ次の構文を加えます。

.shoplinkyahoo a ,

作った方のショップのボタンの背景の色が自分の持っているイメージと違ったので変えてみました。構文から色指定の部分だけ抜き出して書いています。

.shoplinkamazon a {
    background: #fca944;
}
.shoplinkrakuten a {
    background: #bc3330;
}
.shoplinkyahoo a {
    background: #ff2626;
}

後は選択しようとカーソルが近づくと色が変わる設定(a:hover)になっているのですが、柔らかい色に変更しました。

background: #dcdcdc

「選択」するというと色が濃くなるイメージがあると思うのですが、ちょっと自分のブログのイメージでは初期設定の色が合いません。雛形としてコピさせていただけるっことに感謝しつつ、変更させていただきます。

www.colordic.org

 この辺りの変更は多少自己満足が入っています。

20年くらい前にHTMLとCSSはかじっていましたが、元々自分でスラスラと組めるほどではないので、今回も解読している感じでした。

 

ここに書いておかないと、多分同じことが一週間後にできないと思います。怪しい記憶力です。

ブログを始めなかったら、まずこういう作業はしなかったので、とてもいい頭の運動になります。分からないなりに出来ると楽しいですしね。

 

 

にほんブログ村 ライフスタイルブログ ミニマリストへ
にほんブログ村