• TOP
• ブログ

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

2019-12-25T00:00:00+09:00 2019-12-29T05:44:13Z Blogger ZELO カスタマイズ ブログ

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

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

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

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

ビフォーアフター

上がビフォー、下がアフター。

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

HTMLにCSSを追記

（参考）CSSで作る！押したくなるボタンデザイン100（Web用）

（参考）マテリアルデザインでの「ボタン」の使用ルールと作り方（サンプルCSS付）

上記サルワカさんのサイトを参考に、

• 影付きの角丸ボタンで、
• カーソルを合わせたときにちょっと浮く

ボタンを作成しましたぁ。

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

①HTMLの編集をひらく

テーマ

　→　「・」がたてに３つ並んでいるメニューを選択

　→　「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"」と追記するだけでおＫ！

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

今日はここまで～ﾉｼ