<ZELOカスタマイズ記⑭>リンクをボタンで表示させるCSSを追加したはなし

WordpressからBloggerにお引っ越し中!
この記事では、リンクをボタンで表示するためのCSSを追記してみます!

ボタン機能、「OrangeZELO」や「PrimeZELO」には標準で実装されてるんだけど、残念ながら無料の「ZELO」には未実装。

(参考)ボタン機能を使いこなそう【Orange ZELO】

なので、おなじ雰囲気で使えるようにCSSを追記していくよ!

ビフォーアフター

上がビフォー、下がアフター。
ショートコードでボタン表示できるCSSを追加

※ボタンの色はCSSの設定で好きなものに変えられます。


HTMLにCSSを追記


上記サルワカさんのサイトを参考に、
  • 影付きの角丸ボタンで、
  • カーソルを合わせたときにちょっと浮く
ボタンを作成しましたぁ。

※かならずバックアップをとってからカスタマイズしてください。

①HTMLの編集をひらく

テーマ
 → 「・」がたてに3つ並んでいるメニューを選択
 → 「HTMLを編集」

②CSSを追記

※「/* ---------- フキダシ */」の直前に挿入しています!

下記のコードを追記

    /* --------- リンクボタン */

.btn{
  text-align: center;
  display: block;
  background-color: #8BC34A;/*背景色*/
  color: #FFF;/*文字色*/
  font-size: 1em;/*文字サイズ*/
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.05em;/*字間*/
  padding: 0.6em 1em;/*ボタン内の余白*/
  border-radius: 8px;/*角の丸み*/
    cursor: pointer;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
  -webkit-tap-highlight-color: transparent;
  transition: .3s ease-out;/*変化を緩やかに*/
}

.btn:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

③保存



<Bloggerでボタン表示>記事作成時の設定

「ZELO」作者さんの使用方法がそのまま使えるよう、ボタンの指定は「btn」で行っています。

  1. フツーにテキストを打って、
  2. フツーにリンクを設定した後、
  3. [HTML]での編集画面に切り替えたら、
  4. <a href~>タグの中に、「class="btn"」と追記するだけでおK!

ボタンを中央寄せする方法をいろいろ模索しましたが、記事作成時の設定で「text-align: center;」を都度入れるしかないっぽくて、それはさすがに面倒なのでベタ表示させました。


今日はここまで~ノシ

0 件のコメント :

コメントを投稿

関連記事