ワードプレスの文章を囲むボックス(枠)を作成するツールを作ってみた。

SHARE

ワードプレスの文章を囲むボックス(枠)を作成するツールを作ってみた。

プログラミングの勉強のためにちょっとしたツールを作ってみました。需要があるのかわからんけど。

こちら→Box Design Generator

このボックスです。このデザインを色々いじれるツール(?)を作ってみました。

プラグインあまり入れたくないけど、デザインも全くできない人にとっては、いいんじゃね?ってことで紹介します。

 

ワードプレスへ枠の導入方法

ボックスを作ったあとは、2パターンで使用可能です。

ワードプレスのスタイルシートにコピペし、ショートコードを使う。

→同じのを何度も使いたい人向け

 

記事にそのままぶち込む。

→違うデザインのボックスをいろいろ使いたい人向け

→とりあえず使ってみるかあって人向け

 

1つ目:ワードプレスのcssをいじる

全く知識のない人には少しハードルが高いかもしれないですけど、何回も記事内に使う方はこちらがいいと思います。

直接コードを書きに行くので、不安な人はバックアップを取っといてください。

 

まずは、ワードプレスの管理画面の左から「外観→テーマの編集」へ移動

 

そしたらテーマ編集の画面になります。

次にこちらでコピーしたcssを1番下に貼り付けます。

これで完成。

試しに上記画像の右側の使用例をコピペしてテキストモードで記事に貼り付けてみてください

反映されない場合は、ブラウザのキャッシュを削除してください。(きっと上手く行くはず。)

 

2つ目:直接記事にコピペ

これはそのまんまで「HTML(そのまま使いたい人向け)」をコピー。

 記事をテキストモードにして、貼り付け。

完了。

複数行書く場合は全てのpタグにスタイルをつけなければいけないので注意してください。

文字間隔が変わってしまう場合があります。

 

以上。

 

何か質問、改善点等ありましたら、僕のTwitter、またはコメントにてご連絡ください。

需要があれば見出し等の作成もできるようにしていきたいなあと思ってます。

コメントを残す

メールアドレスが公開されることはありません。