ツール

記事をシェアする時に「Share HTML」でよりシンプルなHTMLでシェアしよう

さて、みなさんブログやホームページでリンクや他サイトの記事をシェアしたいとき、ありませんか?

特にブロガーの方なんかは、引用をしたり自サイトの過去のブログ記事を別の記事内で共有するときなど、「シェア」という機会はそれなりにあるのではないか、と思います。

そんな方に今回は「リンクを入力するだけで見た目を整えたデザインで共有ができるようになる」そんな魔法のようなhtml作成ツールをご紹介します。

ShareHtmlを、もっと綺麗にしたメーカー

その名の通り、htmlをシェアする際により綺麗にかつシェアがしやすいようなところまでを作ってくれるメーカーを発見しました。制作者はブログ界ではおそらく知らない人はいないでしょう、マナブログのマナブさんです(https://manablog.org)。

使い方はいたって簡単。

ページを開いてから入力部分にシェアしたいURLリンクを入力しEnter。

するとその下に実際に表示するためのhtmlとそれをデザインするためのcssが表示されます。あとはこれをコピーするだけ。

実際にブログ内で設置してみる

それでは実際にブログ内で設置してみましょう。(ここからはほんとにちょっとだけコードを入力します。)

1.設置したいブログの編集ページで移動する

まずは、デザインを設置したいブログページを開きます。

2.編集モードを「ビジュアル」→「テキスト」に

続いてタイトル下にあるモードを切り替えます。ページ編集画面を開くとデフォルトは「ビジュアル」になっているため、これを右側の「テキスト」モードに変更します。

すると、このようにhtmlコードなどが表記されたhtmlベースの画面になります。(おそらくプラグインなどを入れてテキストモードやhtmlモードになっている場合はそのままでOK)

3.まずはhtmlをコピペ(注意点あり)

では、この画面になったら先ほどのShareHtmlで生成したhtmlをコピー。そこからテキストモードになった編集画面で、設置したい部分にそのコードを貼り付けます。

ここで注意点として、テキストモードで改行する際には「半角英数字」でするようにしましょう。全角だと文字のスペースとして反映されてしまうため、謎の隙間が発生してしまいます。

ちなみに現状の状態をビジュアルモードに戻すと、まだcssのデザインを反映していないため、普通のテキストとして表示されています。

4.続いてcssをコピペ(注意点あり)

htmlコードをコピペしたら、続いてその装飾を担当しているcssを反映します。ここでポイントが二つ。

入力する際のポイント
  • 先ほどコピペしたhtmlコードの直前に配置
  • <style></style>でcssを囲う

この2点。簡単にご説明します。

まず、コピーしてからペーストする場所ですが、ここにペーストしてください。

続いて二つ目の注意点。このペーストしたcssを

<style> ここにcssコードが入るように </style>

という形になるように記述します。ここも半角英数字で入力することをお忘れなく。こんな形になります。なぜ先ほどのhtmlコードの前に記述しなければならないかというと、基本的にはhtmlコードの読み込み方は「上→下」の流れで進みます。

htmlの構造的に
①まずcssでデザインの情報はこれですよ
②それに該当してるhtmlに装飾していきますよ

というような流れになるので、先にhtmlコードを入力していくと「あれ、装飾してくれるものがわからないから見た目を綺麗にできない!!」

となってしまうので、先にcssの記述をしてね、ということですね。(うまく伝わってなかったらごめんなさい)

赤枠が実際に入力した範囲。青枠が先ほどペーストしたhtmlコードになります。この状態でプレビュー画面で表示を確認してみましょう!

こんなふうに表示されます!

無事デザインが出来上がってますね。やったね。

簡単にシェアできる「ShareHtml」でオシャレに見せよう

いかがでしたでしょうか?

リンクを入力するだけでhtmlとcssがすぐにできて、わかりやすいデザインで記事をシェアすることができる「ShareHtml」を利用して、よりみやすくわかりやすいサイトや記事作りをしていきましょう〜!

この記事が気に入ったら
いいね ! しよう