Macky1991’s blog

ブログを始めて3週間、アドセンスが合格しました!今後ともよろしくお願いいたしますm(__)m

見出しの固定とオススメ記事の追加【第5次ブログ改造計画】

f:id:Macky1991:20190807111359p:plain

 

どうもこんばんわ

 

アドセンス合格の興奮がまだ冷めませんが

今日から仕事なので引き続き頑張っていきます。

アドセンスにせっかく合格したので

ブログもどんどんかっこよくスタイリッシュにしていきたいと思います。

 

見出しh2を固定する

 

www.macky1991.jp

 

以前紹介した見出しについてやはりh2はかっこいいのに

固定できないのは残念だと前から思っていました。

なんとか固定化できないのか調べていくと

公式にてその方法が紹介されていました。

 

zeno-teal.hatenablog.com

 

f:id:Macky1991:20190807110047p:plain

 

「ダッシュボード」の「デザイン」にある「カスタマイズ」までいったら

「デザインCSS」に次のコードを書き加えます。

 

.entry-content h2{
position: relative;
}

 

f:id:Macky1991:20190807110053p:plain

 

では記事の下書きで確認してみましょう。

「HTML編集」で見出しタグh2を入力します。

 

f:id:Macky1991:20190807110058p:plain

 

「プレビュー」に切り替えました。

見事に見出しh2が固定されました。

今まで見出しh3を段落ごとに使ってきましたが

今後は見出しh2を活用していきます。

 

オススメ記事をタイトルの下に加える

 

zeno-teal.hatenablog.com

 

ブログのタイトルの下も何もないは寂しいので

同じく公式にてカスタマイズ方法について紹介されていました。

 

f:id:Macky1991:20190807111344p:plain

 

「ダッシュボード」の「デザイン」にある「カスタマイズ」まできたら「ヘッダ」の「タイトル下」に次のコードを入力します。

 

<div class="recommends">
  <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
  <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
  <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
  <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
  <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
</div>
  

f:id:Macky1991:20190807111359p:plain

 

変更を保存して適用してみました。

記事が非表示のままなのは手動で一つ一つ修正しなければならないからです。

個人的にオススメしたい記事を載せていきますのでお楽しみに。

 

ここまでお読みいただきありがとうございます。

次回の記事の更新をお楽しみに。