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