ロケLOG

大学生のロケットマンによるブログ

はてなブログでサイドバーに自分の記事を掲載する方法

はてなブログで自分の書いた記事(他人の記事でもok)をサイドバーに掲載する方法です。

 

完成形

f:id:rocketman5th:20170821140253p:plain

 

スマホ版

問題なく表示することができます。

f:id:rocketman5th:20170821140056p:plain

 

概要

基本的には記事作成画面で記事のリンクを張り付けて、自動的にできたブログカートをサイドバーに張り付ける方法です。

過去記事引用したときに、自動で文字だけでなくできるあのボックスを張り付けるだけです。

とても簡単にできます。

 

①ブログカートを作る

知ってはいると思いますが、記事のリンクを記事作成画面で張り付けると、自動でこんなのができます。

これをブログカートと言います。

まず、このブログカートを作ります。

f:id:rocketman5th:20170821133820p:plain

作り方は記事のリンクを編集画面で張り付けて「埋め込み」を選択します。

f:id:rocketman5th:20170821134204p:plain

 

 

そして、このブログカートの「HTML編集」画面に変更してをHTMLをコピーします。

f:id:rocketman5th:20170821134548p:plain

 

②サイドバーに張り付ける

デザイン→カスタマイズ→

サイドバー→モジュールを追加

f:id:rocketman5th:20170821132718p:plain

 

→</>HTMLを選択

サイドバーのタイトルを入力し

先ほどのHTMLを張り付けます

f:id:rocketman5th:20170821133534p:plain

 

完成です。

しかし、リンクの青文字がブログカートの下に表示されてしまいます。

気になるという方は消すことができます。

f:id:rocketman5th:20170821134905p:plain

 

青文字のリンクの消し方

先ほどのモジュールの編集画面で<cite></cite>タグの青で囲まれている部分を消します。

f:id:rocketman5th:20170821135246p:plain

f:id:rocketman5th:20170821135436p:plain

 

するときれいに消えます。

f:id:rocketman5th:20170821135606p:plain

 

以上です!!

イベントの告知や自分の記事のおすすめなどに使うと良いと思います!!!