目次
見てくれより記事だってわかってるけど
素人おばさんが、また無謀なことに挑戦してみた。
数々の、ブログの師匠が「サイトの見てくれをイジるより、記事を書いて書いて書きまくって充実させることの方がpvも上がるし、アフィリも成功する」と教えてくださっている。
なのにさとうは、またしても見てくれをイジることに時間を使ってしまったのね。
これには言い訳がありますの。
さとうは、それなりのASPに登録をしてアフィリ用の設定をしてるのね。
で、そのほかに、国内の本屋さんを応援したいから「honto」にも登録をしようと思ったの。
広告だけは前から載せていたけど、よくよく調べたらアフィリ用の紹介プログラムがあったのさ。
しばらく気がつかないでいたのも、さとうらしいアホ加減だわ。
それで、それもカッテネにくっつけようとして、悪戦苦闘してしまったというわけ。
素人なのに冒険するのさ〜。
カスタマイズの方法
基本的にさとうはプログラミングのことを、何もわかってない。
いつも「トライ&エラー」でむりやりカスタマイズする。
だから、理屈を少しでも知ってる方にはオススメできないし、マネされても責任が取れない。
それでもよろしければ、見てね。
カッテネをインストールする
1. カッテネを検索する
ダッシュボード ＞ プラグイン ＞新規追加 で検索画面へ
2. インストールする
詳しくは「使い方が簡単なカッテネ作った|クリックもされやすいよ」という記事を書いてくれたWebFoodさんをご覧ください。
ショートコードを入れる
- Web Foodさんのサイトに行くとわかるけど、記事を投稿する時に必要なショートコードを公開してくれているので、それをコピーしてもらってくる。
- 記事を書くたびにそれを使うので、できれば「再利用ブロック」に登録すると、楽なのね。
さとう
これはさとうがTHE SONICというテーマを使ってるから言ってる。
違うテーマの人も、再利用できるようにコードをhtml形式で保存しておくといいよ。WebFoodさんの記事の中にShortcoderの使い方の記事の紹介もあるし。
ちなみにさとうはカラーがpinkのボタンのラベルを「"label": "audiobook"」から「"label": "7net"」に変えました。
だってアフィリ登録してるのが7netだったんだもん。
参考ブログ記事を読んでおく
プログラミングを知ってる人は、自分で勝手にサクッと好きに変更できるけど、さとうには無理。
だから賢い先人の記事をよく読んで、付け焼き刃の勉強をする。
それで、とても参考になった2つの記事を紹介するね。
こういう方々がおられて、ホント、素人は助かっている。ありがとうございます。
強引に手直しした（素人なので）
だいたいはこんなものだけど、さとうが使いたかった形にはまだちょっと遠かった。
それで、勝手にトライ&エラー方式で理屈抜きの手直しをしてみた。
最終的にさとうが使うことにしたコードは、これ。一部だけどね。
ワードプレスのダッシュボード ＞ 外観 ＞ カスタマイズ ＞追加CSS にこれを追加しました。
長すぎたので、手直ししたとわかるボタンの部分だけ、載せてみた。
そこ以外は手直ししてないから。
ちなみに、ラフログさんのコードは、こっち。これもボタンのデザイン部分だけね。
ボタンを増やすためには、ボタンを表示させるコードを１組ずつ増やせばいい。
でもその時に注意するのは、あたりまえだけど、記号が１個も欠けることなく正確でなくてはならない。
できれば、プログラミングに直接関係のない /＊ ボタングリーン ＊/ っていうことろからコピーしておいて。
あとで何をどう手直ししたか確認するときに便利な目印になるから。
そして、さとうのコードにはつけたしがある。
「ボタンブルー １」「ボタンホント」「ボタングリーン１」がそれ。
「background-color: 」とか「text-align: 」とかがつけたされて、色とか位置とか指定してる。
これらはあとから増やしたボタンなんだ。
同じように見える位置に同じように見えるようにコピーしたにもかかわらず、実際にビジュアルを確認すると色がなかったり文字が左に寄ってたりしてた。
だから、ラフログさんのコードをジィーッとガン見して「なんかもしかしたら、これかな？」と思うコードを貼ったり剥がしたりしながらビジュアルを確認して、強引に直した。
さとう
もう、プログラミング知ってる人から見たら、ヤベェ人だわ
これで終わりではない
そして、このあとの作業がもう一つある。
ワードプレスのダッシュボード ＞ 外観 ＞ カスタマイズ ＞ 追加CSS にコードを貼り付けただけではカスタマイズされない。
ってあたりまえのことだけど、作業していると、疲れちゃってそのことをうっかり忘れる。
記事投稿画面に行って、インストールした後に入れたショートコードを、自分仕様にまた直さないといけない。
なぜならブログ画面としてネットに載るビジュアルは、記事の段階でいろいろ操作しないと、見え方が変わっちゃうからなのよ。
そんな、バカみたいに簡単な理屈もすっかり忘れてたわ
さとう
記事投稿画面にショートコードを呼び出して、ボタン増やしたいなぁとか、ボタンの色変えたいなぁとか、思うでしょ？
色の指定とかいくつ増やす気でいるかとかは追加CSSで書き込んじゃったので、それをオモテで使えるように記事に書けるように設定し直すの。
さとうはこんな感じにしてみた。
その時！注意が必要だったの！
さとう
素人は見えているものがすべてだと思っちゃうからさ。
ここが、プログラミングを勉強したことがない人の悲しさよ。
WebFoodさんのショートコードを借りてカスタマイズしたんだけど、ボタンの数を増やすことばっかり考えていたので、どこのコードをコピペしても同じだろうと思ってた。
素人には同じに見えちゃてたからね。
でも、コピペする部分を選ばないと、見えない部分をいじってる可能性があってビジュアルで確認しようとすると「array〜〜」っていう感じの警告がバアーン！とでる。
えっ、なにこれっ？
と驚いたので、１回削除して、次は慎重にコピペした。
おそらく（さとうは素人なので推測しかない）最初と最後は触らないほうがいいんだよね。
だからボタンを増やすためのコピペはblueとかredとかの、真ん中あたりをねらった。
あとで色の指定やラベルを変えればいいんだもんね。
というわけで、ここまできてやっとさとうが使いたい「カッテネ」が設定できた。
超・むつかしかった。
しかもセオリー無視だからさ。
みんな、勉強は大事だ。それも若ければ若いほど、自分にとって役に立つ。
たまには年寄りの言うことにうなずいて、頑張ってくれ。