【プラグインなし】WordPressで「スクロールボックス」を実装する方法とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「「スクロールボックス」を実装する方法」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・WordPressサイトを運営している方
・スクロールボックスを実装したい方
・HTML/CSSなどを学習中の方

スクロールボックスを設置しよう!

[{“id”:”node_88u8i8″,”type”:”default”,”data”:{“label”:”Blog osakanav”},”position”:{“x”:-266,”y”:97.99999999999999},”className”:”green”},{“id”:”node_sedzgx”,”type”:”output”,”data”:{“label”:”Free BGM”},”position”:{“x”:-4,”y”:233}},{“id”:”node_zuxylc”,”type”:”input”,”data”:{“label”:”Osakana”},”position”:{“x”:-4,”y”:47}},{“id”:”node_z73blb”,”type”:”default”,”data”:{“label”:”note”},”position”:{“x”:246,”y”:97},”className”:”teal”},{“id”:”node_xx3wt”,”source”:”node_zuxylc”,”target”:”node_z73blb”,”animated”:false,”type”:”smoothstep”},{“source”:”node_zuxylc”,”sourceHandle”:null,”target”:”node_88u8i8″,”targetHandle”:null,”id”:”reactflow__edge-node_zuxylcnull-node_88u8i8null”,”animated”:false,”type”:”smoothstep”},{“id”:”node_av7usp”,”type”:”default”,”data”:{“label”:”Youtube”},”position”:{“x”:-4,”y”:149},”className”:”blue”},{“id”:”node_0gdjxq”,”source”:”node_zuxylc”,”target”:”node_av7usp”,”animated”:false},{“source”:”node_av7usp”,”sourceHandle”:null,”target”:”node_sedzgx”,”targetHandle”:null,”id”:”reactflow__edge-node_av7uspnull-node_sedzgxnull”,”type”:”straight”,”animated”:false},{“id”:”node_rq94db”,”type”:”output”,”data”:{“label”:”Programming”},”position”:{“x”:329.00000000000006,”y”:188}},{“id”:”node_awr9tw”,”type”:”output”,”data”:{“label”:”essay”},”position”:{“x”:165.00000000000003,”y”:187}},{“source”:”node_z73blb”,”sourceHandle”:null,”target”:”node_awr9tw”,”targetHandle”:null,”id”:”reactflow__edge-node_z73blbnull-node_awr9twnull”},{“source”:”node_z73blb”,”sourceHandle”:null,”target”:”node_rq94db”,”targetHandle”:null,”id”:”reactflow__edge-node_z73blbnull-node_rq94dbnull”,”animated”:true},{“id”:”node_myg9dq”,”type”:”output”,”data”:{“label”:”Technology”},”position”:{“x”:-356,”y”:198}},{“id”:”node_4drfmf”,”type”:”output”,”data”:{“label”:”Life”},”position”:{“x”:-175,”y”:197}},{“source”:”node_88u8i8″,”sourceHandle”:null,”target”:”node_myg9dq”,”targetHandle”:null,”id”:”reactflow__edge-node_88u8i8null-node_myg9dqnull”},{“source”:”node_88u8i8″,”sourceHandle”:null,”target”:”node_4drfmf”,”targetHandle”:null,”id”:”reactflow__edge-node_88u8i8null-node_4drfmfnull”}]
おさかな
おさかな

今回は、こんな感じのスクロールボックスを設置していくよ!

ナビまる
ナビまる

長文を扱うときなどに使うと便利だよ~🌟

おさかな
おさかな

なるほど…。(知らなかったとは言えない…💦)

【プラグインなし】WordPressで折りたたみ【アコーディオンリスト】を設置する方法を解説!
みなさんこんにちは!おさかなです!今回は「アコーディオンリストの設置方法」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・WordPress初心者の方・クリックすると開く、アコーディオンリ...

実装していこう!

事前準備

ブロックエディタへの移行がまだの方は、コチラを参考にして移行しておきましょう!

【WordPress】ブロックエディタへ切り替えてみよう!
みなさんこんにちは!おさかなです!今回は「ブロックエディタ」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・まだクラシックエディタを利用している方・サポート期限が気になる方・ブロックエディ...

次に、こちらのHTMLコードをコピーしておきます!(よいしょっ!)
後ほど使うので、忘れないようにしておきましょう。

<div style="border: 1px solid #ccc; height: 200px; overflow: auto; width: 80%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #fffcfc; margin: auto; padding: 10px;">
ここにテキストを入れます!
</div>

設置していこう!

それでは設定をしていきます!
まず「ダッシュボード」>「投稿」>「新規追加」へ移動します。

次に本文内の「プラスマークをクリックします!(ポチっと!)

するとウィンドウが表示されるので、ボックスに「カスタム HTML」と入力して、選択します。

すると、HTMLの入力ボックスが表示されるので、先ほどコピーしたコードを貼り付けます!(えいやあっ!)

カスタマイズしてみよう!

ここではコードを書き替えて、カスタマイズをしてみたいと思います!
HTML/CSSなどマークアップの知識が少しあると、編集がスムーズになるので興味のある方はぜひ学んでみることをオススメします✨

【独学にも!】プログラミングから、ビジネスまで学べる学習サイト【Udemy】を始めてみよう!
みなさんこんにちは!おさかなです!今回は「Udemy」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・テクノロジーやビジネスに関する知識を学びたい方・より「プログラミング」の知識を深めたい...

ここにテキストを入れます!と記載してある部分を編集すると、テキストの中身を変更することができます!(試しに、芥川龍之介のトロッコの冒頭入れてみました。)

#から始まる16進数のカラーコードを使用することで、ボックスのフレーム背景の色を変えることもできます!

フレームの色が黄色マーカーの箇所、背景色が赤マーカーの箇所です!

<div style="border: 1px solid #ccc; height: 200px; overflow: auto; width: 80%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #fffcfc; margin: auto; padding: 10px;">
ここにテキストを入れます!
</div>

カラーコードは下記サイトが参考になります!(ふむふむ…。)

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

スクロールボックスのサイズも変更することができます!(おお!)

高さ横幅は「px」や「%」で指定すればOKです✨

<div style="border: 1px solid #ccc; height: 200px; overflow: auto; width: 80%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #fffcfc; margin: auto; padding: 10px;">
ここにテキストを入れます!
</div>

(あともう少し…🍵)

【WordPress】プラグイン【codoc】で有料記事を販売してみよう!
みなさんこんにちは!おさかなです!今回は「【codoc】の有料記事販売」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・WordPressサイトで有料記事を販売したい方・有料コンテンツを販...

表示を確認しよう!

それでは右上の「プレビュー」から表示を確認していきましょう!

すると…?
こうですね!いい感じに設定が反映されています!(やった~!)

実際に作成したスクロールボックスはこちら!

 小田原熱海あたみ間に、軽便鉄道敷設ふせつの工事が始まったのは、良平りょうへいの八つの年だった。良平は毎日村外はずれへ、その工事を見物に行った。工事を――といったところが、唯ただトロッコで土を運搬する――それが面白さに見に行ったのである。  トロッコの上には土工が二人、土を積んだ後うしろに佇たたずんでいる。トロッコは山を下くだるのだから、人手を借りずに走って来る。煽あおるように車台が動いたり、土工の袢天はんてんの裾すそがひらついたり、細い線路がしなったり――良平はそんなけしきを眺ながめながら、土工になりたいと思う事がある。せめては一度でも土工と一しょに、トロッコへ乗りたいと思う事もある。トロッコは村外れの平地へ来ると、自然と其処そこに止まってしまう。と同時に土工たちは、身軽にトロッコを飛び降りるが早いか、その線路の終点へ車の土をぶちまける。それから今度はトロッコを押し押し、もと来た山の方へ登り始める。良平はその時乗れないまでも、押す事さえ出来たらと思うのである。  或ある夕方、――それは二月の初旬だった。良平は二つ下の弟や、弟と同じ年の隣の子供と、トロッコの置いてある村外れへ行った。トロッコは泥だらけになったまま、薄明るい中に並んでいる。が、その外ほかは何処どこを見ても、土工たちの姿は見えなかった。三人の子供は恐る恐る、一番端はしにあるトロッコを押した。トロッコは三人の力が揃そろうと、突然ごろりと車輪をまわした。良平はこの音にひやりとした。しかし二度目の車輪の音は、もう彼を驚かさなかった。ごろり、ごろり、――トロッコはそう云う音と共に、三人の手に押されながら、そろそろ線路を登って行った。  その内にかれこれ十間けん程来ると、線路の勾配こうばいが急になり出した。トロッコも三人の力では、いくら押しても動かなくなった。どうかすれば車と一しょに、押し戻されそうにもなる事がある。良平はもう好よいと思ったから、年下の二人に合図をした。 「さあ、乗ろう!」  彼等は一度に手をはなすと、トロッコの上へ飛び乗った。トロッコは最初徐おもむろに、それから見る見る勢いきおいよく、一息に線路を下くだり出した。その途端につき当りの風景は、忽たちまち両側へ分かれるように、ずんずん目の前へ展開して来る。顔に当る薄暮はくぼの風、足の下に躍おどるトロッコの動揺、――良平は殆ほとんど有頂天うちょうてんになった。  しかしトロッコは二三分の後のち、もうもとの終点に止まっていた。 「さあ、もう一度押すじゃあ」  良平は年下の二人と一しょに、又トロッコを押し上げにかかった。が、まだ車輪も動かない内に、突然彼等の後うしろには、誰かの足音が聞え出した。のみならずそれは聞え出したと思うと、急にこう云う怒鳴り声に変った。 「この野郎! 誰に断ことわってトロに触さわった?」  其処には古い印袢天しるしばんてんに、季節外れの麦藁帽むぎわらぼうをかぶった、背の高い土工が佇んでいる。――そう云う姿が目にはいった時、良平は年下の二人と一しょに、もう五六間逃げ出していた。――それぎり良平は使の帰りに、人気のない工事場のトロッコを見ても、二度と乗って見ようと思った事はない。唯その時の土工の姿は、今でも良平の頭の何処かに、はっきりした記憶を残している。薄明りの中に仄ほのめいた、小さい黄色の麦藁帽、――しかしその記憶さえも、年毎としごとに色彩は薄れるらしい。  その後のち十日余りたってから、良平は又たった一人、午ひる過ぎの工事場に佇みながら、トロッコの来るのを眺めていた。すると土を積んだトロッコの外ほかに、枕木まくらぎを積んだトロッコが一輛りょう、これは本線になる筈はずの、太い線路を登って来た。このトロッコを押しているのは、二人とも若い男だった。良平は彼等を見た時から、何だか親しみ易やすいような気がした。「この人たちならば叱しかられない」――彼はそう思いながら、トロッコの側そばへ駈かけて行った。 「おじさん。押してやろうか?」  その中の一人、――縞しまのシャツを着ている男は、俯向うつむきにトロッコを押したまま、思った通り快い返事をした。 「おお、押してくよう」  良平は二人の間にはいると、力一杯押し始めた。 「われは中中なかなか力があるな」  他たの一人、――耳に巻煙草まきたばこを挟はさんだ男も、こう良平を褒ほめてくれた。  その内に線路の勾配は、だんだん楽になり始めた。「もう押さなくとも好よい」――良平は今にも云われるかと内心気がかりでならなかった。が、若い二人の土工は、前よりも腰を起したぎり、黙黙と車を押し続けていた。良平はとうとうこらえ切れずに、怯おず怯おずこんな事を尋ねて見た。 「何時いつまでも押していて好いい?」 「好いとも」  二人は同時に返事をした。良平は「優しい人たちだ」と思った。  五六町余り押し続けたら、線路はもう一度急勾配になった。其処には両側の蜜柑畑みかんばたけに、黄色い実がいくつも日を受けている。 「登り路みちの方が好い、何時いつまでも押させてくれるから」――良平はそんな事を考えながら、全身でトロッコを押すようにした。  蜜柑畑の間を登りつめると、急に線路は下くだりになった。縞のシャツを着ている男は、良平に「やい、乗れ」と云った。良平は直すぐに飛び乗った。トロッコは三人が乗り移ると同時に、蜜柑畑の※(「均のつくり」、第3水準1-14-75)においを煽あおりながら、ひた辷すべりに線路を走り出した。「押すよりも乗る方がずっと好い」――良平は羽織に風を孕はらませながら、当り前の事を考えた。「行きに押す所が多ければ、帰りに又乗る所が多い」――そうもまた考えたりした。  竹藪たけやぶのある所へ来ると、トロッコは静かに走るのを止やめた。三人は又前のように、重いトロッコを押し始めた。竹藪は何時か雑木林になった。爪先つまさき上りの所所ところどころには、赤錆あかさびの線路も見えない程、落葉のたまっている場所もあった。その路をやっと登り切ったら、今度は高い崖がけの向うに、広広と薄ら寒い海が開けた。と同時に良平の頭には、余り遠く来過ぎた事が、急にはっきりと感じられた。  三人は又トロッコへ乗った。車は海を右にしながら、雑木の枝の下を走って行った。しかし良平はさっきのように、面白い気もちにはなれなかった。「もう帰ってくれれば好いい」――彼はそうも念じて見た。が、行く所まで行きつかなければ、トロッコも彼等も帰れない事は、勿論もちろん彼にもわかり切っていた。  その次に車の止まったのは、切崩きりくずした山を背負っている、藁屋根の茶店の前だった。二人の土工はその店へはいると、乳呑児ちのみごをおぶった上かみさんを相手に、悠悠ゆうゆうと茶などを飲み始めた。良平は独ひとりいらいらしながら、トロッコのまわりをまわって見た。トロッコには頑丈がんじょうな車台の板に、跳はねかえった泥が乾かわいていた。  少時しばらくの後のち茶店を出て来しなに、巻煙草を耳に挟はさんだ男は、(その時はもう挟んでいなかったが)トロッコの側にいる良平に新聞紙に包んだ駄菓子をくれた。良平は冷淡に「難有ありがとう」と云った。が、直すぐに冷淡にしては、相手にすまないと思い直した。彼はその冷淡さを取り繕うように、包み菓子の一つを口へ入れた。菓子には新聞紙にあったらしい、石油の※(「均のつくり」、第3水準1-14-75)がしみついていた。  三人はトロッコを押しながら緩ゆるい傾斜を登って行った。良平は車に手をかけていても、心は外ほかの事を考えていた。  その坂を向うへ下おり切ると、又同じような茶店があった。土工たちがその中へはいった後あと、良平はトロッコに腰をかけながら、帰る事ばかり気にしていた。茶店の前には花のさいた梅に、西日の光が消えかかっている。「もう日が暮れる」――彼はそう考えると、ぼんやり腰かけてもいられなかった。トロッコの車輪を蹴けって見たり、一人では動かないのを承知しながらうんうんそれを押して見たり、――そんな事に気もちを紛らせていた。  ところが土工たちは出て来ると、車の上の枕木まくらぎに手をかけながら、無造作むぞうさに彼にこう云った。 「われはもう帰んな。おれたちは今日は向う泊りだから」 「あんまり帰りが遅くなるとわれの家うちでも心配するずら」  良平は一瞬間呆気あっけにとられた。もうかれこれ暗くなる事、去年の暮母と岩村まで来たが、今日の途みちはその三四倍ある事、それを今からたった一人、歩いて帰らなければならない事、――そう云う事が一時にわかったのである。良平は殆ほとんど泣きそうになった。が、泣いても仕方がないと思った。泣いている場合ではないとも思った。彼は若い二人の土工に、取って附けたような御時宜おじぎをすると、どんどん線路伝いに走り出した。  良平は少時しばらく無我夢中に線路の側を走り続けた。その内に懐ふところの菓子包みが、邪魔になる事に気がついたから、それを路側みちばたへ抛ほり出す次手ついでに、板草履いたぞうりも其処へ脱ぎ捨ててしまった。すると薄い足袋たびの裏へじかに小石が食いこんだが、足だけは遙はるかに軽くなった。彼は左に海を感じながら、急な坂路さかみちを駈かけ登った。時時涙がこみ上げて来ると、自然に顔が歪ゆがんで来る。――それは無理に我慢しても、鼻だけは絶えずくうくう鳴った。  竹藪の側を駈け抜けると、夕焼けのした日金山ひがねやまの空も、もう火照ほてりが消えかかっていた。良平は、愈いよいよ気が気でなかった。往ゆきと返かえりと変るせいか、景色の違うのも不安だった。すると今度は着物までも、汗の濡ぬれ通ったのが気になったから、やはり必死に駈け続けたなり、羽織を路側みちばたへ脱いで捨てた。  蜜柑畑へ来る頃には、あたりは暗くなる一方だった。「命さえ助かれば――」良平はそう思いながら、辷すべってもつまずいても走って行った。  やっと遠い夕闇ゆうやみの中に、村外れの工事場が見えた時、良平は一思いに泣きたくなった。しかしその時もべそはかいたが、とうとう泣かずに駈け続けた。  彼の村へはいって見ると、もう両側の家家には、電燈の光がさし合っていた。良平はその電燈の光に、頭から汗の湯気ゆげの立つのが、彼自身にもはっきりわかった。井戸端に水を汲くんでいる女衆おんなしゅうや、畑から帰って来る男衆おとこしゅうは、良平が喘あえぎ喘ぎ走るのを見ては、「おいどうしたね?」などと声をかけた。が、彼は無言のまま、雑貨屋だの床屋だの、明るい家の前を走り過ぎた。  彼の家うちの門口かどぐちへ駈けこんだ時、良平はとうとう大声に、わっと泣き出さずにはいられなかった。その泣き声は彼の周囲まわりへ、一時に父や母を集まらせた。殊ことに母は何とか云いながら、良平の体を抱かかえるようにした。が、良平は手足をもがきながら、啜すすり上げ啜り上げ泣き続けた。その声が余り激しかったせいか、近所の女衆も三四人、薄暗い門口へ集って来た。父母は勿論その人たちは、口口に彼の泣く訣わけを尋ねた。しかし彼は何と云われても泣き立てるより外に仕方がなかった。あの遠い路を駈け通して来た、今までの心細さをふり返ると、いくら大声に泣き続けても、足りない気もちに迫られながら、…………  良平は二十六の年、妻子さいしと一しょに東京へ出て来た。今では或雑誌社の二階に、校正の朱筆しゅふでを握っている。が、彼はどうかすると、全然何の理由もないのに、その時の彼を思い出す事がある。全然何の理由もないのに?――塵労じんろうに疲れた彼の前には今でもやはりその時のように、薄暗い藪や坂のある路が、細細と一すじ断続している。…………

いい感じになっていますね~!(わーい!)

おさかな
おさかな

みなさんのサイトが、より良いものになりますように~✨

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

【WordPress】サイトを「ダークモード」にできちゃうプラグイン【WP Dark Mode】とは?
みなさんこんにちは!おさかなです!今回は「WP Dark Mode」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・WordPressサイトを運営している方・サイトにダークモード機能を実装...

ここまで読んでくださり、ありがとうございました!

おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました