とうふday

読者です 読者をやめる 読者になる 読者になる

【コピペ一発】はてなブログで記事の上におすすめ記事・人気記事セレクションを枠付きで表示させる方法

ブログ-ブログレイアウト

SPONSORED LINK

人気記事セレクション ☆︎

どうもーぬつですー

 

先日からこんなのを導入

 

f:id:nututenpura:20170308180613p:plain

 

よくいろんなブログについてる人気記事を自動的に表示してくれるやつですね

 

ただ調べても枠の途中?に文字が入ったタイプが見つからなかったので

今回作ってみました

 

 

コード

<fieldset style="border:3px dashed #000000"><legend>

<strong><span style="font-size: 110%;">人気記事セレクション ☆︎</strong></legend>

</br>

<ul>

<li><span style="color: #1464b3;"><a style="color: #1464b3;" href=“ここにリンクをはる”>タイトル</a></span></li>

 

<li><span style="color: #1464b3;"><a style="color: #1464b3;" href=“ここにリンクをはる”>タイトル</a></span></li>

 

<li><span style="color: #1464b3;"><a style="color: #1464b3;" href=“ここにリンクをはる”>タイトル</a></span></li>

 

</ul></fieldset>

 

 

このコードをデザインの記事上もしくは記事下に入れるだけ

 

ここにリンクをはるというところにURLを入れて

タイトルには枠の中を表示させたい文章を入れてください

 

文章の数を増やしたいのであれば、<li>〜</li>の部分をコピぺして増やせばOK

 

スマホで別デザインを使っている方はスマホの方にも同じものを貼り忘れないようにしましよう

 

ちなみに上記では間隔調整のために1行目のリンクの前あたりに</br>を入れてますが、空白ができるようであれば消して大丈夫です。

 

枠のタイトルを「おすすめ記事」にしたいのであれば

最初の方にある「人気記事セレクション☆」を変えてください。

 

 

 

枠線の種類を変える

枠線の種類を変えたければ、下記コードのpxとシャープの間のコードを変えましょう

(前後は半角スペースが入ってるので注意)

 

<fieldset style="border:3px dashed #000000"><legend>

 

線の種類はこちら

 

実線  :solid
点線  : dotted
破線  : dashed
二重線 : double
線無し : none 

 

上記のコードだと破線になってます

 

 

 

線の太さを変える

線の太さを変えたければ、border:3px

この数字を変えましょう

 

<fieldset style="border:3px dashed #000000"><legend>

 

 

 

色を変える

枠の色を変えるのであれば、#000000の部分を変えます

 

<fieldset style="border:3px dashed #000000"><legend>

 

 

コード表はこちらをご覧ください

カラーコード表

 

 

 

おわりに

人気記事セレクションを表示しておくと直帰率が改善するなんて話も聞いたことがありますが、果たしてどうなるか

 

まだ取り入れたばっかりなのでなんとも言えませんが、

見た目的にはあるだけでいい感じになったので満足です

 

なにかしら成果が出たらまた別記事でまとめます!

 

ぬつ