wordpress moreタグもどきを簡単に自作する

みなさんこんにちは。
昨日マッサージにてスッキリしたルンビーニです。

本日はwordpressのmoreタグもどきについてご説明します♪
 

Moreタグとは?

皆様、自分が書いた文章が長すぎて困った事は無いでしょうか?
例えば、、、、、

「日本」という漢字による国号の表記は、日本列島が中国大陸から見て東の果て、つまり「日の本(ひのもと)」に位置することに由来するのではないかとされる[2]。近代の二つの憲法の表題は、「日本国憲法」および「大日本帝国憲法」であるが、国号を「日本国」または「日本」と直接かつ明確に規定した法令は存在しない。[疑問点 – ノート]ただし、日本工業規格 (Japanese Industrial Standard) では日本国、英語表記をJapanと規定。更に、国際規格 (ISO) では3文字略号をJPN、2文字略号をJPと規定している。また、日本国外務省から発給される旅券の表紙には「日本国」の表記と十六一重表菊[3]を提示している。
出典・引用:wikipedia(https://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC)

上記のような長文を書くことにします。しかしながら、文章が長すぎて読み手としては次の段落を読む気が失せる、気が向いたら読んで貰えればいいのに、、、といった事を思われる方がいらっしゃるかと思います。

そんな時に便利なのがmoreタグです。こちらはwordpressであれば、標準でついているのでそれをクリックすればよいのですが、、、ご利用のwordpressのテーマやプラグイン等により影響がでて、上手く動作してくれない事があります。その際取りうる手段としては、下記方法があげられます。

  • wordpressのphpを変更する
  • プラグインを追加する
  • 自力でタグを作る
  • その他

wordpressのphp変更はミスをしてしまうと大変な事になります。簡単に申すと、下手こくとサイトがバグります。。。(*_*)プラグインは、サイトの動作が遅くなる可能性や動作不具合が発生する可能性なども有り、基本的に無駄なプラグインを追加しないのが鉄則です。自力でタグを作るは、少々ハードルが高いかもしれません。

ということで、本日はその他をご紹介します。コピペでできるので、いいなぁ〜と思いましたらコピペで使ってみて下さい!
 
 

HTMLタグを利用して構築しよう

本日紹介する手法は、HTMLタグを利用します。その中でもDivタグをちょっと応用する事でできます。HTMLとかjavascriptわからないお。。。。と言う方もいらっしゃるかもしれませんが、本日はコピペでできるをモットーにご紹介いたしますので、ご安心下さい☆
 
それでは早速下のRead moreをクリックしてみてください。

 
開きましたか?そしてもう一回クリックすると閉じます。moreタグだと開いて閉じることはできないといったものもありますが、これは閉じることもできます。(# 今回は開いたあとはclose表記にはしておりません。変更もできますが本日はご紹介しません。)

これは便利なので記事内で私は度々利用してます。それでは、以下ソースです。

これをコピーし、最後の<div id=”open” style=”display: none; clear: both;”></div>の<div>タグの間に、moreを押した時に表示したい文を入れるだけです。
 
 

ちょっとした応用

上記はテンプレートですので、色を変えたり形を変えたりしたい方がいらっしゃるかと思います。そこで、少しだけ簡単な応用法を説明します。
 
 

色の変更

水色の色を変えたい方は1行目の、background-color: cornflowerblue部分をお好きな色に変えて下さい。色については、googleにてカラーチャートと検索すればでてきますので、そちらでご確認下さい。
 
 

形の変更

形の変更は1行目のborder-radius: 4px;部分を変更して下さい。数字を大きくすればするほど、角が丸くなっていき、小さくすればする程、角が角ばっていきます。
 
 

文字の色・形等

最後に文字の色です。Read more直前にあるdivタグの中の、color: blackの部分を変えて下さい。またアンダーラインを引きたい、太文字にしたい等あるかと思いますが、そちらもstyleの中に追記すれば良いです。styleの中に何を書けばわからない方は、wordpress標準でついている、<B>〜</B>、<U>〜</U>などでも対応可能ですので、そちらで対応する事も良いと思います。
 

 
 

まとめ

いかがでしたでしょうか?プラグインを使うよりは遥かに簡単ですし、プラグインに比べWEBサイトに負担がかからないかと思います。もし、お気に召しましたら、是非お使い下さい(´・ω・`)

 

本日、新たなWEBサイトを作成しました。少し気づきがあったので、別日にでもご紹介します。

ブログランキング
人気ブログランキングへ

lumbini

三十路間近サラリーマンのルンビーニです。海外を愛し、海外にて育てられ、海外によって性格が大きく変わりました。自由を求めて、インターネットを利用したビジネスをはじめましたが、、、、、上手く行ってません。上手く行っていない部分を赤裸々に日記、備忘録として残していきます。成功事例もあるかもしれませんが、本当に成功したい方は他のサイトを見たほうがよいと思います。笑)使える言語はPHP・HTML・CSS・Matlab等です。サラリーマンではプログラミングは一切使いません。営業ですから…

あわせて読みたい

コメントを残す

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