YUUU BroG

- ゲームとイラストとWebデザイン -

【簡単】ブログでHTMLソースを共通化!別ページで呼び出す方法を解説

f:id:yuu-tunamayo:20171102151239j:plain

2017.11.28 更新
今回ははてなブロガー向けの記事になります。記事を書いていると「あー、この文章(パーツ)他の記事でも使いたいなー」なんて思ったことはありませんか?

「毎回書くの面倒...」
「また過去の記事からコピペしなきゃ...」

ちょっとした手間も毎回となると、意外と気になってくるものです。

そこで今回は「頻繁に使う文章リストなどを、共通パーツ化する方法」をご紹介します。

共通パーツの例

例えば私が良く使う、記事の冒頭の自己紹介↓

どうも、ゆううにい@hara2_yusuke)です。

この一文って、ページで見ると30文字弱の文章なのですが、html表示で見ると

<p>どうも、ゆうう<ruby><rb></rb><rp></rp><rt>にい</rt><rp></rp></ruby><a href="https://twitter.com/hara2_yusuke" target="_blank" rel="noopener noreferrer">@hara2_yusuke</a>)です。</p>

Twitterへのリンクや、「兄」部分のルビ等があり、実際は170文字ほどで構成されています。これを毎回書くのって結構面倒なんですよ。笑

そこでこの1文を共通パーツ化することで、毎回書く必要がなくなり、作業効率が大幅に向上します。

 

はじめに

この方法は「見たまま記法」「Markdown記法」で行います。Markdownで書いている方は、ある程度htmlの知識がある方だと思いますので、今回は「見たまま記法」で編集する場合の目線で解説していきます。

手順は「Markdown記法」も、ほぼ変わらないので、Markdown派の方は、自身の編集画面に置き換えて、読んでいただけると幸いです。
※私はMarkdownで書いているので、途中で載せている画像が、Markdownの編集画面だったりします。ご了承ください。

 

事前準備

【準備1】元となるパーツにidを設定する

共通化させたいパーツを含んだ記事の編集画面を開きます。そして「HTML編集」をクリックしHTML表示にします。↓こんな感じになりますね。

f:id:yuu-tunamayo:20171102113744g:plain

次に対象となるパーツに任意の「id」を付けます。idというのはclassと一緒で、任意の名前を付けることができます。(自分が分かりやすい名前が一番です)

id名は固有の名前になるので、1つのページ内で同じ名前のidを複数設定することは基本的にできません。
※今回はあまり関係ないので、気にしなくてもよいです。

 

例ではid名を「myname」としておきます。このidを先ほどの1文のpタグ(開始タグ)に設定します。

<p id="myname">どうも、ゆうう<ruby><rb></rb><rp></rp><rt>にい</rt><rp></rp></ruby><a href="https://twitter.com/hara2_yusuke" target="_blank" rel="noopener noreferrer">@hara2_yusuke</a>)です。</p>

この時「p」と「id」の間に半角スペースを入れるのを忘れないようにしてください。
これでhtml側の準備は完了です。

  • 共通化したいパーツにhtmlでidを設定する
  • idを設定した記事が、共通パーツの元になる

 

【準備2】コードを書く

ここでいうコードはjavascript(以下js)のことです。jsと聞くと「あ、無理」と敬遠しがちですが、安心してください。簡単な文を書くだけなので、私のようなjsに詳しくない人にもできます。

編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「フッタ」に記述していきます。

f:id:yuu-tunamayo:20171101183157g:plain

記述内容は以下を参考にしてください。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function () {
  $("#id名(呼び出す側のid)").load("先ほどidを設定した記事のURL #id名(呼び出される側のid)");
});
</script>

上のコードについて解説していきます。
まず1行目の「jquery」についての記述ですが、既に「head内」や「フッタ」で読み込ませている場合は無視してください。読み込ませた覚えがない人・わからない人はコピペしてください。

次に2行目以降の記述ですが、idを書くところが2箇所あります。「呼び出す側のid」「呼び出される側のid」のところです。

先ほど設定したidは「呼び出される側のid」になります。まずはそちらを記述していきましょう。
※先頭の「$("#id名(呼び出す側のid)")」は一旦置いておいておきます。

 

共通パーツの元となる部分にid名を設定しましたよね。そのidを設定した記事のURLと、自分でつけたid名「.load」のあとの()括弧内に記述してください。idの手前に「#」と半角スペースを入れるのを忘れずに!

私が例で使用した「myname」というid名の場合はこうなります↓

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function () {
  $("#id名(呼び出す側のid)").load("http://www.yuuu-nii.com/entry/monthly-report-201710 #myname");
});
</script>

ここまで記述したら、次に先ほど後回しにした先頭部分の話に戻します。

先頭の「$("#id名(呼び出す側のid)")」の部分に、今後共通パーツを設置したい場所で使うid名を付けてください。ここで設定したid名が、記事を書く際に使用するidになります。

例としては「myname_set」とします。これを先ほどのコードに追記すると...↓

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function () {
  $("#myname_set").load("http://www.yuuu-nii.com/entry/monthly-report-201710 #myname");
});
</script>

これで共通パーツ化されました!あとは使用したい場所で呼び出してあげるだけです!

上記のコードは『今後、他の記事で「id="myname_set"」と書いたときに、「id="myname"」を付けたパーツを自動で記述しますよ。』という意味のコードです。

 

共通パーツを呼び出す

次は実際に他の記事で、パーツを呼び出してみましょう。管理画面のサイドメニュー内「記事を書く」から新規記事の編集画面を開きます。

「HTML編集」をクリックしHTML表示にしたら、後は任意の場所にidを設定するだけです。この時、呼び出すidを設定するタグは「div」というタグを使用することをオススメします。
※理由は後述します。

実際に先ほどの「myname_set」を設定してみるとこんな感じ↓

<div id="myname_set"></div>

f:id:yuu-tunamayo:20171101183314g:plain

本文は何もありませんが、プレビュー画面で見てみると...

f:id:yuu-tunamayo:20171101183321g:plain

id「myname」を設定した内容がちゃんと表示されていますね!

先ほど「フッタ」の部分に書いたコードを読み取って、「myname_set」の中に「myname」が自動で記述されたということです。

なので「<div id="myname_set"></div>」しか書いていませんが、実際にページに表示された内容は、こんな感じになっている訳です↓

<div id="myname_set">
  <p id="myname">どうも、ゆうう<ruby><rb></rb><rp></rp><rt>にい</rt><rp></rp></ruby><a href="https://twitter.com/hara2_yusuke" target="_blank" rel="noopener noreferrer">@hara2_yusuke</a>)です。</p>
</div>

これでいつでもあいさつ文をすぐに挿入できるようになりました。jsコードと、idを使用することで、本来170文字で構成されていた文章が、たった30文字程度で書けるってめっちゃ便利。

 

divタグをオススメする理由

htmlには「pタグの中にはpタグを入れることはできない」といった、細かいルールがたくさんあります。

意味を考えるとわかりやすいのですが、例えばpタグのpは「Paragraph」の略で、段落という意味をもっています。

「pタグの中にpタグを入れる」というのは、「段落の中にさらに段落作る」という意味になり、htmlのルール的にNGなのです。ページ上では問題なく表示されても、htmlの意味的には問題があるということですね。

 

そこで!先ほど使った「div」というタグは「divided」の略で、単体では意味を持たないタグであるため、中に何のタグを入れても問題ないのです。

idは基本的にどのタグにも設定することができます。この共通パーツを呼び出す方法は、色々な使い方ができるため、div以外のタグで呼び出した場合、呼び出す内容によっては知らないうちにhtmlのルールを破ってしまう可能性がでてきます。

そこで確実にルールを守るために、divタグを使用すると便利ですよ!というお話。

  • 任意の場所に、呼び出し用のidを付けたdivタグを設置
  • divタグは中身に何を入れても問題ない

 

応用編

「こんなの毎回コピペする方が楽やん」と思った方、ここからが本番です。共通パーツ化の本来の魅力を説明します。上の例ではほんの1文でしたが、divタグを使ってもっと複雑なパーツも呼び出すことができます。

当ブログを例に解説します。スプラトゥーン2の記事の下の方に設置しているこれ↓

f:id:yuu-tunamayo:20171102133920g:plain

スプラトゥーン2に関する記事のほぼすべてのページに設置しています。新しく記事を投稿した時は随時更新しているのですが、共通パーツ化しておくと、元のページを更新するだけで、設置してある全ページのパーツが更新されます。

2017年11月2日現在、このパーツはこんな感じのhtmlで構成されています。

<div id="splaList" class="comment check">
  <dl>
    <dt>アップデート情報</dt>
    <dd>
      <ul style="margin-top: 10px;">
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-ver-1-4-2">臨時アップデート!「養殖フェス」不可能に!最新ver.1.4.2</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-ver-1-4-1">臨時アップデート!無敵シェルターは修正?ver.1.4.1</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-ver1-4-0">10月最新アップデート!イカスフィア弱体化!ver.1.4.0</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt>テクニック的なもの</dt>
    <dd>
      <ul style="margin-top: 10px;">
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-last-30sec">残り時間が重要?ラスト30秒を制したチームが勝つ!フェス・ナワバリバトル</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-gyro">ウデマエS+の友人に聞く、オススメのジャイロの操作設定</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-heromode">ヒーローモードクリア!初心者がやるべき理由と感想</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-tec01">初心者の私が最近学んだテクニックをご紹介!慣性キャンセル(イカキャンセル)・雷神ステップ!初心者向け</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt>フェス関連</dt>
    <dd>
      <ul style="margin-top: 10px;">
        <li><a href="http://www.yuuu-nii.com/entry/chara-act-fes">フェス中にキャラを観察!ジャッジくんダンスあり</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-fes-eda">ソロとチーム両方参加してみた結果【10月フェス】</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-fes-halloween-result">海外(北米)フェス吸血鬼vs狼男!勝敗は?結果発表</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-fes-roll">海外のフェスに驚愕!世界のトイレットペーパー事情</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/fes-mac">マックフェス感想!票の少ないチームに入るメリット</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/fes-fli-vs-inv">第2回フェス!日本はポテトvsナゲット!海外は透明vs飛行の能力対決!結果</a></li>
        <li><a href="http://www.yuuu-nii.com/entry/splatoon2-fes01">フェスに初参加してみた感想!勝敗は?スーパーサザエの使い道</a></li>
      </ul>
    </dd>
  </dl>
 </div>

文字数は1600文字以上!
こんなの更新するたびに30回も40回もコピペしてたら、嫌になってブログやめちゃいそうですよね(笑)。

実はこのリンク集は共通パーツ化してあります。ちなみにこのパーツの元となるhtmlは、この記事にあります↓

www.yuuu-nii.com

この記事内で、あのリンク集を作り、他の記事では全てここから呼び出しています。

「id="splaList"」を設定したdivタグでリンク全体を囲んでおくことで、「splaList」を呼び出したとき、中身を簡単に全て表示する事ができるということです。

手順は先ほどと全く同じで、URLとid2つ(呼び出す側と、呼び出される側)を組み合わせたjsコードを記述しておき、記事を書くときに「呼び出す側のid」を設定してあげるだけです。

jsコード

<script>
$(function () {
  $("#splaList_set").load("http://www.yuuu-nii.com/entry/splatoon2-ver-1-4-1 #splaList");
});
</script>

 

html

<div id="splaList_set"></div>

このように、リンク集なども共通化しておくと、簡単に設置することができます。更新の際も、元となる記事を更新するだけで良いので作業効率が格段に上がります。

上記の例の場合、新規でスプラトゥーン2の記事を書き、リンク集に加える時も、コピペして更新していく必要がなくなったので、非常に楽です。

 

まとめ

  • 共通化したいパーツにhtmlでidを設定する
  • idを設定した記事が、共通パーツの元になる
  • 「デザイン」→「フッタ」にjsコードを記述
  • 任意の場所に、呼び出し用のidを付けたdivタグを設置
  • あとから更新をする場合は、元となる記事のパーツを更新するだけ

よく使う文章や、リストなどを共通パーツ化しておくことで、作業時間が格段に短くなります。新規投稿の際はもちろん、後から修正する場合も、まとめて行うことができるのでかなりオススメです!

 

以上、最後まで読んでいただきありがとうございました!

気に入ってくださった方は、読者登録やブックマークなどしていただけると嬉しいです。(励みになっています!)
よろしくお願いいたします!m(_ _)m

ブログ カテゴリーの記事一覧