シバタスブログ 

このページの記事目次 （タグ: リンク の検索結果）

CSSのみのリンクボタンを綺麗に横並び表示できたメモ

   ↑  2018/05/08 (火)  カテゴリー： その他（Web・PC・スマホ）

この記事で「CSSのみで作ったリンクボタン」の作業メモをしました。


このリンクボタンを横並びにしたいと思いました。

ボタンが横並びになるタグリスト？みたいなヤツです。ブログ個別記事のフッターあたりに、ずら～っと並んでいるアレのようなヤツです。

最初は普通にテキストリンクで、左右のスペースを全角スペースで取りながら、横に並べていたんですが、「スマホだとこれは死ぬほどタップしずらい・・」という事に気づいて、まず、冒頭の記事のように、テキストリンクをリンクボタンに変えました。

それでCSSのみで作ったリンクボタンを横にずら～っと並べたかったのですが、これが結構難しい。

左右の余白は全角スペースなどを使えばできるのですが、上下の余白を作るのが難しい。具体的にはリンクボタンをたくさん並べていくと2行以上になることがある。この時、上下に隣り合うボタンがピッタリとくっついてしまって、めちゃくちゃ見にくい。という状況になりました。「line-heightプロパティ」を使うのが良さげかも・・とも思いましたが、これでも上手く行きませんでした。

そうして調べていた所、「flex」というモノを発見。

これを使えば、メチャクチャ簡単にリンクボタンを横にずら～っと並べられて、しかもリンクボタンが2行以上になってもしっかりと余白を開けられるようになりました。

次の記事に詳しく書いてありました。


あとは、これの必要な部分コピペ＆修正して、CSSソースに貼り付け。divタグでflexを呼び出せば、divタグで囲まれた部分は横並びにずら～っと並びます。それも綺麗に。

メモとして、CSSソースに貼り付けたモノを載せておきます。

.flex{
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex > *{
margin:7px 7px;
}

flex-direction: row;で横並びを指定。flex-wrap: wrap;で端に行ったら折り返すことを指定。.flex > *部分のmarginでリンクボタン周りの余白を指定。

HTML部分ではdivでflexをclass指定。後はdivで囲まれた部分に、リンクボタン（aタグ）をガシガシ貼り付けていけば、それが綺麗に横並びに表示されます。

な　ん　て　便利なんだ！！

。。。

こんな感じで想像以上に簡単に出来ました。CSS3ってスゲーな。

この記事に含まれるタグ : CSS リンク ボタン スマホ 

（記事編集）　https://shibatas.blog.fc2.com/blog-entry-453.html

2018/05/08 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

画像を使わない（スマホを意識した）CSSリンクボタン作成メモ

   ↑  2018/05/08 (火)  カテゴリー： その他（Web・PC・スマホ）

新しくブログを作っているんですが、今更ながらモバイル（スマホ）を意識してリンクを作ろうと思いました。

PCの場合は、普通にテキストリンクで良かったのですが、モバイルだとテキストは小さくてタップしにくい。さらにリンク同士が隣り合っている場合、テキストリンクだとさらにタップしにくい・・。

また画像を使うのは単純に面倒くさい。そしてなんとなくスマートじゃない（笑）。

ということでスマホを意識して、リンクは画像を使わないで「CSSのみで作ったボタン」で作成することにしました。

その際のポイントや心がけたこと、手順などをメモしておきます。

スマホを意識したリンクボタンのポイント

  • 文字サイズは14〜15px
  • リンクボタンが隣り合う場合は余白を多めにとる（PCと比べて）

下記の記事に、スマホを意識するポイントが書かれています。


この記事を参考に、文字サイズは14〜15pxに指定。リンクボタンの余白（margin）は多めにとりました（私の場合は上下左右7pxでmargin指定）。

リンクボタンを作った手順

  1. Css Gradient Buttonでボタンを作成
  2. HTML email inline stylerでCSSをインライン化
  3. ブログに貼り付け

下記の記事にリンクボタンをCSSのみで手軽に作る方法が書かれていました。


これを参考に作業。

１．まず、Css Gradient Buttonでリンクボタンを作ります。この時、リンクボタン内の文字サイズを15pxに指定。

２．次にHTML email inline stylerで作ったCSSソース？をインライン化（ブログ投稿画面で普通に貼り付けられる形にする）します。

３．最後にブログ記事投稿画面で貼り付けます。※もちろんソースを貼り付けられる部分で、です。

リンクを別窓で開く時は「rel="noopener"」を付加する

最後にちょっと追記。

リンクを開く時に「別窓」を指定する場合、「rel="noopener"」は付加することを心がけました。なんでも、これを付加しないと色々と問題があるようなので。

。。。

これで完了。意外と簡単でした。

この記事に含まれるタグ : CSS リンク ボタン スマホ PC 

（記事編集）　https://shibatas.blog.fc2.com/blog-entry-452.html

2018/05/08 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

作ったアフィリエイトリンクは毎回クリックして確かめた方がいいですね。

   ↑  2015/06/07 (日)  カテゴリー： アフィリエイト

当たり前のことですが、

ASPで発行されているアフィリエイトリンクを自分のブログなどに貼り付けたら、「毎回１つ１つクリックして確かめた」方がいいですね。

というのも、慣れると結構忘れがちになるからです。

そんな事件が先日ありました。

アフィリエイトリンクが機能していない！？

先日、バリューコマースのMyLink機能で作ったアフィリエイトリンクが実は機能していなかった（クリックしてもバリュコマのトップページに移動するだけ）という事件が起こりました。

（MyLink機能といのは、例えば無数にある商品の個別ページそれぞれに、アフィリエイトタグを付与できる機能のことです。多くの場合は、アフィリエイトリンクをクリックすると、トップページやLPにのみ移動しますが、MyLink機能では、それぞれの個別ページ専用のアフィリエイトタグを生成することができます。）

何回クリックして試しても、バリューコマース（ASP）のトップページが表示される・・

具体的にはフォレスト出版のDVD教材などをアフィリエイトしようと、個別ページ専用のアフィリエイトタグを生成して、ブログ記事に貼り付けました。

で、ふと「あぁ、アフィリエイトリンクが機能してるか確かめてなかった」と思って、実際にクリックしてみたら・・。

「何度試してみてもバリュコマのトップページに移動するだけ」という現象が起こりました。

何回も、フォレスト出版のページURLをコピーし、MyLink機能で専用のアフィリエイトタグを生成し、ブログ記事に貼り付け、クリックして試してみても・・、

そのアフィリエイトリンクは機能していませんでした。（バリュコマのトップページに移動するだけだった）

ASPか広告主側の不具合？

おそらくこれは、ASPか広告主（フォレスト出版）側の、不具合だと思われます。

自分のリンクミス以外にも、このようなことが原因で「アフィリエイトリンクが機能していない」ということが起こるんだな、と改めて思いました。

なので、アフィリエイトリンクを貼ったら、必ず毎回１つ１つクリックしてチェックする、のを習慣にしておいた方がいいですね。

と、自分に言い聞かせるためにも記事にしました。

この記事に含まれるタグ : アフィリエイト ASP リンク 

（記事編集）　https://shibatas.blog.fc2.com/blog-entry-301.html

2015/06/07 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |
申し訳ありません。　お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。