コピペ1発!! タイトル下に注目記事を並べる方法。

f:id:xxxxkun:20180208121505p:plain

どうもスナ(@morisuna808)です。

コピペ1発でデザインを変えます。

 

※今回は"はてなぶろぐPro"仕様です。

 

トップページのタイトル下に注目記事を表示させる方法を紹介します。

赤枠で囲まれている所が今回デザインした場所です。

f:id:xxxxkun:20180208114934p:plain

 

下記のコードを指定された場所にコピペしてください。

 

HTMLコード

貼り付け場所:デザイン→カスタマイズ→ヘッダ→タイトル下

f:id:xxxxkun:20180208115602p:plain

変更場所:コード内の"記事URL"や"画像URL""記事タイトル"部分を自分のサイト仕様

に書き換える。

 

<div class="recommend-container">
<div class="recommend">
<div class="recommend-box">
  <span class="recommend-image"><a href="記事URL"><img src="画像URL"></a><br></span>
  <span class="recommend-title"><a href="記事URL">記事タイトル</a></span>
</div>
<div class="recommend-box">
  <span class="recommend-image"><a href="記事URL"><img src="画像URL"></a><br></span>
  <span class="recommend-title"><a href="記事URL">記事タイトル</a></span>
</div>
<div class="recommend-box">
  <span class="recommend-image"><a href="記事URL"><img src="画像URL"></a><br></span>
  <span class="recommend-title"><a href="記事URL">記事タイトル</a></span>
</div>
<div class="recommend-box last-box">
  <span class="recommend-image"><a href="記事URL"><img src="画像URL"></a><br></span>
  <span class="recommend-title"><a href="記事URL">記事タイトル</a></span>
</div>
</div>
</div>

 

次にCSS部分にコピペします。

 

CSS

貼り付け場所:デザイン→カスタマイズ→デザインCSS

f:id:xxxxkun:20180208130259p:plain

 

/* ヘッダー下おすすめ記事横スクロール */
.recommend {
    width: 1100px;/* コンテンツ幅と合わせる */
    margin: 40px auto;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
}
.recommend-box {
    width: 300px;
    height: 230px; 
    margin-right: 20px;
    padding: 10px;
    border: 2px solid #eee;
    box-sizing: border-box;
}
.last-box {
   margin-right:0;
}
.recommend-image img {
    max-width: 100%;
    height: auto;
}
/* 1100px以下 */
@media screen and (max-width: 1100px) {
    .recommend {
    width: 83.9%;
    margin: 20px auto;
}
    .recommend-box {
    width: 200px;
    height: 200px;
}
}
/* タブレット・スマートフォン向け */
@media screen and (max-width: 768px) {
    .recommend-container {
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
}
    .recommend {
     margin 20px auto;
     width: 660px;
}
    .recommend-box {
    width: 150px;
    height: 190px;
}
}
/* iPhone5s以下向け対策 */
@media screen and (max-width: 320px) {
     .recommend {
     width: 550px;
}
   .recommend-box {
    margin-right:10px;
    width: 130px;
    height:180px;
}
}
/* ヘッダー下おすすめ記事横スクロールここまで */

 

 

※コピペして変更後に画像のサイズがバラバラだった場合は、

"recommend-box"の"width"と"height"の数値を変えてみてください!