*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

 >  Template >  カスタマイズ >  ct_responsive のカスタマイズ(ドロワーメニュー・その他)

ct_responsive のカスタマイズ(ドロワーメニュー・その他)

テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
15日、トップページ記事のサムネイル表示方法を変更・更新致しました。
FC2の独自変数 <%topentry_image_w300> を使って表示していたサムネイルを、記事画像 <%topentry_image_url> に変更しました。
画像はサムネイルでは無く縮小表示ですが、imgタグ必須のalt属性が付けられる・縦横比の縦が足らない時に補填する黒背景が嫌、という理由でこの形に致しました。
この更新内容を下記追記部分に掲載しますので、15日以前にDLされた方・10/27記事(トップページ全文表示)のカスタマイズをされた方で、サムネイル画像表示方法を直したい方は一番下段をクリックして変更作業をお願い致します。m(__)m

…で、カスタマイズです。^^;
メールで変更方法のお問い合わせを頂き 個人的に有益かも!と思ったので、記事として掲載致します。

1) メニュー左2カラムテンプレートのドロワーメニュー(1カラム時左)を右に変更
2) 記事の枠についている日付部分にリンクを付けたい
3) 記事掲載時にYouTube等の動画をレスポンシブで埋め込む

15日、トップページ記事のサムネイル表示方法を変更・更新。記事内容 ReadMoreへ

ct-カスタマイズ

1) メニュー左2カラムテンプレートのドロワーメニュー(1カラム時左)を右に変更
スマートフォン等で操作する際に、左手て持って右手でメニュー操作するには右側が良い、というお話で…確かにそうかも。^^;
PC表示が左メニューなので左の方が良いかな~と思ったのですが、初めからスマホで閲覧される方にはPC表示がどうなのかなんて、…分かりませんもんね。
今後ご要望が多ければテンプレートの修正・更新 致しますが、取り敢えずカスタマイズでという事で。
スタイルシート編集枠2/3程の所に
/* 1カラム(ドロワーメニュー左) */
という部分が有ります。この下方を変更して下さい。

h1{
text-align: right; 削除
margin:3px 45px 0 15px; 赤文字のように変更
line-height:1.5;
position: static;
}

/* ドロワーメニュー部分 */下方
#btn1{
overflow:hidden;
height:27px;
top:0;
left:0; ← right:0; に変更
width:43px;
position:absolute;
}

#nav_open span, #nav_open span:before, #nav_open span:after{
position:absolute;
bottom:18px;
left:0; ← right:0; に変更
height:2px; /* ハンバーガーボタン 線の太さ */
width:17px; /* ハンバーガーボタン 線の長さ */
background:#666;
display:block;
content: '';
transform: translate3d(0,0,0);
}

#nav_close{
cursor:pointer;
position:relative;
padding-right:215px; ← padding-left:215px; に変更
}

.css-cancel:before{
display:block;
content:"";
position:absolute;
top:50%;
right:-9px; /* 右からの位置 */ ← left:-9px; /* 左からの位置 */ に変更
width:20px; /* キャンセルボタン 線の長さ */
height:2px; /* キャンセルボタン 線の太さ */
margin-top:-1px; /* 上からの位置 */
background:#666; /* 線の色 */
}

nav{
position:absolute;
top:0;
bottom:0;
height:100vh;
width:270px;
left:-270px; ← right:-270px; に変更
padding-bottom:50px;
background:#fff;
z-index:5;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}

上記変更して更新ボタンを押すとメニューを開くボタンが右上になります。


2) 記事の枠についている日付部分にリンクを付けたい
インデックスラベルのように表示されているとついクリックしたくなる、タイトルや画像・続きを読む以外にもリンクが有ったら楽、というご要望も頂きました。
そう言われてみると…クリックしてみたくなる、かも。^^;
なので、この部分に個別記事ページへのリンクを付けてみます。

HTML編集枠1/4少し下くらいに
<!-- トップページ ここから-->
という部分が有ります。この下4行目に
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
</div>


上記のような一文が有るので、ここに赤文字部分を追加して下さい。

<div class="entry_date"><a href="<%topentry_link>"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)</a>
</div>

これで更新ボタンを押して頂けば完了、ですが、日付文字の色が他のリンク文字と同様に青色に変わります。
日付部分のリンク文字色を白のままにしたい場合は、下記のようにスタイルシートを追記して下さい。
スタイルシート編集枠1/5程の所に .entry_date という部分が有るので、その下に

.entry_date a{
color:#fff;
}


を追加します。このcssでは文字色は白になります。他の色にしたい場合は color:#fff; を他のカラーコード・カラーネームに変更して下さい。
カラーコード、カラーネームについては↓コチラをご参考に。
web material *Essence(当方素材サイト) ColorCode ColorName
HTML や CSS に変更を加える際には、テンプレートの複製を作ってから作業して頂くと安心です。m(__)m


3) 記事掲載時にYouTube等の動画をレスポンシブで埋め込む。
YouTubeの埋め込みしたい動画の下にある共有をクリックし、ウィンドウが表示されたら埋め込むをクリックします。
埋め込みコードが表示されるのでオプションを設定しコピーをクリックします。
コピーしたコードをブログなどにペーストして完了です。が、レスポンシブで表示するためにもう一つ。
下記のようなスタイルを用意してありますので、動画掲載時にご利用下さい。

/* 動画サイズレスポンシブ用(iframeをdiv class="player"で括る) */
.player{
position:relative;
height:0;
padding-bottom:56.25%; /* アスペクト比16:9の場合 */
overflow: hidden;
}


スタイルシート内にも書いてありますが、埋め込みコードを div class="player" で括ると、モバイル端末でも表示サイズが可変するようになります。
<div class="player"><frame width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>
YouTubeの記事掲載時はこんな感じに。

以上、[ct_responsive〇c]のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m

↓15日更新、トップページ記事サムネイル表示の変更方法
Read More

11/15 以前のテンプレートで、FC2のサムネイル独自タグを使って表示していた部分を変更します。
この変更をすると、縦横比に満たない縦部分に黒い背景が付かなくなり、画像の表示が中央(はみ出た部分は hidden で不可視)になります。
変更後に表示がすごく遅く感じるようであれば、お手数ですが 逆の方法で元に戻して下さい。

HTML編集枠1/4少し下くらいに
<div class="left">
<a href="<%topentry_link>">
<%topentry_image_w300></div>

という部分が有るので、ここを下記のように変更
<div class="left">
<a href="<%topentry_link>">
<img src="<%topentry_image_url>" alt="<%topentry_title>" onError="this.style.display='none'"></a>
</div>


HTML編集枠一番下までスクロールしたところに javascript を記述した部分が有るので、そこにスクリプトを追加。
(最後の div の前に、こんな感じに)

<!--object-fit(IE対策)-->
<script src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/ofi_min.js"></script>
<script>objectFitImages();</script>

</div> ←これの上に追加
</body>
</html> ←HTML編集枠一番下

スタイルシート編集枠 1/3 程の所にある、下記の部分を赤字に変更

.left{
float:left;
width:33%; /* サムネイル画像の幅 */
height:auto;
max-height:275px; ← 140px に変更
margin-right:10px;
text-align:center;
position: relative;
overflow:hidden;
}
.left img{
vertical-align:middle;
border:1px solid #ddd;
 ← 青文字部分を削除
width:100%;
height:auto;
max-height:140px;
object-fit:cover;
font-family:'object-fit:cover;'; /*IE対策*/
 ← 赤文字部分を追加
border:1px solid #ddd;
}

以上です。不具合が有った時のために複製を作って作業される事をお勧めします。m(__)m

Return

コメント






管理者にだけ表示を許可する