*Essence

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

Top Page › Template › カスタマイズ › ct_responsive のカスタマイズ(ドロワーメニュー・その他)
2018-11-16 (Fri)

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日更新、トップページ記事サムネイル表示の変更方法

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

HTML編集枠1/4少し下くらいに
<div class="left">
<a href="<%topentry_link>">
<%topentry_image_w300></a>
</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
関連記事

Comment







管理者にだけ表示を許可

aki 風来梨 様へ

こちらこそ、末永く宜しくお願いします。m(__)m
ご不明な点がございましたらお声掛け下さい。
2019-04-26-01:48 * aki [ 返信 * 編集 ]

有難うございます。

ヘッダー変更の手法を教えて頂き、有難うございます。 ゴールデンウィーク明けの本格稼動に向けて実行していこうと思います。

今後とも宜しくお願いします。
2019-04-22-07:01 * 風来梨 [ 返信 * 編集 ]

aki 風来梨 様へ

風来梨様、初めまして。
FC2ブログへようこそ♪そして、数あるテンプレートの中から選んで頂き、誠に有難うございます。m(__)m
先ず、テンプレートのカスタマイズですが、このブログの左側のカラムに『Customize』というメニューが有りますので、そこから『ct_responsive』をクリックして頂けると掲載したページに行けます。
お時間の有る時にでもご覧になってみて下さい。(^_^)

…で、トップ画像の変更方法ですが、風来梨様の変更希望画像ですとかなり大きな面積を取りますので、記事に有るものと他の方法と2つ提示させて頂きます。

一つ目は記事に有る通りの方法です。
https://sorauta1.blog.fc2.com/blog-entry-286.html
FC2管理画面左のメニュー『テンプレートの設定』をクリックし、DLしたテンプレート[ ct_responsive2c-r ] のスタイルシート編集枠(ページ下段)の下記の部分までスクロールさせて下さい。

/* トップ画像 */
.topimg{
height:0;
padding-top:22.68%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-122.fc2.com/s/o/r/sorauta1/top-image2.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}

ここを下記のように変更して下さい。(コピペ可)

/* トップ画像 */
.topimg{
height:0;
padding-top:67.49%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-113.fc2.com/f/u/r/furai58/19-5.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}

画像のサイズが963px×650pxなので、650÷963×100で求めた67.49が可変する画像の(全表示)サイズ、となります。

湖面の部分(画像上下)は要らないな~という場合は、この部分を非表示にする方法も有ります。(コピペ可)

/* トップ画像 */
.topimg {
height:0;
padding-top:40%; /* 表示したい画像の高さ */
background:url('https://blog-imgs-113.fc2.com/f/u/r/furai58/19-5.jpg')center center no-repeat;
background-size:cover;
margin:0 20px;
}

padding-top:40%; /* 表示したい画像の高さ */ この部分の数値を変えると画像の高さが変わります。見栄えが良いよう自由に変更して下さい。

トップ画像の変更に伴ってブログタイトルが見難くなった場合は、/* トップ画像 */ の下を見ていくと /* ブログタイトル */ という箇所が有りますので、そこの
color:#777; /* ブログタイトルの文字色 */
#777; という部分を別のカラーコードやカラーネームに変更して下さい。(3桁になっていますが非省略表記は#777777;という6桁です。)
ご参考に。https://e-ssence-main.jp/tips-page/t-websafe.html

更新のボタンを押さなければテンプレートに反映しませんので、プレビューボタンで表示を確認してから適用して下さい。
それでも不安が有る場合は、テンプレートの複製を作ってから作業すると安心です。

ブログ記事、拝読させて頂きました。(^_^)
お引越しに際してのアメブロとFC2の考察はとても面白いですね~。当方、どちらかというと右寄りなので色んな意味で面白く読まさせて頂きました。
FC2歴長いですが、「アメリカの会社だから」って、使ってる側が何にも考えた事無いのに傍が色々言ってるとか…可笑しいですね。^^;そんな心配は余計なお世話です。
(関係無いですが、LINE使ってません。よく「え~~っ?マジ?」って言われますけど。)^^;
…それと、FC2のNGワードフィルタリングですが、任意で外す事が出来ますよ。
『環境設定→ブログの設定→コメントの設定』で「おまかせ禁止ワードフィルタを【利用しない】」にして更新。自身で個別に設定したい場合は同じく『環境設定→ブログの設定→禁止設定』で設定可です。
https://help.fc2.com/blog/manual/group176/2530 (FC2ヘルプ「迷惑投稿への対処」)
環境設定でかなり色んな設定が出来ます。
…それと、苦情は放置、は無いですね。サポートに連絡するとちゃんと返事が来ますのでご安心下さい。
https://help.fc2.com/blog/inquiry

その他、共有プラグインも探すと楽しいです。(プラグインの更新日が古いですけど^^;)
FC2管理画面左メニュー『プラグインの設定→共有プラグイン追加』で色々出てきます。
お勧めはBenri-Navi、カテゴリー等のリンクをまとめて表示してくれる優れもの。プラグイン3の部分に入れると当方のトップページのように上部に表示されます。

…あ、余計な事を色々連ねてしまいスミマセン。^^;
ご不明な点は分かる範囲でお応え致しますので、ご不便が有りましたらお声掛け下さいませ。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-04-21-23:48 * aki [ 返信 * 編集 ]

ヘッダー画像の変更方法を教えて頂けますか?

こんにちは。 はじめまして。
Yahoo!プログのサーピス廃止に伴い、今日移転して来た風来梨と申します。

今日にテンプレート『 ct_responsive2c-r』をお借りしまして、レイアウトなどのブログ改装に悪戦苦闘中です。

何とかカテゴリ整理や移転後ファースト記事の投稿まではできたのですか、私はほとんどHIML編集の知識がないので、ヘッダーの画像はお借りした時の洋風の部屋のパーテーション画像となっています。

これを私の写真
https://blog-imgs-113.fc2.com/f/u/r/furai58/19-5.jpg
に変更したいと思いますが、HTMLが崩れると大変な事になるので躊躇しています。

変更方法を教えて頂けませんでしょうか?
家具のパーテーション画像のURLを私の写真のURLに代えるといいとは思うのですが、家具の画像のURLがどれか判りません。

どうぞ、よろしくお願いします。

風来梨のブログ【FC2版】
https://furai58.blog.fc2.com/
2019-04-21-15:31 *  風来梨 [ 返信 * 編集 ]