Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

初心者のための

ワードプレスでスクロールバー付きのボックスを表示しよう!

2018/12/08
 

 

 

 

 

他のブログを見たりしていると、色々と勉強になりますね。

 

記事の書き方だったり、装飾の方法だったり。

 

その中で、限られた枠の中に文字や絵があって、スクロールバーでスクロールすると、見えるようにしているサイトを見かけたんです。

 

そういうのってどうやってやるのかなって調べてみたので、ご紹介しますね。

 

スクロールバー付きのボックス

 

 

ワードプレスで蛍光マーカーを引こう!
ワードプレスのフォントを追加CSSで変更
AddQuicktagで囲み枠を登録しよう
CSSについての記事はこれぐらいでしょうか?
是非見てみてくださいね!

 

こんな感じに表示されるようになります。

リンクも張れるので、たくさん記事を紹介したい時とかに良いかもしれませんね。

 

CSSとHTMLを使用

 

追加CSSにコードを追加して、HTMLで呼び出して使用するようです。

 

 

 

 

 

 

追加CSSにコードを追加

 

 

「外観」から「CSS編集」をクリックしましょう。

 

 

 

「追加CSS」をクリックします。

 

 

 

ここに、下記のコードを追加しましょう。

 

 

 

 

色はお好みで変更してくださいね。

 

 

AddQuiktagに登録

 

あとは、記事で下記のコードを呼び出すと、スクロールバー付きのボックスが表示されるようになります。

 

 

 

毎回テキストに貼り付けてってやっぱり大変なので、AddQuiktagに登録しちゃいましょう!

 

登録方法は下記の記事をどうぞ!

 

関連記事
 
 
開始タグは「<p class=”infobox”> ここにボックスの中身」、終了タグは「</p>」です。

 

 

まとめ

 

色々とやりたいなと思うことがあっても、また今度って思ったりしてできなかったことができるようになると、やっぱりうれしいですね。

 

今度は何ができるようになるのかなぁ。

 

  ではまた!まみでした。

 

 

 

 

 

 

 

- Comments -

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

Copyright© ワードプレスお困りごと講座 , 2018 All Rights Reserved.