ブログ

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

こんにちもじゃもじゃ、

雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。

ブログでただただ文章で文字を書き連ねるだけでは読者も飽きてしまうもじゃよね。

闇もじゃめ
闇もじゃめ
文字だけというのはさみしい感じがするもじゃね…
もじゃめ
もじゃめ
読者を飽きさせないほどの文才があれば別じゃないかな!

私はWordpressのテーマで「JIN(ジン)」を使用しているもじゃよ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

JIN(ジン)のショートコードには非常に使い勝手のよいショートコードがたくさんあるもじゃね。

闇もじゃめ
闇もじゃめ
見た目もかわいらしいもじゃね…

今回みなさんにご紹介するのは、ボタンに関するショートコードについてもじゃよ。

ショートコードのボタン以外からでもボタンは設置できるもじゃよね。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

上記の「ボタンセット」を押すと下記のとおりボタンがセットされるもじゃね。

詳細ページ公式ページ

デフォルトだと左が「詳細ページ」、右が「公式ページ」というボタンが設置されますが、このままだとリンクは貼っていないのでボタンだけど押してもなにも起こらないもじゃよ。

この記事はこんなあなたにおすすめ

〇ボタンを使ったことがない
〇WordpressのテーマでJIN(ジン)を使用している
〇もっと文章に色どりを加えたい
〇リンクの貼り方を増やしたい
〇ショートコードのボタンは使ったことがない

用途に合わせてボタンを使ってみたいと思いますので、

それぞれのボタンを詳しくみていきましょうもじゃ。

闇もじゃめ
闇もじゃめ
素敵なボタンがたくさんあるもじゃよ…
もじゃめ
もじゃめ
跳ねるボタンとかつい押したくなるもじゃね!

基本的なボタンの使い方

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編それではまず、基本的なボタンの使い方について説明するもじゃね。

基本的なボタンの使い方を学んでからWordpressのテーマ「JIN(ジン)」のショートコードのボタンにどのようなものがあるのかをみていきましょうもじゃ。

闇もじゃめ
闇もじゃめ
何事も基本が大切もじゃね…
もじゃめ
もじゃめ
もじゃ君は基礎を大事にしたい人よね!

ボタンセットをクリック

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

まずは上記画像にある「ボタンセット」をクリックするもじゃよ。

文章を書くときにビジュアルとテキストがあると思いますが、

どちらで押しても構わないのですが、ビジュアルでまずはボタンをクリックしてみてくださいもじゃね。

クリックすると、下記のとおりボタンが表示されるもじゃよ。

詳細ページ公式ページ

これだけだと、先ほど簡単に説明しましたが、ただボタンがセットされただけもじゃね。

このボタンがテキストだとどのように表示されているのか確認してみるもじゃよ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

さて、ボタンが二つ並んでいてもいいのですが、

一つの方が便宜上都合がよろしいので、右側の赤いボタンだけを残すことにするもじゃね。

デフォルトの状態で青い方のボタンをクリックすると下記のとおりとなるもじゃよ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

このまま「バックスペース」をクリックし「詳細ページ」の文字を削除すると右側のボタンだけが残るもじゃよ。

公式ページ

青の「詳細ページ」のボタンを削除した状態のボタンが上記となるもじゃね。

このボタンのテキストは下記のとおりとなっているもじゃよ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

このコードを見比べてみれば「テキスト」で青い方のボタンはどこを削除したらいいいのかも簡単にわかるもじゃね。

ボタンを二つから一つにしたい場合は好きな方で対応したらいいもじゃよ。

闇もじゃめ
闇もじゃめ
二つのボタンをあまり使うことがないもじゃ…
もじゃめ
もじゃめ
もじゃ君にもいつか使う時が来ると思うよ!

ボタンにリンクを挿入する方法

次に、ボタンをセットしたからにはリンクを張りたいもじゃよね。

ボタンでどこに飛ばしたいのかは各々の使い方ですが、

今回は自身の別の記事にアクセスできるようなリンクの貼り方について解説していくもじゃね。

基本的なリンクの貼り方を覚えれば、他のリンクの貼り方も同様にすればできるもじゃしね。

それでは、まずはデフォルトのボタン(一つだけ)を準備させていただきますもじゃね。

公式ページ

上記のボタンにはまだリンクは貼っていない状態もじゃよ。

やり方はいくつかありますが、ビジュアルからの編集の仕方をまずは解説するもじゃね。

ボタンをクリックすると、下記のようになるもじゃよ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

この真ん中の鉛筆マークをクリックすると飛ばしたいリンクを挿入することができるもじゃね。

クリックした状態は下記のとおりとなるもじゃよ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

クリックした状態では「#」が入っているもじゃね。

それでは一番右側の「歯車マーク」をクリックしてみてくださいもじゃ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

上記画面のとおり表示されたと思いますが、4つの項目が出てくるもじゃね。

  1. URL:ここに飛ばしたいリンクを張る
  2. リンクの文字列:ボタン名を変更できる
  3. リンクを新しいタブで開く(デフォルトは未チェック)
  4. 既存のコンテンツにリンク

ここを編集することで、ボタンにリンクを張ることができるもじゃよ。

「3」のリンクを新しいタブで開きたい場合にはチェックを入れることを忘れずにもじゃよ。

今回は私のブログ一押しのボードゲーム特集についての記事のリンクを参考に張り付けてみるもじゃね。

下記のボタンがリンクを張り付けたボタン(クリックすると飛ぶよ)となっているもじゃよ。

ボードゲームはこちら

そしてテキストでは下記のようになっているもじゃね。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

ボタンをいじる前のテキスト上でのコードは下記のとおりとなっておりますので比較してみましょうもじゃ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

テキスト上でどこをいじればいいのかも見比べればわかりますが、

今回は基本的なボタンの使い方についての説明ですのでこれさえしっていればボタンにリンクを挿入することができるもじゃよ。

闇もじゃめ
闇もじゃめ
簡単もじゃね…
もじゃめ
もじゃめ
迷うことは特段ないね!

ショートコードのボタンの種類について

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編さて、基本的なボタンについての使い方はさきほど説明しましたので、

こっからがショートコードのボタンについての解説となるもじゃよ。

闇もじゃめ
闇もじゃめ
わくわくもじゃ…
もじゃめ
もじゃめ
素敵なボタンを知ろうね!

先ほどまでのボタンと異なり、

ショートコードのボタンをクリックするとビジュアルでもボタンが表示されないのに注意が必要もじゃね。

試しにショートコードのボタン「フラットボタン」をクリックしてみるもじゃね。

デフォルト画面では下記画像のようにコードが書かれているだけとなっているもじゃよ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

ショートコードを使用する場合は、必ず公開する前にプレビューで問題がないことを確認する作業が必要もじゃからね。

まずは、リンクもなにも張らずにWordpressのテーマ「JIN(ジン)」のボタンのショートコードにどんな種類のボタンがあるのかをみていきましょうもじゃ。

ショートコードのボタンは現在9種類あるもじゃよ。

闇もじゃめ
闇もじゃめ
色々使ってみたいもじゃ…
もじゃめ
もじゃめ
今後も増えるといいね!

フラットボタン

グラデーションボタン

光るボタン

ふわふわボタン

バウンドボタン

横並びボタン【フラット】

横並びボタン【光るフラット】

横並びボタン【グラデーション】

横並びボタン【光るグラデーション】

ショートコードのボタンの使い方

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編上記でみたとおり、ショートコードのボタンは動きもあったりと非常に押したくなるボタンがたくさんあるもじゃね。

個人的にはバウンドボタンの動きが好みもじゃね。

闇もじゃめ
闇もじゃめ
動きがかわいいもじゃ…
もじゃめ
もじゃめ
光っているのもあるね!

今回は、バウンドボタンを例にショートコードのボタンの使いこなしていきましょうもじゃん。

バウンドボタンを例に使うため、下記のとおりボタンを設置させていただきますもじゃね。

テキストでは下記のとおりとなっているもじゃよ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

このテキストで表示されたショートコードのバウンドボタンを触り、リンクを張っていきましょうもじゃ。

闇もじゃめ
闇もじゃめ
難しそうもじゃ…
もじゃめ
もじゃめ
非常に簡単もじゃよ!

ショートコードのボタンにリンクを張る方法

それではボタンを記事内に設置するだけでは意味がないので、

リンクを張っていきましょうもじゃ。

闇もじゃめ
闇もじゃめ
どこに貼ればいいもじゃかな…

まずはバウンドボタンのショートコードをもう一度みてくださいもじゃ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

こちらの文字列をよく見ると「url=””」とあるもじゃよね。

ここに飛ばしたいリンクを挿入したらいいもじゃよ。

「”」と「”」の間にボードゲームのリンクを挿入し、ボタン名を変更したものを設置するもじゃね。

そしてこのバウンドボタンのテキストでの表示は下記のとおりとなるもじゃよ。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

しかし、このままだとボタンをクリックするとタブを新たに開くことなくリンク先の画面に飛ぶことにはなるもじゃね。

それでは、次に新たにタブを開いてリンク先を開く方法について解説するもじゃね。

闇もじゃめ
闇もじゃめ
個人的には新しいタブで開く設定をしたいもじゃ…
もじゃめ
もじゃめ
非常に簡単だよ、一瞬でできるよ!

リンクを新しいタブで開く方法

先ほどのリンクを張る方法だけだと新たにタブを開くことなくリンク先のページに切り替わることになるもじゃね。

非常に簡単だよ!

ショートコードのボタンを使いこなすためには、リンクを新しいタブで開く方法についても知りましょうもじゃ。

まず、先ほどのボタンのリンクを挿入した時のコードをもう一度みてみてくださいもじゃ。

闇もじゃめ
闇もじゃめ
じーーーーーーーーー

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

ここで注目して欲しいポイントは

target=”_self”

もじゃよ。

闇もじゃめ
闇もじゃめ
ふむふむ…
もじゃめ
もじゃめ
もじゃ君ちゃんとわかっている?

なんと、ここを少し触るだけでリンクを新しいタブで開くことができるもじゃよ。

「self」を「blank」にするだけもじゃ!

さて、それでは上記のとおりボタンを少し触ってみたものを下記に設置するもじゃね。

実際にクリックすると新しいタブでリンクが開けたと思うもじゃよ。

テキストでは下記のとおりになっているもじゃな。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編

これで、ショートコードのボタンを使いこなすことができたもじゃね。

闇もじゃめ
闇もじゃめ
もじゃでもできたもじゃ…
もじゃめ
もじゃめ
非常に簡単だったね!

さいごに

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編今回はWordpressでのボタンの基本的な使い方及びショートコードのボタンの使い方について記事をまとめたもじゃよ。

闇もじゃめ
闇もじゃめ
マスターしたもじゃ…

WordPressのテーマ「JIN(ジン)」についてのボタンについてですが、

ショートコードの使い方は基本的には同じなため、

一つ学べば応用することができるもじゃな。

ただ記事を書くだけでなく、

ショートコードを利用して読者に飽きさせず他の記事も参考にしていただくサービス精神で今後も記事を書き進めていただきたいもじゃよ。

他にもブログに関する記事をいくつか書いておりますので、よかったら参考にしていてくださいもじゃ。

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編
【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編こんにちもじゃもじゃ、 雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。 読者にインパクトを与えたい、 見...
ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!
ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!こんにちもじゃもじゃ、 雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。 ブログを趣味の一つとして運営しているも...
大人の趣味にブログがおすすめ|ブログが楽しいと思う3つのことについて!
大人の趣味にブログがおすすめ|ブログが楽しいと思う3つのことについて!こんにちもじゃもじゃ、雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。 私がブログを始めたのが2018年12月なので、...
【ブログ】記事が書けなくて辛い人へ|書き続けるために必要な5つの改善方法について!
【ブログ】記事が書けなくて辛い人へ|書き続けるために必要な5つの改善方法について!こんにちもじゃもじゃ、雑記ブロガー『もじゃめ(@mojame_blog)』だよ。 ブログを書くのが辛い人、必見もじゃよ。 h...
【初心者】ブログを書くモチベーションをあげる方法
【初心者】ブログを書くモチベーションをあげる方法こんにちもじゃもじゃ、駆け出し雑記ブロガーのもじゃめ(@mojame_blog)だよ。 駆け出しブロガーではありますが、最近下記の...
闇もじゃめ
闇もじゃめ
使い方を覚えるのは楽しいもじゃよ…
もじゃめ
もじゃめ
最後まで読んでいただき、ありがもじゃもじゃ!
にほんブログ村

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です