こんにちは。MTKです。今回は初心者ブロガーの方が記事を投稿する際に、便利なスクロールバーについて解説していきます。
私はアフィンガー５を利用していますが、WordPressの他テーマを利用している方も問題なく、以下の方法でスクロールバーを設置することが可能です。
今回はCSSなどの実装は必要ないので、通常の投稿の時に「テキスト」でHTMLソースをコピーするだけで大丈夫です。初心者でも10秒でスクロールバーを設置できますのでご安心ください。
スポンサーリンク
スクロールバーとは？（スクロール枠）
ボックスの中に文字や画像などのコンテンツが長すぎてしますと、ユーザビリティが低下してしまい、ユーザーはスクロールすることを諦めてしまいます。その結果、ページの滞在時間が減ってしまいます。
でもどうしても知らない人には説明したい！長いけど見たい人もいるはず！
そんな時に便利なのが、スクロールバー（スクロール枠）の設定です。横方向や縦方向の向きに操作することもできます！
＜例＞
以下のようなものすごい長い文章は読みずらいですよね。
＜例＞
上記の文章をスクロールバー枠に挿入することで、見たい人だけが、スクロールバーを操作して、全て見ることができます。
興味ない人は、スクロールバー以外の部分でスクロールすることで次に進むことができます。
I reached the pinnacle ofsuccess in the business world.
私は、ビジネスの世界で、成功の頂点に君臨した。
In others’ eyes, my life is an epitome of success.
他の人の目には、私の人生は、
成功の典型的な縮図に見えるだろう。
However, aside from work, I have little joy.
In the end, wealth is only a fact of life that
I am accustomed to.
しかし、仕事をのぞくと、喜びが少ない人生だった。
人生の終わりには、富など、私が積み上げてきた
人生の単なる事実でしかない。
At this moment, lying on the sick bed and
recalling my whole life,
I realize that all the recognition and wealth that
I took so much pride in, have paled and become
meaningless in the face of impending death.
病気でベッドに寝ていると、
人生が走馬灯のように思い出される。
私がずっとプライドを持っていたこと、
認証（認められること）や富は、
迫る死を目の前にして
色あせていき、何も意味をなさなくなっている。
In the darkness, I look at the green lights from
the life supporting machines and hear the
humming mechanical sounds,
この暗闇の中で、生命維持装置の
グリーンのライトが点滅するのを見つめ、
機械的な音が耳に聞こえてくる。
I can feel the breath of God and of death drawing closer…
神の息を感じる。死がだんだんと近づいている。。。。
Now I know, when we have accumulated
sufficient wealth to last our lifetime, we should pursue
other matters that are unrelated to wealth…
今やっと理解したことがある。
人生において十分にやっていけるだけの
富を積み上げた後は、富とは関係のない
他のことを追い求めた方が良い。
Should be something that is more important:
もっと大切な何か他のこと。
Perhaps relationships, perhaps art,
perhaps a dream from younger days …
それは、人間関係や、芸術や、
または若い頃からの夢かもしれない。
Non-stop pursuing of wealth will only turn
a person into a twisted being, just like me.
終わりを知らない富の追求は、
人を歪ませてしまう。私のようにね。
God gave us the senses to let us feel
the love in everyone’s heart, not the illusions
brought about by wealth.
神は、誰もの心の中に、
富みによってもたらされた幻想ではなく、
愛を感じさせるための「感覚」
というものを与えてくださった。
The wealth I have won in my life I cannot bring with me.
私が勝ち得た富は、（私が死ぬ時に）
一緒に持っていけるものではない。
What I can bring is only the
memories precipitated by love.
私が持っていける物は、愛情にあふれた思い出だけだ。
That’s the true riches which will follow you,
accompany you, giving you strength and light to go on.
これこそが本当の豊かさであり、あなたとずっと
一緒にいてくれるもの、あなたに力をあたえてくれるもの
あなたの道を照らしてくれるものだ。
Love can travel a thousand miles.
Life has no limit. Go where you want to go.
Reach the height you want to reach.
It is all in your heart and in your hands.
愛とは、何千マイルも超えて旅をする。
人生には限界はない。
行きたいところに行きなさい。
望むところまで高峰を登りなさい。
全てはあなたの心の中にある、全てはあなたの手の中にあるのだから
では早速設定していきましょう！
スポンサーリンク
縦のスクロールバーを設置する方法
縦のスクロールバーの設定は、以下の順です。
簡単な流れ
- 投稿＞テキストモードに変更
- ソースコードをコピーして貼り付ける
- 「文章を入れる」の部分にスクロールさせたい文章を入れる
以下のHTMLソースコードをテキストに張り付けます。「文章を入れる」部分を枠内に入れたい文章に変更して下さい。
<div id="scroll" style="height: 200px; overflow: auto; padding: 16px; border: 1px solid #ccc; background: #fffff7; border-radius: 6px;">
<p></p>「文章を入れる」</div>
【画像説明】詳しい手順
step.1
投稿ページに移動し、「テキストモード」へ切り替える
step.2
スクロールバーを設置したいところにカーソルを置き、ソースコードを張り付ける
step.3
「文章をいれる」部分にスクロールさせたい文章を入れる
（ソース上）
ソース下
プレビューを確認してみてください。以下のようにスクロールバーが出てきたらOKです！
I reached the pinnacle ofsuccess in the business world.
私は、ビジネスの世界で、成功の頂点に君臨した。
In others’ eyes, my life is an epitome of success.
他の人の目には、私の人生は、
成功の典型的な縮図に見えるだろう。
However, aside from work, I have little joy.
In the end, wealth is only a fact of life that
I am accustomed to.
しかし、仕事をのぞくと、喜びが少ない人生だった。
人生の終わりには、富など、私が積み上げてきた
人生の単なる事実でしかない。
At this moment, lying on the sick bed and
recalling my whole life,
I realize that all the recognition and wealth that
I took so much pride in, have paled and become
meaningless in the face of impending death.
病気でベッドに寝ていると、
人生が走馬灯のように思い出される。
私がずっとプライドを持っていたこと、
認証（認められること）や富は、
迫る死を目の前にして
色あせていき、何も意味をなさなくなっている。
In the darkness, I look at the green lights from
the life supporting machines and hear the
humming mechanical sounds,
この暗闇の中で、生命維持装置の
グリーンのライトが点滅するのを見つめ、
機械的な音が耳に聞こえてくる。
I can feel the breath of God and of death drawing closer…
神の息を感じる。死がだんだんと近づいている。。。。
Now I know, when we have accumulated
sufficient wealth to last our lifetime, we should pursue
other matters that are unrelated to wealth…
今やっと理解したことがある。
人生において十分にやっていけるだけの
富を積み上げた後は、富とは関係のない
他のことを追い求めた方が良い。
Should be something that is more important:
もっと大切な何か他のこと。
Perhaps relationships, perhaps art,
perhaps a dream from younger days …
それは、人間関係や、芸術や、
または若い頃からの夢かもしれない。
Non-stop pursuing of wealth will only turn
a person into a twisted being, just like me.
終わりを知らない富の追求は、
人を歪ませてしまう。私のようにね。
God gave us the senses to let us feel
the love in everyone’s heart, not the illusions
brought about by wealth.
神は、誰もの心の中に、
富みによってもたらされた幻想ではなく、
愛を感じさせるための「感覚」
というものを与えてくださった。
The wealth I have won in my life I cannot bring with me.
私が勝ち得た富は、（私が死ぬ時に）
一緒に持っていけるものではない。
What I can bring is only the
memories precipitated by love.
私が持っていける物は、愛情にあふれた思い出だけだ。
That’s the true riches which will follow you,
accompany you, giving you strength and light to go on.
これこそが本当の豊かさであり、あなたとずっと
一緒にいてくれるもの、あなたに力をあたえてくれるもの
あなたの道を照らしてくれるものだ。
Love can travel a thousand miles.
Life has no limit. Go where you want to go.
Reach the height you want to reach.
It is all in your heart and in your hands.
愛とは、何千マイルも超えて旅をする。
人生には限界はない。
行きたいところに行きなさい。
望むところまで高峰を登りなさい。
全てはあなたの心の中にある、全てはあなたの手の中にあるのだから