2017/05/01

画像不要!CSSで作る関連・参考ボタンとAddQuicktagの設定

関連記事や参考記事を紹介するときに今までは「→」や「⇒」などの矢印を使っていましたが、ちょっとしたアクセントになるボタンが欲しい!でも、画像をわざわざ作るのもなぁ…、と思っていました。

あきらめかけていたら、いい方法を見つけましたよ♪ CSSでカンタンにシンプルなボタンを作れるということで、さっそく取り入れさせていただきました。
※CSS(スタイルシート)を編集できるブログならWordPressじゃなくてもできます。

関連ボタン

関連ボタンの作り方

関連 関連記事へのリンク(ダミーです)

HTML

CSS

参考ボタンの作り方

参考 参考記事へのリンク(ダミーです)

HTML

CSS

関連リンクとの違いは「kanren」を「sankou」に、contentのところを「関連」から「参考に」変更しています(色のついた行)。

参考ボックスやポイントボックスもCSSで作れます!

 

ポイントはココ!

 

以上、ルコさんの記事を参考にさせていただきました。

記事を書いてると欲しくなる「参考マーク」「ポイント」「吹き出し」の作り方 icon-external-link (この記事は削除されました)

 

実際にポイントボックスを使っている当ブログの記事(下の方にあります)

AddQuicktagに登録しておくと簡単に適用できます

AddQuicktagという入力支援プラグインを使うと、簡単にタグを入力できます。
※WordPressの方限定

AddQuicktag入力画面

関連リンク

開始タグ

終了タグ

参考リンク

開始タグ

終了タグ

参考ボックス

開始タグ

終了タグ

ポイントボックス

開始タグ

終了タグ

 

以上、わいひらさんの記事を参考にさせていただきました。

 

Quicktagsは追記ではなく上書きされてしまうので、リンクを張る場合は、先にQuicktagsでスタイルを設定してからリンクを挿入してください。じゃないとリンクしたつもりがただの文章になってしまいます(^_^;)
ヒトミ

著者:ヒトミ

東京在住。犬のいない生活なんて考えられない!犬中心の毎日を送っています。趣味はアジリティー(ドッグスポーツ)と写真。

Twitterフォロー