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