風の羅針盤 | Destination of winds.

【WordPress】シンプルなテキストボックスを作りました

time 2015/11/17  所要時間:約 3

【WordPress】シンプルなテキストボックスを作りました

先日、WordPressの記事中に表を入れる方法について、「TablePress」を紹介したのですが、表を入れるまでもないような単純なテキストボックスを入れたいときってありますよね。

紹介の記事はこちら

スポンサーリンク

簡単に追加出来るサムネ付きテキストボックスを作る

私は昨日から川柳コーナーなんてわざわざ自分のハードルを上げるような真似をしてちょっと後悔しちゃっていたりするんですけど、その際にわざわざ表を挿入するのも大げさなので、こんなテキストボックスを作って入れることにしました。

簡単な テキストボックス 作ったぞ

なにか、ちょっと強調したい文節や見出しがあれば、簡単にこのボックスにサムネイル入りで入れ込むことが出来ます。

サムネイルは別途用意していただいて、予めWordPress上にアップロードしておいて、画像のURLを調べておきます。

画像のURLの調べ方

テキストボックス1

「メディアの追加」からメディア一覧を表示します。

 

テキストボックス2

テキストボックス中のサムネイルとして表示したい画像をアップロードして、画像を選択した状態で、右側の「URL」に表示されている場所が画像のURLです。

推奨されるサムネイルのサイズは「100px X 100px」です。

Chromeに「Create Link」を追加する

Chromeにプラグイン「Create Link」を追加します。

追加したら、画面の右上に「Create Link」のアイコンが表示されるので、クリックして「Configure」を選びます。

テキストボックス3

ポップアップした画面で以下のように入力します。

テキストボックス4

「Format」に入力するコードは以下を貼り付けます。

この際、先ほど調べたサムネイルのURLに修正してください。

style.cssに追記

style.cssにclassを定義します。

下のコードをそのまま貼り付けてください。

表示される文字の大きさは「19px」なので、変えたい場合は文字の大きさの部分を適宜変更してください。

これで準備は完了です。

実際に入れてみる

テキストボックスを表示させたい場所をにカーソルを合わせ、「表示させたい文字列」を記述します。

テキストボックス5

文字列を選択し右クリックなどでコンテキストを表示させ、「Create Link」から、先ほど名前をつけたものを選択します。

テキストボックス6

その後、選択した文字列はそのままの状態で、「貼り付け」を行います。

テキストボックス7

これで完成です。

ビジュアルモードにすると、

テキストボックス8

こんな風に見えてしまいますが、プレビューすると、

テキストボックス9

きちんと表示されていると思います。

需要があるかわからないですが、簡単なボックスがあればいいな~と思っていた方は使ってみてくださいね。

 

サラブロ川柳

サラブロ川柳

高望み しても伸びない ページビュー

スポンサーリンク

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

down

コメントする




*

この記事の関連カテゴリ

関連記事

人気の記事

Twitter でフォロー



スポンサーリンク