カエレバを装飾したいと思って素人がコピペしたら失敗したよ。ん?ちゃんと直してもらったから大丈夫。 
  • ピックアップおすすめ記事

カエレバを装飾したいと思って素人がコピペしたら失敗したよ。ん?ちゃんと直してもらったから大丈夫。 

やあ、パソコン初心者諸君。

今日は何をやるつもりなんだい?
え、CSSで装飾

そんなのわかるの?

やめときなよーしっぱいするよー。
真っ白になって大変なことになるのが関の山じゃないか。


 

ども、CSSとかプログラミングとかわかんないシゲ(@piece_hairworks)です。

ブログ運営の参考になるので、他のブロガーさんのブログもちょくちょく見させてもらっています。特に技術系(ブログのデザインカスタマイズ、仕組みなど)のブログは苦手分野なので、勉強も兼ねて少しずつ自分のブログもカスタマイズしたりしています。

さて今回やろうと思ったのが楽天・Amazonのリンクを作ってくれるカエレバの装飾

▼普通にリンクを貼ると僕のブログではこう表示されます。

スクリーンショット 2015-07-08 17.56.42-1

これでも十分なんですけどね、パッと見てどこ押したらリンクに飛ぶのかよくわからないのです。一般の人が見たときにわかりやすくカスタマイズして、もっと読者の人に見やすいブログにしたいな、と。

今回はそんなカエレバの装飾について、珍しくちょっと真面目に書いてみます。





まずは素人なのでカエレバの装飾の記事を探そう

基本的なことはわからないし、一から勉強するのも手遅れであろうと。

まずは全くわからない僕のために書いてくれている、先人たちの知恵を借りようと思う。そんな時にふと思い出したのが、この記事。

もう僕のブログではおなじみ、vdeepのおくたにさまー ( @okutani_t )の記事です。

この記事ではCSSのコードまで公開してくれているので、これなら僕にもできるかと思い挑戦してみました。なかなかのデザインセンスなので、このまま使っても全然いい感じに使えそう。

▼おくたにさまーのカエレバはこんな感じ。

スクリーンショット 2015-07-08 18.11.19

Avatar image
ワイフ
Amazon・楽天市場がきれいに並んでて、ボタンみたいになってる!
Avatar image
シゲ
そうなんだよね、これなら読者の人がどこからリンクなのかわかり易いよね。
Avatar image
偶然の産物
ハリネズミだあ。

ということでさっそくCSSのコードとやらをパクってみた

どうやら記事によると、記事内にあるCSSコードスタイルシートなるところにコピペしたらいいみたいですな。なんだ、チョロいじゃないか。

Avatar image
ワイフ
ほ、本当に大丈夫??
Avatar image
シゲ
だって、コピペだけだったら僕でもできるさ。
Avatar image
偶然の産物
なんか嫌な予感しますよ。

PC用のCSSレイアウトコードは次の通りです。極力cssファイル内の上部に置いてください(スマホ用レイアウトで上書きするため)。

引用元:カエレバをCSSで装飾してみた | vdeep

CSSファイル内の上部??よくわからないのでスタイルシートいうところにコピペしてみよう。

▼まずはWordPressの管理画面から【外観】→【CSS編集】に。

スクリーンショット 2015-07-08 18.25.35

僕のブログはSimplicityを使ってるからおくたにさまー ( @okutani_t )とは違います。しかしそんなのは僕には関係ないので、そのままコピペで突っ込んでみました。

▼CSS編集にはいるとこんな画面になったので、もともとあった記述の下にそのままコピペしました。

スクリーンショット 2015-07-08 18.25.59

▼んで、コピペするとこうなる。何がなんやらわかりませんが、英語ばっかりです。

スクリーンショット 2015-07-08 18.27.23

▼とりあえずコピペが終わったらスタイルシートを保存、ブログの方の変化を見てみます。

スクリーンショット 2015-07-08 18.42.10

実際にカエレバのリンクはどう変わったか?

この時点ではブログは無事に稼働しているみたいです。保存し終わったら、もともとのカエレバのリンクを再チェックしてみました。

▼先ほどのピサの斜塔のリンクはこう変わりました。

スクリーンショット 2015-07-08 18.28.25

Avatar image
ワイフ
あーいい感じに変わったね!おくたにさまーと一緒じゃん!
Avatar image
シゲ
良かった、コピペだけで。すごいなー。
Avatar image
偶然の産物
すっきりしてていいデザインですね。

▼iPhoneの方はこんな感じで表示されていた。

IMG_0889

Avatar image
ワイフ
いい感じ〜!
Avatar image
シゲ
スマホの方のコード入れてないんだけど、なんかいい感じになったからよしとしよう。
Avatar image
偶然の産物
ラッキーってことですね!

どうせなら自分のブログらしいカスタマイズしたいな

本来ならここで終了なんだろうけど、どうせなら自分のブログらしいデザインにカスタマイズしたい欲求が出てきた。

どこをどういじったら変わるのかわからないけど、いじってはチェック、いじってはチェックを繰り返してみた。英語は得意じゃないから、なんとなく雰囲気でw

Avatar image
ワイフ
やめなよーー!消えちゃったらめんどくさいことになるよ!
Avatar image
シゲ
イヤダ。これじゃあおくたにさまーのパクリブログだ。
Avatar image
偶然の産物
だ、大丈夫かな。

いろいろ調べて、ボーダーがなんたらとか、#000000が黒だとかその辺を変えてみた。

すると…

▼こうなってしまった((((;゚Д゚)))))))

スクリーンショット 2015-07-08 19.23.51
横の方に変な線が出来ましたとさ。Amazonの色を変えることには成功したのだが…。

▼スマホの方も似たような状況に。

IMG_0891

Avatar image
ワイフ
やっぱり素人がいじるもんじゃないねー。元に戻せばー??
Avatar image
シゲ
いや、こういう時は叫んだら大丈夫。
Avatar image
偶然の産物
さ、叫ぶ?

そう、こういう時は叫ぶのだ

困ったら「Twitterで叫ぶ」といいことを僕は知っているのだ。


@をつけるようにと指摘されてもめげないぞ。

ネタだろうとばれたとしても僕は諦めない。


そうしてやっと繋がった!


ここから事情を話して、わからないなりに状況を説明した。たぶんおくたにさまーは訳がわからなかったとは思うが、優しく僕のしたいことを理解してくれた。

そして、スマホの方もおかしなことから解放された…

ある一点を除いて…

解決したかに思えたが、トラブルはまだ続く

記述もある程度直してもらって、これなら大丈夫だろうとコードを教わりながら作ってみた。しかし、どうもスマホ表示の方がおかしい。

▼きちんと記述したんだけど、この表示に。

IMG_0892

細かいことだけど、リンクのボタンの右端が切れている。これは一体どういうことか、お昼やすみだというのにおくたにさまーに叫ぶ。

Avatar image
ワイフ
マジでいい迷惑だね。やめなよー。
Avatar image
シゲ
本当にそうだよね…おくたにさまごめーん…。

そんな大事なお昼の時間に、おくたにさまーはまるでお昼なんか食ってないかのように僕にコードを教えてくれた。きっと食べてないに違いない。悪いことをした。後でなんか食い物送っとくか。

▼140文字しか打てないのが悔しいが、的確に指示をくれる。

スクリーンショット 2015-07-09 13.35.57

スクリーンショット 2015-07-09 13.36.33

スクリーンショット 2015-07-09 13.37.06

スクリーンショット 2015-07-09 13.37.41

スクリーンショット 2015-07-09 13.37.55

こうやって僕のカエレバの装飾は無事に終わった。おくたにさまーの凄さが改めて実感でき、なおさら勉強が必要なんだなと思いました。

でもこのレイアウトを保存しておけば、自分でカスタマイズするときに失敗しても大丈夫だろうw

Avatar image
ワイフ
まだいじる気でいるの??もうやめなよー。
Avatar image
シゲ
もう大丈夫。間違ったら直せばいいからね!

ちゃんといい感じの表示になった

▼これがスマホのちゃんとした表示。

IMG_0898

無事にリンクのボタンも切れずにきれいに表示されています。これがどうしてなのかは、ちゃんと勉強しないとわからないということでしょうね。もしかしたらWordPressのテーマが違うからなのか?

でも、これで読者の方たちにわかりやすい商品紹介ができる。

おくたにさまー、お昼のところ本当に申し訳なかった。本当にありがとうございます!

何か困ったらお金以外なら力になるぞ。なんでもいってくれーo(`ω´ )o

あとがき!

今回のことでコードについて興味が出てきました。時間があるときに色々いじってみて、自分のブログのデザインを少しずつオリジナリティーを出していければと思います。

ちゃんと自分で理解して誰の力も借りずにカスタマイズできるよう、精進していきたいと思いました。

▼自分なりにいじってできたのがここまでw

スクリーンショット 2015-07-09 17.43.56

Avatar image
ワイフ
っていうか本職をがんばれよ。
Avatar image
シゲ
おっしゃるとおりでございます。
Avatar image
偶然の産物
美容師なのになあ、そっちよりBlogなんて。

おくたにさまー本当にありがとうございました!!!

ははは、じゃあねー!( ´ ▽ ` )ノ

この記事が気に入ったら
『いいね!』してね

Twitter でシゲを

Sponsored Link







(最終更新:2016年4月22日)コメント02920 PV

コメントをどうぞ!

*
*
* (公開されません)

Facebookからコメントする