目安時間7分
【2021/11/9】
私がブログを始めた頃の話ですが 当時は本当にパソコン知識なくて ブログのカスタマイズとか意味不明だし 白地に黒文字のみのような記事ばかりで でも 他の人のサイトはブログを見ると 個人ブログなのに企業サイトのように すごくきれいでおしゃれなものが多くて 「こんなのどうやって作るんだろう？」 ってずっと憧れてました(*‘ω‘ *) で、 その5年後の今ですが 多少はHTMLのコードも読み取れるようになって ＣSS設定もできるようになった。 と言っても やり方をわかりやすく説明してあるサイトを あれこれ探してそのままをマネするだけとか HTMLコードの理解も 「＜○○＞の後ろにはセットで＜/○○＞がくる」 くらいしかわからないけど(笑) でも ブログ内の説明を見て 多少でも理解できている今の自分は 5年前の自分と比らべてみたときに かなり大きな成長をしている。 (…と思ってる(・ω・)） だって 「HTML」って「Hotmail」の略称だと思ってたし (今も「Hotmail」って使われてるのかな(゜゜)？) そんな私が ブログ内で文字に色を付けたり 色枠で文字を囲んだり 内部リンクを貼ったりとかできて ブログ内も彩りをつけることが できるようになってます。 うん。 ブログは見映えばかりに注力すると 無駄に時間が過ぎるとわかっているので そんなにややこしいことはしないし ほどほどにしか色も付けてない。 と言うか… 自分のブログを思い出したら… むしろ もっと強調箇所とか色付けて アピールした方が良いんだろうけど ってくらいシンプル過ぎる記事が多い(;´･ω･) そんなスッキリめのブログなんですが ブログをやり始めた頃から ずっと憧れていたものがあって それが 「リンクボタン」(=ﾟωﾟ) リンクボタンって ブログ内に「詳細はこちら！」とかって ボタンみたいにドーンッて置いてあって そこをクリックしたら ショップのサイトへ移動するものなんだけど 自分のブログでも その「リンクボタン」をずっと使いたいと思いつつ アドセンスブログや楽天ブログでは必要なく 使う機会がなくてそのままになっていた…。 だけど 今年に入って タブレット学習のレビュー記事の依頼や 新しいASPさんとのご縁もあって ついに「リンクボタン」を使う機会が到来！ で あれこれ調べつつCSS設定やらHTMLやらを サイトで調べて、調べて、調べて… 何とかブログ内に表示することができました！ 私が実践している 楽天アフィリの教科書「楽press」では 無料テーマの「simplicity」「Cocoon」を ブログのテーマとして推奨しているので 私も今は「Cocoon」を使ってます。 「Cocoon」は無料なのに使いやすいと いろんな方が使っているので 使い方に困った時は検索しやすいので 今回のCSS設定をする方法も 比較的早く解決しました(＾＾) が、 問題は実際にリンクボタンのCSSコードを 追加することです。 調べてみたら おしゃれでかわいいリンクボタンのCSSコードを いろんな人がコピペできるようにしていて その中でもわかりやすいものを探したんだけど 基本的にはCSSコードを追加して 文章内にHTMLコードを入れる というものが多かったです。 そのやり方はわかるんだけど 問題なのはASPや企業さんによって 使えるURLやテキストバナーでは サンプル画像のように上手く表示されなかったりして 今ほどまで かなり悪戦苦闘しておりました_(:3 」∠)_ でも 今回苦戦したテキストバナーについては どこのHTMLコードを移動したら ちゃんとしたリンクボタン表示になるか なんとなくわかったので同じような形のものなら 次回はもう少し時短で設定できる気がします。 (※まだ今回が初めてなので 次回もサクサクは無理だなと…(-_-)) もし ブログでCocoonを使っていて 「リンクボタンを付けたいんだけど 良い感じのないかな？」ってことなら こちらのサイトもおすすめですよ(＾＾) 【CSSボタンデザイン120個以上！ どこよりも詳しく作り方を解説！】 → https://jajaaan.co.jp/css/button/ あと 「設定の仕方自体がわからん！」って方は こちらのページがわかりやすかったです。 【CocoonでCSSを追加する手順と注意点 ｜初心者向け/WordPressカスタマイズ】 → https://yoshitechblog.com/cocoon-beginner-css-added-notes もし興味があったら やってみてくださいね(＾＾) あ… でも… やっぱりブログの見た目にこだわり過ぎるのは ちょっと要注意くださいね(ﾟ∀ﾟ;)
「在宅で稼ぐ」を学ぶは楽しい！｜ネットビジネスの教科書一覧
