2021.12.13 2022.11.05

【リベシティで見かける青いボックスが使いたい！】GoogleChromeでWebページの装飾をコピーする方法

かつら

リベシティを利用しているみなさん、最近こんな装飾をして発言している方を見かけませんか？

タイトル

リベシティで見かける青いボックス

ドキはん

リベシティマガジンでよく見るやつですよね！
どうやったら使えるのか知りたかったんです！

かつら

これ実は公式で使い方は発表されていないんですよ。使ってみたい方はこれをコピペしてください！

1<div class="fr-inner"><div style="margin:0em;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#fff;background:#51acda;font-weight:bold;text-align:center;border-radius:5px 5px 0 0">タイトル</div><div style="background:#fff;border:solid 3px #51acda;border-radius:0 5px 5px;padding:20px;font-size:100%"><p><strong>リベシティで見かける青いボックス</strong></p></div></div>

タイトルと本文はこのコードの中の日本語を書き換えればいいんですが、実はリベシティだと貼り付けたあとに直接編集できます。

コピーしたらマイチャットで実験してみてください！

かつら

青いボックスを使ってみたいだけの方はここで終了です！
お疲れ様でした！

たずねこ

あれ、まだ始まったばかりなんですが……

この記事でお伝えする内容は次の2点です。

実際に青いボックスを投稿する方法
Webページ上で気に入った装飾をコピーする方法

この方法をマスターすると、リベシティ以外にも応用が効くのでオススメです。

実際、WordPressでも利用可能なのです。

WordPressでも

利用可能ですよ

装飾をコピーする方法はパソコンでGoogleChromeをお使いの方のみが使用可能となっており、特に必見の内容になっています。

たずねこ

ぜひ最後までご覧ください

Macパソコンでの説明しか載せることができませんでした。Windowパソコンでも大きく変わらないと思いますが、検証していないのでうまくいくかわかりません。

Contents

実際に青いボックスを投稿する方法
- リベシティの場合
- WordPressの場合
Webページの装飾をコピーする方法
まとめ：コードを利用して青いボックスを使おう

実際に青いボックスを投稿する方法

リベシティの場合

さっそく青いボックスの使い方を紹介したいところですが、先にリベシティで投稿するときのコツをお伝えします。

これをやっておくと、編集中に不具合が起きる確率をグッと減らすことができるのでオススメです！

投稿のコツ

空白行を3つ作っておき、真ん中に書いていく。

このようなイメージです。実際は改行で空白を作っておきます。

それでは実際に青いボックスを使う様子を書きますので、この通りにやってみてください。

手順は次の3つです。

コードをコピーする
空白の真ん中に貼り付ける
直接編集する

この順番に解説します。

まず、青いボックスのコードをコピーします。

1<div class="fr-inner"><div style="margin:0em;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#fff;background:#51acda;font-weight:bold;text-align:center;border-radius:5px 5px 0 0">タイトル</div><div style="background:#fff;border:solid 3px #51acda;border-radius:0 5px 5px;padding:20px;font-size:100%"><p><strong>リベシティで見かける青いボックス</strong></p></div></div>

リベシティの投稿画面で、空白行の真ん中に貼り付けます。

すると、タイトル、本文を直接編集することができます。

ここはタイトル付きで強調しておきたい！　という場所があればぜひ活用してください。

かつら

直接編集できるのはありがたいです！

WordPressの場合

続いて、WordPressの場合を解説します。
手順は次の3つです。

コードをコピーする
カスタムHTMLに貼り付け
コードを書き換える

まずは、青いボックスのコードをコピーします。

1<div class="fr-inner"><div style="margin:0em;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#fff;background:#51acda;font-weight:bold;text-align:center;border-radius:5px 5px 0 0">タイトル</div><div style="background:#fff;border:solid 3px #51acda;border-radius:0 5px 5px;padding:20px;font-size:100%"><p><strong>リベシティで見かける青いボックス</strong></p></div></div>

次に、WordPressの編集画面で、カスタムHTMLのブロックに貼り付けます。

最後にコードを書き換えます。

1<div class="wp-block-jin-gb-block-box simple-box1">
2<pre class="wp-block-code copytxt-3"><code><div class="fr-inner"><div style="margin:0em;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#fff;background:#51acda;font-weight:bold;text-align:center;border-radius:5px 5px 0 0"><span class="sbd-text-bold">タイトル</span></div><div style="background:#fff;border:solid 3px #51acda;border-radius:0 5px 5px;padding:20px;font-size:100%"><p><strong><span class="sbd-text-red">リベシティで見かける青いボックス</span></strong></p></div></div>
3</code></pre>
4<p><span class="sbd-text-bold">タイトル</span>を編集するとタイトルが変わります。</p>
5<p><span class="sbd-text-red">リベシティで見かける青いボックス</span>を変えると本文が変わります。</p>
6</div>

以上です。もし気に入った装飾を見つけたらこの要領で試してみてください。

たずねこ

他の装飾も使ってみたくなりました！

かつら

それでは次に、装飾をコピーする方法をお伝えします

Webページの装飾をコピーする方法

今回紹介する方法はパソコンのGoogleChrome限定です。

逆に言うと、この方法ができるのでブラウザはGoogleChromeがオススメですよ！

途中まで2通りの方法があり、最終的には同じ方法にたどり着きます。どちらか好きな方法で試してみてくださいね。

（方法1）右クリックから
（方法2）表示タブから

その後、しあげになります。

今回は、新たにリベシティで見かけた装飾をコピーしたいと思います。

■タイトル

テーマ

内容１

内容２

かつら

黒板は馴染みがあります

（方法１）右クリックから

コピーしたい場所で右クリックをし、検証を押します。

（方法２）表示タブから

上にある「表示」→「開発／管理」→「要素の検証」を押します。

しあげ

どちらかの方法で検証まで辿り着くことができましたか？　それでは仕上げです。

多少表示が違うかもしれませんが、このような画面が出てきます。

Elementsタブが選択されていることを確認してください。

この画面ではコードを選ぶと対応する装飾に色が付くのでわかりやすいです。

それでは、コピーしたい装飾全体が表示される箇所を選択します。選択されている行は青で色付けされていますね。

選択されて青くなっている行を右クリックして「Copy」→「Copy element」を押します。

かつら

これでコードがコピーされました

1<div class="wp-block-jin-gb-block-box simple-box6"><pre class="wp-block-code"><code><div><div class="l-border" style="border:8px solid #aa6600;background:#104300;color:#ffffff;box-shadow:2px 2px 4px #999999, 2px 2px 2px #002200 inset;padding:15px"><div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="margin-bottom:0.5em">■タイトル</div><div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="margin-bottom:0.5em"><strong>&nbsp;テーマ</strong></div><div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="margin-bottom:0.5em"><strong><p><br></p></strong></div><div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l">内容１</div><div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l">内容２</div></div></div></code></pre><p></p></div>

たずねこ

あとは先ほどの青いボックスを利用した要領で、リベシティやWordPressで使えますよ！

ぜひいろいろな装飾をコピーしていじってみてください。

■タイトル

テーマ

内容１

内容２

まとめ：コードを利用して青いボックスを使おう

タイトル

リベシティで見かける青いボックス

今回は、最近リベシティで見かける青いボックスをきっかけに、次の2つの内容をお届けしました。

実際に青いボックスを投稿する方法
Webページ上で気に入った装飾をコピーする方法

実際に青いボックスを投稿する方法では、リベシティ、WordPressの2つの場面に分けて投稿する方法を説明しました。

どちらの場合もコードをコピーするところは共通です。その後に目的によって方法が変わります。

コードはこちら

1<div class="fr-inner"><div style="margin:0em;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#fff;background:#51acda;font-weight:bold;text-align:center;border-radius:5px 5px 0 0">タイトル</div><div style="background:#fff;border:solid 3px #51acda;border-radius:0 5px 5px;padding:20px;font-size:100%"><p><strong>リベシティで見かける青いボックス</strong></p></div></div>