iiie.nagoya

物づくりと生活、"経験"を記事へ

【'19/07/13】
当ブログで使用しているカスタマイズテーマ『riseup』をテーマストアで公開しました。はてなブログを使用している方なら無料でインストールすることが可能です。(はてなProでの利用を推奨しています)

詳細は以下のページに記載しています。
https://www.iiie.nagoya/entry/2019/07/13/210356

ブログテーマページはこちら
http://blog.hatena.ne.jp/-/store/theme/17680117127217464048

【riseup】タイトル下におすすめ記事を表示するボタンを設置する方法

f:id:gorislog:20190714163706p:plain

 

デモページで設置しているアコーディオン式のボタンです。

 

デモページでは、おすすめ記事として表示していますが、表示する内容はhtmlで構成しているので、お知らせ等でも使用できます。

 

 

使い方

f:id:gorislog:20190727213419p:plain

 

ダッシュボードより、「デザイン」画面を開き、「カスタマイズ(スパナマーク)」を選択、一覧より、「デザインCSS」を選択し、白い領域を選択し、そこにコードを追記します。

 

追記する際は、記述されている内容の一番下にコピー&ペーストすればOKです。

 

.acc-bt {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #27313D !important;
border: solid 2px #27313D;
border-radius: 3px;
transition: .4s;
margin: 1em;
}

.acc-bt:hover {
background: #27313D;
color: #fff !important;
}

.acc{
margin: -1em 0 1.5em 0;
}
.accbox {
margin: 0 auto;
padding: 0;
}
@media (min-width: 768px) {
.accbox{
max-width: 740px;
}
}
.accbox label {
display: block;
margin: 1.5px 0;
padding : 11px 12px;
color :#2f8fcf;
font-weight: bold
cursor :pointer;
text-align: center;
transition: all 0.5s;
}
.accbox label:hover {
}
.accbox input {
display: none;
}
.accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.cssacc:checked + .accshow {
height: auto;
padding: 10px;
opacity: 1;
word-break: break-all;
}
@media (min-width: 768px) {
.cssacc:checked + .accshow {
padding: 20px;
}
}
.acc-flex {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
.acc-flex-in {
box-sizing: border-box;
width: 50%;
padding: .5em;
text-align: center;
}
.acc-flex img{
width:100%;
max-height: 200px;
}

 

f:id:gorislog:20190713203556p:plain

 

次に表示したい内容を記載します。

 

「ヘッダ」内の「タイトル下」に追記します。

 

<div class="acc">
<div class="accbox">
<label for="label1"><div class="acc-bt"><i class="blogicon-good"></i> PickUp: おすすめの記事</div></label>
<input type="checkbox" id="label1" class="cssacc" />
<div class="accshow">
<!--ここに隠す中身-->
<p>
<div class="acc-flex">
<div class="acc-flex-in">
<div class="entry-content"><img src ="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gorislog/20190714/20190714163706.png" width='100%'></div>
記事A
</div>
<div class="acc-flex-in">
<div class="entry-content"><img src ="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gorislog/20190415/20190415000136.jpg" width='100%'></div>
記事B
</div>
<div class="acc-flex-in">
<div class="entry-content"><img src ="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gorislog/20190702/20190702204317.jpg" width='100%'></div>
記事C
</div>
<div class="acc-flex-in">
<div class="entry-content"><img src ="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gorislog/20190613/20190613082104.jpg" width='100%'></div>
記事D
</div>
</div>
</p>
</div>
</div><!--//.accbox-->
</div> 

 

色を付けた部分を変更します。

 

htmlで構成されているので、リンクする場合は<a href="URL"></a>などを追加しましょう。

 

応用:一列表示にする

 

CSS部分の一部を変更します。

 

.acc-flex-in {
box-sizing: border-box;
width: 100%;
padding: .5em;
text-align: center;
}

 

参考

saruwakakun.com