18歳から人生が始まった

ゼロからアルゼンチン移住を目指すニート男の人生を現在進行形で実況します。自分らしく自然な姿で生きたい。

ブログでよく見る「あわせて読みたい」をデザインに追加してみた

f:id:wagashi000327:20181022220251j:plain

よくおしゃれなブログで見かける、枠で囲ってあって「あわせて読みたい」とか「こんな記事もあります」って書いてあるアレあるじゃないですか。

アレってどうやってやってるんだろって思いながらも、自分のブログでもやってみたいと思ったんですよねー。

というわけで、実際に調べてやってみました。

 

参考にした記事はこちら↓

www.notitle-weblog.com

 

やり方は全部この記事に書いてあるんですが、一応ここでも超簡単に説明しておきます。

 

手順1:コピペする

 

上の記事にある自分の気に入ったデザインが見つかったら、コードをコピペして、デザイン→カスタマイズ→デザインCSSにコードをコピペします。

 

終わりです。お疲れ様でした。

 

使い方

 

実際に記事でどう使うかを簡単に説明します。

 

先に「編集見たまま」で記事をタイトル式で貼り付けます。

【悲報】俺氏、「1回やったからできるよねチェックシート」により無事死亡←みんな大好きこの貼り方です(しれっと前回記事を貼っていくスタイル)

 

次にhtml編集で

<p>・ </p> ←ここと

<p><a 記事のURL">記事のタイトル</a></p>
<p>・ </p> ←ここに

 

上の記事の一番最後に書いてあるコードを貼り付けます。

 

<div class="emphasize-link">

<p><a 記事のURL">記事のタイトル</a></p>

</div>

 

こんな感じになればできているはずです。

 

補足:色の変え方

 

枠線や枠内の色を変えるのはちょっとコードを変えてコピペするだけでできます。

枠線の色を変えたい人は、コードの5行目くらいにある

border:~~ ~~~~ #~~~~~~;

下線部を書き換えることで自分の好きな色に変更できます。

 

色のコードは上の記事でも紹介されてますが、下のサイトから自分の好きな色のコードをコピペすることで変更できます↓

www.color-sample.com

 

枠内の色を変えたい場合は、さっきのboeder:~~~~~; の下にある

background-color:  #~~~~~~;

ここを書き換えることで変更できます。

 

また、「あわせて読みたい」の背景色を変えたい時は、コードの一番下から数行上にある

background-color: #~~~~~~;

を書き換えることで変更できます(さっきのbackground-colorとは別物です)

 

ついでに蛍光アンダーラインもやってみた

 

タイトルと全く関係ないですが、せっかくなので蛍光色アンダーラインもやってみました。

参考にした記事はこちら↓

www.sanhacchi.net

 

これもコードをコピーしただけなので説明はカットします。

ただ、線の幅を変えたい時には、コード内にある

 background:linear-gradient(to bottom, transparent 60%, rgba(159,223,131,1) 60%) 

 下線部の数字を変えることで幅を変更できます。

 数字が大きいほど線が細くなり、数字が小さいほど太くなります。

 

んで実際にやってみるとこんな感じ

イイじゃん!

 

ただ、これは斜体の機能を蛍光アンダーラインに変えるというコードなので、斜体は使えなくなります。僕は斜体は使う予定はないのでこれで大丈夫です。あと勝手に太字になります。

 

てなわけでブログがちょっとオサレにになって嬉しい僕でした。

グローバルメニューすら付けることができなかったんですが、デザインを弄るのは結構楽しいとか思っちゃうよね。

そしてこれが今回やった「あわせて読みたい」です !↓(名前は変えました)