Programing beginner by koala

【コピペOK!】「カエレバ」「Rinker」の代わりをhtmlとCSSだけで作ってみた【レスポンシブ対応】

WordPress内で、本や商品を紹介する際は、やはり下記のようなボックススタイルが見た目的にもいいですよね(^^)

こういった商品紹介ボックスを実装するのに便利なツールとして人気なのが、カエレバRinkerですね!

とても人気なツールですし、使いこなせれば確実に便利なんですが、私はその便利な機能を全部端折って、このフレームだけが欲しくて、リンクとか、その時の投稿に合わせて、自由~にいれたいんですよ。

フレームだけってこんな感じ↓

いろいろな機能が付いていると、コードも複雑になるので、カスタマイズする時にどこを触っていいのか分からなくなります。。

逆に、シンプルなものであればあるほど、初心者はカスタマイズしやすいですし、臨機応変に変えてゆけるのが◎

というわけで、ド素人代表として、上記のようなものをhtmlとCSSだけで作ってみました!なんとレスポンシブ対応ですよっ!!コピペOKです(^^)

コードの説明

まずは、htmlコードを説明していきます!下記のコードを、テキストエディタに貼り付けるか、AddQuickTagに登録し、ボタンで呼びだせるようにしておくと便利です(下記に説明アリ)。

3つボタン用htmlのコード

クラス名は下記のようになっております。

画像に関しては、Amazonですと、画像リンクの「中」を選ぶと、ちょうど、この記事のトップで紹介した感じになります(^^)

この画像のサイズが、「幅125×高160」なので、他の画像やリンクであれば、合わせていただいてもOKですし、最大サイズを横幅200pxに指定しているので、それ以上のものは自動的に幅200pxに調整されます。

※高さは幅に合わせて変わりますので、比率は守られます。

また、記事を書く際に、毎回テキストエディタにこれ(↑)をコピペするのは大変でしょうから、AddQuickTagというプラグインをインストールし、ショートコードボタンを作っておくと、上記のコードがボタン一つで呼び出せますよ(^^)

参考記事:【神プラグイン】ショートコードを作成し定型文がボタン一つで呼びだせる!

2つボタン用htmlコード

1つボタン用htmlコード

cssのコード

※ボタンを1つや2つに変えたバージョンを追加したので変更しました。(2019年6月22日変更)

コメントアウト多めに入れておいたんで、それを参考にしながら、カスタマイズしたいところにたどり着いてください!

style.cssにコピペでOkですよ!style.cssが分からない方は、下記の記事を参考にしてください。

【コピペOK!】Affingerカスタマイズ「文字の大きさ・行間、h2タグ、h3タグの下の余白」
【ド素人OK!】WordPressテーマを自作したので道のりをシェアするよ⑥「動画付き過保護説明」

使い方の説明

使用する際には、htmlコードの、

1.画像、または画像リンクコード(※1)
2.簡単な説明文など(いらなければ削除してもOK)
a.リンクコード
b.AサイトのリンクURL
c.BサイトのリンクURL
d.CサイトのリンクURL
注)ボタンはリンクURLのみいれてください(※2)

を手動で入力し、完成です(^o^)/

もちろん、html、cssは、ご自由にデザイン、カスタマイズしてくださってOKです!

注意点その1(※2)

ただの画像の場合は投稿画面「メディアを追加」より、普通に画像を追加してください。

画像リンクはそのままコピペでOKです!例えば、Amazonの画像リンクであれば、

このコードをコピペすればオッケー!A8.netなど、ASPの場合も同じく、

画像リンクのリンクコードをコピペでOKです(^^)

注意点その2(※2)

aのリンクコードは、テキストリンクをそのままコピペでOKです。

※AmazonはAmazonアソシエイトホーム画面→「商品リンク」にてテキストリンクが作れます!

ボタンリンクに関しては、リンクURLのみコピペするようにしてください!

念のため、お伝えしておくと、Amazon、楽天ならびに、どのASPにおいてもリンクコードの改変は規約違反になります。

ですのでリンクコードの取り扱いに関しては、自己責任でお願いしますm(_ _)m。。すいません。。

レスポンシブ対応だよ!!

レスポンシブデザインもしているので、タブレット、スマホサイズでも崩れません(^^)

768pxになると下記のようになります。

480pxになると下記のようになります。

まとめっ!

めっちゃシンプルな商品紹介ボックスですが、htmlとcssだけで出来ましたよ(^o^)/

htmlとcssの知識があれば、いくらでも自分好みにカスタマイズできると思うので、是非活用してください♪

もし少しでもお役に立ちましたら、シェアなどとってもうれしいです♡

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら