リベ大

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

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

タイトル

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

かつら

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

たずねこ

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

<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パソコンでも大きく変わらないと思いますが、検証していないのでうまくいくかわかりません。

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

リベシティの場合

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

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

投稿のコツ

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

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

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

手順は次の3つです。

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

この順番に解説します。

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

<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つです。

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

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

<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のブロックに貼り付けます。

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

<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>

タイトルを編集するとタイトルが変わります。

リベシティで見かける青いボックスを変えると本文が変わります。

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

たずねこ

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

かつら

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

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

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

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

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

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

  • (方法1)右クリックから
  • (方法2)表示タブから

その後、仕上げになります。

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

■タイトル
 テーマ


内容1
内容2
かつら

黒板は馴染みがあります

(方法1)右クリックから

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

(方法2)表示タブから

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

仕上げ

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

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

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

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

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

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

かつら

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

<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">内容1</div><div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l">内容2</div></div></div>

たずねこ

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

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

■タイトル
 テーマ


内容1
内容2

おわりに

タイトル

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

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

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

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

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

コードはこちら

<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>

リベシティ

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

WordPress

  1. コードをコピーする
  2. カスタムHTMLに貼り付け
  3. コードを書き換える
たずねこ

もっといろいろな装飾を使ってみたい!

このような声があると思ったので、Webページ上で気に入った装飾をコピーする方法も紹介しました。

ただし、今回紹介したのはGoogleChrome限定の方法です。

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

■タイトル
 テーマ


内容1
内容2

新しい装飾を例にコピーする方法を紹介しました。

流れはざっくり言うとこちら

  • (方法1)右クリックから
  • (方法2)表示タブから

その後、仕上げになります。

この方法はコードを見るのに慣れていない方には難しく感じるかもしれません。

しかし、HTMLの知識が少しあれば大丈夫です。

かつら

この機会にプログラミングの勉強をはじめてみるのもオススメですよ!

最後までご覧いただき、ありがとうございました!

ブログは不定期に更新していますが、Twitterでの発信は毎日続けています。

Instagramでは東北みやげに絞って発信しています。

興味がある方はぜひフォローしていただけると嬉しいです!

↓日本ブログ村ランキングに参加中です。ポチッとしていただけると励みになります!

にほんブログ村 にほんブログ村へ
にほんブログ村
ABOUT ME
かつら
将来設計をしなおそうと勉強しているところで両学長の動画に出会いました。 経済的自由に向けて勉強していること、考えていることを発信していきます。同じように経済的自由に向けて頑張っている方と繋がりたいです。

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA