YouTubeを飾ってみる

2018年09月27日
カスタマイズ
69
Instruction YouTube HTML CSS 初心者向け Playground

今回は完全に遊びです。
YouTubeなどの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・`)

--- 追記 2019.4.17 ---

html内容を一部変更しました。

--- 追記 2018.12.7 ---

CSS内容の一部を修正しました。style要素でのCSSを削除しJSでのCSS適用を追加しました。

--- 追記 ここまで ---

独自クラス .box-for-video がテンプレートCSSに含まれていることを前提としています。
また、旧投稿画面をご利用の方は「改行の扱い」を「HTMLのみ」に設定してください。

この装飾を利用した動画を「本文」の最初に掲載した場合、サムネイル対象画像(OGP含む)が動画にくっついている装飾画像になります。
それを避けたい場合には動画掲載よりも先に意図的に別の画像を指定するか、「アイキャッチ画像」の機能を利用してください。

レスポンシブに加えLazysizesのvedeo embedを利用可能にするため若干複雑なコード内容になっています。vedeo embedで埋め込む場合は「埋め込みコード」のiframe要素を含むbox-for-videoクラスのついたdiv要素をlazysizes vedeo embedのdiv要素に変更してください。
また、装飾用画像もimgなのでlazyloadingにできます。

レスポンシブ動画のための独自クラスが必要です。全てのテンプレートに含めているわけではないので事前に確認してください。
含まれない場合は以下の記事を参照、追加してくださいね。

あなたのブログの動画はスマートフォンではみ出してるかもしれない

めちゃくちゃ多いんですよ。スマートフォンで動画がはみ出している 方。 今もう モバイル最優先 という時代ですが、ブログなどの記事はパソコンで書いているという方もまだ多いと思います。 スマホで長文ってキッツいですよねぇ (´・ω・`) パソコンで書いているとやっぱりパソコンの見た目に集中してしまいます。 スマホはパソコンと比べたらめっちゃ画面小さいんやで! というのを忘れてしまう。 というわけで対処...

埋め込みコード取得

ご存知だろうとは思いますが一応説明。
「埋め込む」をクリックすると、
iframe要素でhtmlコードが出てきますのでそれをコピー。
これからご紹介するソースコード内にある「埋め込みコード」はこのiframe要素を指します。

素材のダウンロード

装飾に利用している画像はpublic domainですが 直リンク厳禁 でお願いします。
* 直リンク = 「ダウンロード → 自身のサーバーにアップロード」の工程を行わずにURLだけを取得すること。

それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。
仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。

YouTube装飾いろいろ

htmlは本文・追記どちらでも記載できます。スタイリングについては、使用頻度が高い場合には CSS雛形 の方をスタイルシート末尾に追加します。
使用頻度の低い場合には スタイル用JS記事編集画面、使用する動画装飾htmlの直下 に記載してください。「CSS雛形」「スタイル用JS」両方ではなくいずれかを選択してください。

素材によっては動画が若干左右に寄った状態になります。そうしないと装飾が画面を超過しますのでこの点をご了承ください。
全体幅はhtmlのstyle属性max-width値で調整してください。画面横いっぱいを使い切る場合には style="max-width: 数値px;" を直前にある半角スペースも含め削除します。

YouTube装飾いろいろ

バラのつぼみ

html

<div class="all-wrapper-1st-1" style="max-width: 600px;"><!-- max-widthは最大横幅指定 -->
  <div class="videoimage-wrapper-1st-1">
    <img class="videoimage-1st-1" src="画像URL" alt="">
  </div>
  <div class="iframe-wrapper-1th-1">
    <div class="box-for-video">
      ここに埋め込みコード
    </div>
  </div>
</div>

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-1{display:flex;flex-direction:column;margin:auto}.videoimage-wrapper-1st-1{position:relative;z-index:2;width:100%;pointer-events:none}.videoimage-1st-1{width:100%}.iframe-wrapper-1th-1{position:relative;z-index:1;width:100%;margin-top:-18%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-1st-1 {
  display: flex;
  flex-direction: column;
  margin: auto;
}

.videoimage-wrapper-1st-1 {
  position: relative;
  z-index: 2;
  width: 100%;
  pointer-events: none;
}

.videoimage-1st-1 {
  width: 100%;
}

.iframe-wrapper-1th-1 {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: -18%;
}

素材DL (実寸: 570×203)

金枠

html

<div class="all-wrapper-1st-2" style="max-width: 600px;">
  <img class="videoimage-1st-2-1" src="画像URL" alt="">
  <img class="videoimage-1st-2-2" src="画像URL" alt="">
  <img class="videoimage-1st-2-3" src="画像URL" alt="">
  <img class="videoimage-1st-2-4" src="画像URL" alt="">
  <div class="box-for-video width-adjust">
    埋め込みコード
  </div>
</div>

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-2{position:relative;margin:30px auto}.width-adjust iframe{z-index:1}.videoimage-1st-2-1{position:absolute;top:0;left:0;z-index:2;width:70px;height:70px;pointer-events:none}.videoimage-1st-2-2{position:absolute;top:0;right:0;z-index:2;width:70px;height:70px;transform:scale(-1,1);pointer-events:none}.videoimage-1st-2-3{position:absolute;bottom:0;left:0;z-index:2;width:70px;height:70px;transform:scale(1,-1);pointer-events:none}.videoimage-1st-2-4{position:absolute;bottom:0;right:0;z-index:2;width:70px;height:70px;transform:scale(-1,-1);pointer-events:none}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-1st-2 {
  position: relative;
  margin: 30px auto;
}

.width-adjust iframe {
  z-index: 1;
}

.videoimage-1st-2-1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  pointer-events: none;
}

.videoimage-1st-2-2 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  transform: scale(-1, 1);
  pointer-events: none;
}

.videoimage-1st-2-3 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  transform: scale(1, -1);
  pointer-events: none;
}

.videoimage-1st-2-4 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  transform: scale(-1, -1);
  pointer-events: none;
}

素材DL (実寸: 150×150)

鳥かごとはさみ

html

<div class="all-wrapper-1st-3" style="max-width: 600px;">
  <div class="videoimage-wrapper-1st-3">
    <img class="videoimage-1st-3" src="画像URL" alt="">
  </div>
  <div class="iframe-wrapper-1st-3">
    <div class="box-for-video">
      埋め込みコード
    </div>
  </div>
</div>

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-3{display:flex;flex-direction:column;margin:30px auto}.videoimage-wrapper-1st-3{position:relative;z-index:2;width:100%;pointer-events:none}.videoimage-1st-3{position:relative;z-index:1;width:100%}.iframe-wrapper-1st-3{width:100%;margin-top:-22%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-1st-3 {
  display: flex;
  flex-direction: column;
  margin: 30px auto;
}

.videoimage-wrapper-1st-3 {
  position: relative;
  z-index: 2;
  width: 100%;
  pointer-events: none;
}

.videoimage-1st-3 {
  position: relative;
  z-index: 1;
  width: 100%;
}

.iframe-wrapper-1st-3 {
  width: 100%;
  margin-top: -22%;
}

素材DL (実寸: 500×280)

ハートにピン

html

<div class="all-wrapper-1st-4" style="max-width: 600px;">
  <div class="videoimage-wrapper-1st-4">
    <img class="videoimage-1st-4" src="画像URL" alt="">
  </div>
  <div class="iframe-wrapper-1st-4">
    <div class="box-for-video">
      埋め込みコード
    </div>
  </div>
</div>

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-4{display:flex;flex-direction:column;align-items:center;margin:30px auto}.videoimage-wrapper-1st-4{position:relative;z-index:2;width:11%;pointer-events:none}.videoimage-1st-4{width:100%}.iframe-wrapper-1st-4{position:relative;z-index:1;width:100%;margin-top:-8%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-1st-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px auto;
}

.videoimage-wrapper-1st-4 {
  position: relative;
  z-index: 2;
  width: 11%;
  pointer-events: none;
}

.videoimage-1st-4 {
  width: 100%;
}

.iframe-wrapper-1st-4 {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: -8%;
}

素材DL (実寸: 67×107)

毛糸のハート

html

<div class="all-wrapper-1st-5" style="max-width: 600px;">
  <div class="videoimage-wrapper-1st-5">
    <img class="videoimage-1st-5" src="画像URL" alt="">
  </div>
  <div class="iframe-wrapper-1st-5">
    <div class="box-for-video">
      埋め込みコード
    </div>
  </div>
</div>

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-5{display:flex;flex-direction:column;align-items:center;margin:30px auto}.videoimage-wrapper-1st-5{position:relative;z-index:2;width:80%;pointer-events:none}.videoimage-1st-5{width:100%}.iframe-wrapper-1st-5{position:relative;z-index:1;width:100%;margin-top:-21%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-1st-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px auto;
}

.videoimage-wrapper-1st-5 {
  position: relative;
  z-index: 2;
  width: 80%;
  pointer-events: none;
}

.videoimage-1st-5 {
  width: 100%;
}

.iframe-wrapper-1st-5 {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: -21%;
}

素材DL (実寸: 570×320)

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 69

There are no comments yet.

きろろ  

2018/10/15 (Mon) 03:14

ご無沙汰しております

YouTubeを飾ってみる!
いいですね! 最近忙しくて、ブログの更新もままならないのですが、
是非使ってみたいです。
以前に教えてもらった装飾枠もいいですけどねえ((o(。・ω・。)o))ウキウキ

Akira  

2018/10/16 (Tue) 00:53
vanillaice (Akira)

To きろろさん

ご無沙汰しております ('0')/

やり過ぎると鬱陶しいかもしれませんがたまには良いかもしれません。
私も最近バタバタしてなかなかログインできない… ( ̄∀ ̄;)

きろろ  

2018/10/20 (Sat) 02:40

To Akiraさん

飾ってみました(。・ω・。)
最近、超耳にする米津さんを飾ってみましたよ。
一応お知らせまでにm(_ _)m

Akira  

2018/10/20 (Sat) 20:18
vanillaice (Akira)

To きろろさん

きろろさん、こんばんは (o'ω')ノ

米津さん、知らなかったです ( ̄∀ ̄;)
私たぶんドン引きされるぐらい邦楽のこと知りません。
サカナクションという方達のことを3日前ぐらいに娘から聞いた(笑)
日本の音楽シーンも俳優さんも全く無知なワタクシ。恥ずかしい ( ̄∀ ̄;)
あ、でもauの鬼ちゃんの人はわかります。長男に似ているとめっちゃ言われるので。
とか言いながら名前出てこないけど ←

-----
別件ですがスマホから見るとトップページのカテゴリサムネイルが表示されていません。
html内のコメントにミスがあります。

×
<!–ここはコメント–>


<!--ここはコメント-->

コメントアウトの仕方を間違えると正しい描画が行われませんので修正してくださいね。
あと以前もお伝えしましたが、プロフィール文内にある顔文字の
<(_ _)>
この手(?)の部分のブラケットはhtmlタグと誤認識されてしまいますので、プロフィール及び記事内で同顔文字を入れる時にも旧投稿画面を利用している場合
&lt;(_ _)&gt;
と打つようにしてください(上記の&は変換を防ぐために全角で表記しています, 辞書登録をされる際は半角に修正してください)
前方に類似htmlエラーがあるとこの顔文字との組み合わせがレイアウトを崩すことになります。
新投稿画面(通常モード)の場合はブラケットを見た目そのまま(エンティティなし)で打っても問題ありません。

コメントアウトに関する参考記事
https://vanillaice000.blog.fc2.com/blog-entry-383.html

きろろ  

2018/10/23 (Tue) 00:58

To Akiraさん

>米津さん、知らなかったです ( ̄∀ ̄;)
私たぶんドン引きされるぐらい邦楽のこと知りません。

はい、私も知りませんでしたw
「アンナチュアル」というドラマの主題歌だそうです。
そのドラマも見たことがほとんどないのですが……

>別件ですがスマホから見るとトップページのカテゴリサムネイルが表示されていません。
html内のコメントにミスがあります。

ありゃ、ほんとだ!
直します(。・ω・。)
プロフィールの顔文字も消します。
未だに旧投稿画面を使っていて、今回YouTubeを飾ってみるで
初めてHTMLのみで記事を書くのに、新しい投稿画面を使ってみたんですが……
うぅ……、頑張ります。
いつからだったのだろうか(゚◇゚)ガーン

きろろ  

2018/10/23 (Tue) 01:23

To Akiraさん

大変申し訳ございません。
ご指摘の件なのですが、ソースの不要部分をコメント化するを読んでみたのですがわかりません!

<!–ここはコメント–>
<meta name="google-site-verification" content="iTdqt8suuHKtAmofuRoZyT0XJJ53NmWiEuXkOzEzR6g" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-58665325-4', 'auto');
ga('send', 'pageview');

</script>
<!–ここはコメント–>

こちらのことをおっしゃっているんですよね?
これは独自ドメインを使用しているのでGoogleさんに拾ってもらうために、Akiraさんが教えてくださったところではないのでしょうか?
どこをどう書き換えたらよいのやら、私にはさっぱりわかりません。
お暇の時でかまいませんので、ご説明をお願いいたします。
あーーー、なんで気付かなかったんだろう。
iPadでは表示されているんですよ。
iPhonは確かにカテゴリのサムネイルが表示されておりません。
よろしくお願いします。

Akira  

2018/10/23 (Tue) 01:31
vanillaice (Akira)

To きろろさん

こんばんは (o'ω')ノ

コメントアウトの書き方がおかしいので修正を という意味ですよ。
記号の種類と数が間違っています。
<!–ここはコメント–>
ではなく
<!--ここはコメント-->
です。
挟まれている内容は私がどうこうしたものではなくGoogleから発行されるアクセス解析で修正の必要はありません。独自ドメイン云々も無関係です。
追加コードの管理は自己責任で行ってください。それこそコメントアウトというのはそのために使うものです。
このコード自体コメントとは何の関連もありませんので
<!--アクセス解析-->
とされた方が良いと思います。
とにかく後々自分が見た時に意味のわかるコメントを付けるようにしてくださいね。

------
追加です。今気づきました。
html内に

rel="tylesheet"
というのがありますが、これは
rel="stylesheet"
の間違いです。sが欠損しています。こちらも修正必須です。

きろろさんはCSSやJSなど何かを任意追加される際にコピーミス(?)などを発生させやすい傾向にあるようなので、追加する前に一度保存してある内容のチェックをされた方が良いかもしれません。
保存している内容自体が間違っている可能性もあります。
今の所気づいたのはこのぐらいですがまだ他にもあるかもです。

きろろ  

2018/10/23 (Tue) 02:02

To AkiraさんTo Akiraさん

連投ですみません。
わかりました!
もう私は日本語の読解力がなさ過ぎる……
おっちょこちょいなんです、凹むわあ
Akiraさんが書いてくれていたのに、変に難しく考えて(汗
一応、ご確認までに覗いてみてください。

Akira  

2018/10/23 (Tue) 02:20
vanillaice (Akira)

To きろろさん②

コメントアウトの修正はできていますが、くどいようですが コメント内容は自分が後で見た時にすぐに意味がわかる内容に変更されることをおすすめします

ここはコメント

では後々見ても何のことだかわからないですよね。このコード内容はGoogleのアクセス解析なのですから

アクセス解析

と書くのがベストだと思います。コメントアウトというのはそのために使います。意味が無い・意味が不明な内容を記載するのであればコメントアウト自体不要です。

------
styleシートのrel属性の修正ができていないようです。修正必須なので直してくださいね。
(先回のコメントに追記したのでもしかしたら行き違いでご覧になっていないかもです)
その都度テンプレート内だけで修正作業するのではなく 原本の方も同時に修正してください
でないとテンプレートを変更する度に同じミスを繰り返すことになります。

------
あと、コメントの際にフォーム入力しているアドレスが間違っています。
きろろさんはSSL化していないので http のはずですがアドレス欄に httpsと記載されていませんでしょうか。
クッキー情報が残りますので次回コメント時(私のブログでなくてもOKです)に確認・修正をした方が良いですよ。
でないとコメント横のリンクからきろろさんのブログに辿りつけません。
(きろろさんご自身のここでの最終コメント横のリンクアイコンをクリックして確認してください)

きろろ  

2018/10/23 (Tue) 14:18

To Akiraさん

ありがろうございます!
今、出先なので帰宅致しましたら修正します。
もう何度もすみません。
ずぼらな性分が丸わかりになってしまいお恥ずかしいです。

きろろ  

2018/10/24 (Wed) 01:17

To Akiraさん

終わりました。
いやはやお手数をおかけしましたm(_ _)m
なんだか、ずっと使っていたものなのにコピペするたびにやらかしていたんですね。
反省いたします。
もう、私のような人間はカスタマイズ云々の前ですわあ(汗

Akira  

2018/10/26 (Fri) 17:45
vanillaice (Akira)

To きろろさん

お返事遅くなりました (*_ _)

私も原本を汚してしまうことはよくありますよ。
何かに手を伸ばした時に知らずとdeleteキー触ってしまったり(笑)
なので「保存」や「終了」の際に「内容変わってますが上書きしても良いのですか?」って聞いてくれる親切なエディターがやはり必要だと思います。
私などその警告に何度も助けられています(笑)

-  

2018/11/29 (Thu) 01:11

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira  

2018/11/29 (Thu) 16:23
vanillaice (Akira)

To YouTube装飾の件 内緒さん

こんにちは ('0')/

実際に掲載している記事があればページのURLを頂けないでしょうか。というか実物が無いと「どう作業して」「どこが間違っているか」など指摘のしようがありません。
基本的にはソースコードをコピペするだけですから何も難しいことは無いですよ。
ただし記事内にも明記してありますが、旧投稿画面をお使いの場合にはソース内改行不可ですから、全ての改行を取り除くか改行の扱いを「htmlのみ」に変更してください。

参考記事: FC2ブログで謎の空白行ができるのはソースの途中改行が原因です
https://vanillaice000.blog.fc2.com/blog-entry-794.html

コピペしても動画と画像が離れてしまうとなるとこのあたりが原因かなぁ、と主ます。でも実物がないのでわからない (´・ω・`)
改行の扱いを「htmlのみ」に設定した場合には改行が必要な各文末に
<br>
と書いてくださいね。でないと文章が全て横に繋がってしまいます。
的を得ているかわかりませんがとりあえずの回答です。実物をお見せ頂くのが解決へ向けての一番の近道です。
よろしくお願いします。

-  

2018/11/29 (Thu) 23:06

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-  

2018/11/29 (Thu) 23:18

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira  

2018/11/30 (Fri) 15:09
vanillaice (Akira)

To YouTube装飾の件 内緒さん(完了のご報告)

こんにちは ('0')/

改行『自動』のソース改行だったんですね。上手くいったようで安心しました。
お疲れ様でした :)

-  

2018/11/30 (Fri) 23:33

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira  

2018/12/01 (Sat) 00:08
vanillaice (Akira)

To YouTube装飾の件 内緒さん

こんばんは。
右端に寄せるには right: 0; はそのままで
left: 0;
を削除してください。よろしくお願いします。

-  

2018/12/01 (Sat) 00:15

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira  

2018/12/01 (Sat) 17:48
vanillaice (Akira)

To YouTube装飾の件 内緒さん(終了のご報告)

いえいえ。今回の件はそんなに初歩的でもないです(笑)
お疲れ様でした :)

-  

2018/12/05 (Wed) 23:11

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira  

2018/12/06 (Thu) 01:13
vanillaice (Akira)

To YouTube装飾の件 内緒さん

こんばんは (o'ω')ノ

width: 600px; /* ブログカードの横幅設定 */
の後ろに全角スペースが入っていますので削除。

.square_btn:active

border-bottom: none;
の後ろに余分なスラッシュ ( / ) が入っていますので削除。

.box11

width: 600px;
の後ろに余分なスラッシュと全角スペースが入っていますのでいずれも削除。

同じく .box11のブレイス ( } ) が欠損していますので追加
.box11 {
省略
}

-----
全角スペースの含まれている以降のプロパティは終了のブレイスが出てくるまで無効化されます。これはクリティカルなエラーです。

例)
.xxx {
color: white;
font-weight: bold; ←ここに全角スペースが有る場合
font-size: 13px;
text-align: center;
}

.yyy {
color: white;
}

上記の場合は font-size: 13px と text-align: center が無効。.yyyの内容は有効。

今回の件の直接の原因になっているのは .box11のブレイスが無いことです。

.box11{
margin-bottom: 10px;
max-width: 100%;
width: 600px; /全角スペースあり
background-color: white; --- ここから全角スペースのせいで無効
border: 1px solid rgb(211,211,211);
border-radius: 2px;
box-shadow: 0 10px 6px -6px rgba(0,0,0,.1);
color: rgb(51,51,51);
padding: 10px;
--- 全角スペースの影響 + ブレイス無しの影響、これ以降全て無効

.box11 p もYouTube用装飾も全て無効になっています。

まとめ
・全角スペースの削除 2件
・スラッシュ削除 2件
・ブレイス追加 1件

以上です。html, CSS, JSなどは全角スペースが含まれると機能しなくなってしまうので注意してくださいね。

参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

参考記事: よくあるCSSの記述ミス
https://vanillaice000.blog.fc2.com/blog-entry-769.html

よろしくお願いします。

-  

2018/12/06 (Thu) 09:32

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira  

2018/12/06 (Thu) 15:21
vanillaice (Akira)

To YouTube装飾の件 内緒さん(完了のご報告)

こんにちは。
良かったですー。お疲れ様でした :)

金  

2018/12/22 (Sat) 12:17

こんにちわ!

又もや、お願いに上がりました(☜あきらちゃん、逃げんといて!金中々理解せんけ・恐ろしい?)

金も、こんな風に「ユーチューブ」飾りたいです
一生懸命(本人は)、あれこれ と模索しながら試してみたのですが
全くアカンでした

金は「Fields - FC2ブログテンプレート」の[ Fields ] のスタイルシート編集の方を使ってます

え~と、さいしょの「薔薇」の画像を、金の所に保存して

https://blog-tmp.west.edge.storage-yahoo.jp/res/blog-05-bd/spx88pn9/rte_tmp/img_073587ddc9_0

こんな、URLを取りました。
で、音楽は

<iframe width="560" height="315" src="https://www.youtube.com/embed/MWiA217Fs3E?start=22" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

此処を、取りました

之を、どの様に 金のスタイルシートの中に入れたら良いのですか?

あきらちゃんの埋め込みコード

<div class="both-wrapper"> <div class="videoimage-wrapper"> <img class="videoimage" src="画像URL" alt=""> <div class="iframe-wrapper"> <div class="box-for-video"> 埋め込みコード </div> </div> </div></div>

の中にいれて、スタイルシートに貼った後の操作が解りません

こんな説明で、解るかな?
端的にいうと、ユーチューブの音楽に此の飾りを付ける方法を教えて下さい

と、言う事何ですが…(。´・ω・)?

お願いできますか?

金  

2018/12/22 (Sat) 13:05

追伸

薔薇画像のURLの所は
[[img●(●https://blog-001.west.edge.storage-yahoo.jp/res/blog-05-bd/spx88pn9/folder/737599/12/29751812/img_0?1545449994.570.302●)]]

を、入れ込めばええのですよネ?

金  

2018/12/22 (Sat) 13:12

再追伸

薔薇画像のURLの所は
[[img●(●https://blog-001.west.edge.storage-yahoo.jp/res/blog-05-bd/spx88pn9/folder/737599/12/29751812/img_0?1545449994.570.203●)]]
でした。
サイズ間違えました。スンマセン(o´・ω・)´-ω-)ペコリ

Akira  

2018/12/22 (Sat) 15:31
vanillaice (Akira)

To 金さん

金さん。こんちはー (●'0'●)/

ちょっとよくわからないんだけど、画像URLを見ると yahoo の文字があるよね。そして
[[img●(●https://blog-001.west.edge.storage-yahoo.jp/res/blog-05-bd/spx88pn9/folder/737599/12/29751812/img_0?1545449994.570.203●)]]

これ何?これってマークダウンだよね。つか、yahooのwiki文法ってやつじゃない?
yahooブログでやりたいってこと?yahooは記事内でJSとか書けないしスタイルシートの受け皿が無いからできないよ (´・ω・`)
え?どゆこと?(笑)

マークダウン(yahooは「wiki文法」という名称)というのはそのサービス内だけで使える簡易記述法で、他のサービスでは使えないよ。それは理解しているだろうから、たぶんyahooの方で使いたいってこと?なのかしら (´・ェ・`)

仮にFC2での話だとしてもhtmlはスタイルシートには書けません。

htmlの例
<div>あいうえお</div>

CSSの例
.xxx {
font-size: 13px;
}

htmlタグがあればそれはCSSでなくhtmlだからスタイルシートに書いてしまうとテンプレートが崩壊しますよ。
とりあえず「どこでやりたいのか(FC2 or yahoo)」を教えてね。

金  

2018/12/22 (Sat) 16:47

こんばんわ!

FC2でやりたいの

でね、あきらちゃんの「薔薇」の画像を
マイピクチャーにほぞんして、URLを取ろうとしても出来ないん。
あきらちゃんの、「薔薇」からやと、URL取れるけど、それやと「直リンク」になってまうでしょ?

之から、パパさん帰る言うけ
直ぐ、御返事出来ないかもしれん

兎に角、FC2で使いたいの
<きろろ>さんみたいに・・・・(。´・ω・)?
出来るかな?

又、無理言っちゃたかな?

金  

2018/12/22 (Sat) 17:08

あ!

https://blog-imgs-111.fc2.com/c/h/i/chibisann2/sozai.png

之が、「薔薇」のURLだよね
FC2の方のアルバムに入れて取り出した

宜しくお願いします。

Akira  

2018/12/22 (Sat) 17:23
vanillaice (Akira)

To 金さん

マイピクチャーというのはパソコンの中だけのことだよ。
FC2ブログのサーバーにアップロードしないと。パソコンの中身は金さんにしか見られないのだから、web上で見られるようにするには必ずサーバーへのアップロードが必要です。
FC2とyahooは別のサービスなので行き来したり特性を混同しないよう注意。FC2で何かをする時にyahoo固有のwikiに変換するような必要は一切生じないので切り離してください。

①画像をアップロードする(yahooは不可, FC2ブログのサーバーへアップ)
https://admin.blog.fc2.com/control.php?mode=control&process=upload
上のURLから直接アップロード画面に行けます。金さんのFC2ブログの管理画面の上の方に「ファイルアップロード」という項目があるよね。普段そこに画像のアップロードをしているはずなので、それと同じことをするだけです。

②管理画面上部の「簡易モード」をOFFにする。
ここがONだとこれからの作業ができないので必ずOFFに。


③投稿画面の設定を「旧投稿画面」にする
投稿内容から察するに金さんは「新投稿画面」の方を使っているはず。
「ここから旧投稿画面に戻ることができます」と画面上部に出ているはずなのでそこをクリック。
投稿画面が切り替わったら、まず下の方へスクロールして
「詳細設定」の中に「改行の扱い」という項目があるので「HTMLタグのみ」のラジオボタンをクリック
(ラジオボタンというのは前に教えた通り ◎ ←こういうやつ)

④htmlを「本文」か「追記」のどちらかに記載
金さんはたぶん「追記」を使ったことが無いと思うけど、今回は使わないとダメです(笑)
とりあえず今回は本文と追記の説明は省くので、htmlは本文で良いです。
html
と書いてある方のコードをコピペ。


⑤htmlソースに画像URLとyoutubeの埋め込みコードを記載
コードを貼り付けたら画像URLとyoutube埋め込みコードの編集。
画像URLはファイルアップロード画面から取得。youtubeは先に金さんが書いた
<iframe width="560" height="315" src="https://www.youtube.com/embed/MWiA217Fs3E?start=22" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
↑ これを「埋め込みコード」のテキストと差し替えるだけ。

⑥「追記」にJSコードを記載
スタイル用JS と書いてあるコードは追記に記載。この内容は何も触らなくて良いです。
スタイルシートの方は今回は使わないことにします。その方が良いと思う。今後テンプレートを変更した時にたぶん泣くことになるので(笑)

以上です。
特に難しいことはないよ。ほとんどコピペで、書き換えるのは画像URLとyoutubeコードだけだし。
金さんがまだFC2の機能をうろ覚えなのと、yahooを引きずっているのと、あとhtmlとCSS(またはスタイルシート)の別がちょっとあやふやかなぁと思う。
<div> ← これ何度も見たことあるよね。こういうのがhtmlです。
<table>とかもそう。< と > の記号で挟まれてるのがhtmlタグ。

CSS(スタイルシート)というのはyahooでは見たことないはず。
.xxx {
color: red;
}
こういうのがCSSです。

-----
注意。
改行の扱いを「htmlタグのみ」に変更するので、改行したい文章の末尾には
<br>
と書かないと改行できないので注意。

金  

2018/12/22 (Sat) 19:59

未だ、出来ません(ノД`)・゜・。

<a href="https://blog-imgs-111.fc2.com/c/h/i/chibisann2/073a2e7d6e5f82d5933819557b822089.jpg" target="_blank"><img src="https://blog-imgs-111.fc2.com/c/h/i/chibisann2/073a2e7d6e5f82d5933819557b822089.jpg" alt="" border="0" width="1100" height="1100" /></a>

可愛い、女の子に音楽のプレゼント


<div class="both-wrapper">
<div class="videoimage-wrapper">
<img class="videoimage" src="https://blog-imgs-111.fc2.com/c/h/i/chibisann2/sozai.png" alt="">
<div class="iframe-wrapper">
<div class="box-for-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/MWiA217Fs3E?start=22" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
之が、全部貼ったものですが、ユーチューブ中に「薔薇」が入って呉れません
何処がアカンのでしょうか?


ホンマ、急がんでエエでセケネ
何時も、時間のかかる金やけ・・・(;´・ω・)

Akira  

2018/12/22 (Sat) 20:36
vanillaice (Akira)

To 金さん

① 改行の扱いを「HTMLタグのみ」にしていない
② 追記にJSを記載していない

以上2点。説明をよく読んで一つづつ確認しながら注意深く (o'ω')ノ

金  

2018/12/22 (Sat) 22:35

(ノД`)・゜・。

今日は、何度試しても
「薔薇」が重なって呉れません

時間を置いて、又 気を取り直して してみたいと思います

何時も、ホンマにお手間掛けます
何か、何時もこうやと あきらちゃんに質問をするのが、申し訳なってしまう

新しい事、アカン金やな・・・

お手間かけて御免ね。
良い、御返事したいんよ・金もね。


「あきらちゃん、できたよ!有り難うね!(∩´∀`)∩」って・・・
こんな、御返事がね。

Akira  

2018/12/22 (Sat) 23:34
vanillaice (Akira)

To 金さん

金さん、ごめん。ダメだ。
金さんは全文タイプのテンプレートだから、scriptは本文に入れないとダメだわ。
ごめーん (*_ _)

スタイル用JSは全ての記事内容を書き終わった最後に「本文」に書いてください。
追記だと個別記事ではちゃんとスタイリングされるけどトップではダメなんだった。
これは私がちゃんと書かなかったせいです。ごめんなさい 。(゚うェ´゚)゚。

金  

2018/12/23 (Sun) 00:34

あ・き・ら・ちゃ~~ん   ヾ(≧▽≦)ノ

ホンマに、辛抱強く粘ってくれてありがとう!

できたよ!  v(´・∀・`*)vィェィ♪

今回は、言えるよ!
念願がかなったよ!
「あきらちゃん、できたよ!有り難うね!(∩´∀`)∩」

でもね、アンマシ使わん方がエエかな?
金の事やけ、又 ゴチャゴチャになってワヤにしちゃうかも・・・
もっと、サッサッサッ て、出来る様になればね

今夜は、エエ夢見て寝られそうや
あきらちゃんは、誰かさんと イチャイチャして下さいね (*´▽`*)

お・や・す・み ヾ(@´∀`@w)ノシoO○(★*・。ォャスミ。・*★) &お疲れ様でした ヾ(≧▽≦)ノ

※。
覗きに来てね!
話全く関係無いけれど、hige さんが「あきらちゃん」の事 ボッコ褒めてたよ!
金も嬉しかった。
お友達が褒められるのは…・

Akira  

2018/12/23 (Sun) 01:00
vanillaice (Akira)

To 金さん

良かったー。ごめんね。私が悪いです ( ̄∀ ̄;)
相当頭を悩ませたのではないかと… すみませんホント ( ̄∀ ̄;)
とりあえずこの顔文字をパクろうと思った ↓
v(´・∀・`*)v

higeさんが褒めてくださったの?何をだろう。健康すぎなところとかでしょうか((((笑)
ちなみに相方は現在インフルエンザで死に体でございます(笑)

金  

2018/12/23 (Sun) 10:57

え~~~~Σ(*・д・ノ)ノ゛ナニュュュュ!

昨夜は、そんな状態で
色々な方(特に手の掛る金へにも)に、御返事してたんや!
御免ね、
あきらちゃんは、頑丈そうやけれど案外に弱い所有るよね
根性と正義感は、物凄く強いけれどね。
以前にも、熱出して伸びてた事有ったよネ
其の時に、あの方が優しく接してくれたって記事に書いてた事有った…と思います。

あのね、
hige さんに、あきらちゃんの事をお話しすると、ホンマに良く褒めてくれるんです
金は歳イロウテても、お行儀の悪い会話しかデケヘンけれど
あきらちゃんもhige さんも、訪問者の方には 執ってもお行儀の良い言葉使いするもんね
で、近々にあきらちゃんを褒めてくれた「文」を貼るね

>Akira氏のテンプレは至れり尽くせりで、しかもオシャレ。
> Akira氏のブログには私も時々書き込みさせていただいてますが、いつも真摯な回答をいただいてまして、ほんとに尊敬しているのと、その態度を学ばなければと自戒するところが多いのです。

マダマダ、色々な会話の時に褒めてくれる
あきらちゃんも、hige さんも 雑で無知な金に他のブロガーさんとナンチャ変わらん応対してくれる
感謝してま~~す!

1~2日位は、お仕事お休み出来るでしょ?
ユックリ、養生して下さいね
って、何も知らん金みたいな人達が 訪問してくるけね
平生も、ボッコ忙しいしね
困ったもんやね ドーシヨーカナーン(*´・ω・`)フゥ~ン・・・

兎に角、御大事にして下さいね。

ホンマに、シンドイ中ぁりがとぅ⌒♪+。(〃´∪`〃)ゞ

金  

2018/12/23 (Sun) 11:47

訂正です!

相方さんやったんですね。。。之位の文でも勘違いするんやケネ
ほんまに、困ったもんです。

相方さんからって、クリスマスプレゼントや言うて「インフル」何か貰わんでね。

相方さん・・・お大事にして下さいね。

Akira  

2018/12/23 (Sun) 16:40
vanillaice (Akira)

To 金さん

相方ですー。
私インフルエンザかかったこと無いよ ( ̄∀ ̄)
おととしぐらいから私は経営に徹しているので週末でもよほどの事がなければ呼び出されることは無いのです。

higeさんお褒めの言葉をありがとうございます(笑)

hige  

2018/12/27 (Thu) 01:10

No title

 Akira氏に寄せられている、コメントへの細々とした真摯な回答を拝見させて戴いているので、そんな私のAkira氏絶賛は当然と思います。
 私に限らずAkira氏へ質問を投げかけて、解決に至った方たちが沢山居られて、ありがとうの言葉も一杯ですよね。しかもそのコメントのやりとりも役に立って。
 いらつかず、良くありがちな、初心者の説明しきれない文脈を整理し、切り分けていく、で時折、Akira氏自身が私の勘違いでしたと、切れて怒ったりしない。そんなAkira氏。
 なんか愛があふれてます。(と、神聖化!)
 ところが、そんなAkira氏が切れてしまう人が、世の中にやっぱ、おられるのでした。
 困ったことをどこかのネット上で質問しても、上から目線で、質問の仕方が悪いとか、そんなことも知らんのか、といった態度の回答をされる方が多いです。
 FC2ブログ:FC2コミュニケーションの2015年頃の質問・疑問コミュニティとかでAkira氏は大活躍されてまして、私がAkira氏の存在を知ったのもその頃だと思います。なんでFC2コミュニケーションのブログ疑問関連コミュニティに、識者が回答しなくなったのかの疑問をAkira氏にぶつけたのが、その頃だったのでしょうか。
 その時のAkira氏の回答に私は惚れ込んでしまいました。(FC2ブログの検索はコメントは対象外となってる様でヒットしません。)

 実はこの、私のことで、どんな風にコメントしたらいいのかわからなくて放置していたのですが、やっとコメントを作ることができました。

hige  

2018/12/27 (Thu) 01:20

追記

aroundfc2cat--780.jpg
の画像はオリジナルなん?

使ったら あかんのやろね。

Akira  

2018/12/27 (Thu) 01:33
vanillaice (Akira)

To higeさん

higeさん、こんばんは ('0')/

「そんなことも知らんのか」はちょっとひどいですね ^^;
でも自分がわかっていると何故相手がわからないのかがわからない、ということはありますよね。
私思うんですけど、「自分ができる」ことと「誰かに教えることができる」ことって全然違いますよね。教えるのって本当に難しいです。教鞭をとっている方なんてもうホント尊敬します(笑)

でもhigeさん、物を覚えるのに一番効果的なのって人に教えることだと思ってるんですよ。
だから私の子供には勉強するときは「自分の中で自分に説明するシミュレーションをしろ」って言ってます。
そして教える難しさを知っていると自分が質問する側に立った時には自ずと相手を敬うようになりますよね。

いつもありがとうございます :)

----
aroundfc2cat--780.jpgってなんだろう (´・ω・`)
どれのことかしら (´・ω・`)

hige  

2018/12/28 (Fri) 08:33

aroundfc2cat--780.jpg
は、「FC2ブログのあれこれ」というカテゴリーのサムネールに使われているアヒルちゃんの画像です。
https://blog-imgs-115.fc2.com/v/a/n/vanillaice000/aroundfc2cat--780.jpg

Akira  

2018/12/28 (Fri) 18:53
vanillaice (Akira)

To higeさん

higeさん、こんばんは (●'0'●)/

それたぶんpixabayだと思います。
https://pixabay.com/

私はイラスト書けませんし写真も撮れませんのでpublic domain(著作権なし)かcreative commons(条件付き無料)のいずれかです。
あひるのバスグッズはpublic domainが結構あります(笑)

hige  

2018/12/29 (Sat) 14:01

ありがとうございます。
pixabayを見てきました。すごい画像の量ですね。なかなか楽しいサイトです。
よさげな画像を探してみます。

Akira  

2018/12/29 (Sat) 16:25
vanillaice (Akira)

To higeさん

はい。pixabayはpublic domainの方なので加工も自由ですよ。ありがたいことです ・ω・

きろろ  

2019/01/13 (Sun) 16:28

明けましておめでとうございます!

Akiraさん、明けましておめでとうございます!
昨年はほんとうに……、なんか同じことを毎年言っているような(..;)
でもほんとうにお世話になりました!
本年もよろしくお願い申し上げます。

ところで既出であったら申し訳ございません!
新年早々、おバカな質問なんですが、
YouTubeを飾るなんですが、
各デザインのCSS雛形なのですが、
デザインを変えるたびにテンプレートに付け足していくと言うことなんでしょうか?

びよーんとポップアップするcolorboxはもう捨てました!
どうもAxisとは相性が悪いのか、きろろの設置がわるいのか、もうわからん(>_<)
サムネイル画像は表示されても、こんどはiPhon、iPadのフッター?になるのかしら?
各SNSのアイコンが表示されないのですよ。
なので、「YouTubeを飾る」で統一しようかとw

それでほかのデザインを拝見していたら雛形が若干違うような気がした?
なんで疑問形……、それはきろろ自身がわからないのであります。すみません。

お手数ですが、レクチャーをお願いいたしますm(_ _)m

追伸
独自ドメインのSSL化が始まりました。
しらなかったきろろは自分のサイトが「保護されていない」と表示されて、怖くなりググりまくったら、
FC2がすでにアナウンスをしておりました。あぶねぇ(=_=)

Akira  

2019/01/16 (Wed) 21:46
vanillaice (Akira)

To きろろさん

お返事大変遅くなりました (*_ _)
こちらこそよろしくお願いします :)

> 各デザインのCSS雛形なのですが、デザインを変えるたびにテンプレートに付け足していくと言うことなんでしょうか?〜

この件については記事の注意書きにある通りです。使用頻度が低い場合にはスタイルシートに書かずに、その都度JSでCSS内容を差し込んでください。
そのために2種のCSSを用意しています。

-----
> ほかのデザインを拝見していたら雛形が若干違うような気がした?〜

もちろん違います。画像の形状・特徴や動画と重ねる際の位置合わせなどが全く異なりますので物理的に言っても共通化することはできません。共通で使えるものであれば「共通CSS」という形でお伝えします。共通化できないので各個のhtmlとCSSをまとめています。

JSでのスタイル指定をおすすめします(テンプレート変更時の移植作業が不要です)
よろしくお願いします。

きろろ  

2019/01/18 (Fri) 15:23

かしこまり!

お返事、ありがとうございます。
JSでスタイルを書く、つまりhtmlの投稿画面でその都度書けばよろしい?のですね。
また、的はずれなことを言っていたらすみません!
色々考えてやって行きたいと思います。m(_ _)m

Akira  

2019/01/18 (Fri) 17:22
vanillaice (Akira)

To きろろさん

こんにちは (●'0'●)/

はい、そういうことです。その方が合理的だと思いますよ。

きろろ  

2019/01/21 (Mon) 01:07

To Akiraさん

ありがとうございますm(_ _)m
移植していました(>_<)
投稿記事でjsを書くようにします。

Akira  

2019/01/21 (Mon) 01:21
vanillaice (Akira)

To きろろさん

こんばんは (o'ω')ノ

はい、その方が楽ですよね。
お疲れ様です :)

オカンチ  

2019/04/15 (Mon) 18:23

あちらも こちらも 作ってみたい記事ばかりで
挑戦してみたいと思います

いつも みなさんのコメントが勉強になります

Akira  

2019/04/16 (Tue) 16:46
vanillaice (Akira)

To オカンチさん

素材を入れ替えるだけでOKではないんです。残念ですが (´・ェ・`)
利用する素材によって計算が必要なので、とりあえず今のところは素材も同じものを利用して練習してみてください。
先に言えば良かった。ごめんなさい ^^;

----
Yahoo!でよく利用していたabsoluteなんかもそうなんですが、計算せずにやってしまうと必ず前後内容と干渉しますので、それを避けないといけません。そのあたり多少テクニカルな内容になりますのでまたおいおい説明しますね。

オカンチ  

2019/04/16 (Tue) 21:14

干渉している記事の画像は Akiraさんから戴いていきます
ありがとうございます

オカンチ  

2019/04/16 (Tue) 21:35

今 画像を入れ替えましたが 線が消えません><;
元の画像サイズは 340 x 196 でした

Akira  

2019/04/16 (Tue) 23:44
vanillaice (Akira)

To オカンチさん

お疲れ様です。
YouTubeの埋め込みコードの取得の仕方を記事内容で確認してくださいね。エディターのYouTube検索からの掲載は コード内容が違います ので利用不可です。

オカンチ  

2019/04/17 (Wed) 13:57

YouTubeの埋め込みコードの取得の仕方 が…
Youtubeのメッセージ リンクの共有画面が どこを操作したら出てくるのでしょう?
音楽画面から 埋め込みコードをコピーしていました

Akira  

2019/04/17 (Wed) 15:30
vanillaice (Akira)

To オカンチさん

こんにちは ('0')/

以前にブックマークレットの件で「ポップアップをブロックしていませんか」と尋ねたところ、オカンチさんのお返事は「していない」ということでした。今回の状況を考えてもやはり「ブロックされている」のではないかと思います。
埋め込みコードの取得は特に頭を悩ませるような作業ではないので、ここで躓くということはポップアップが出てこないのだろうと。現場に居ないので推測です。
やはり一度設定を確認してください。

参考記事: chromeポップアップブロック
https://support.google.com/chrome/answer/95472?co=GENIE.Platform%3DDesktop&hl=ja

ブラウザ拡張機能やセキュリティソフトの設定もご確認ください。
ポップアップは確かに悪意のあるものも中にはあるんですが、ログイン画面や画像共有サイトのダウンロードなどポップアップ画面で操作する場合も多いので、許可しておかないとオカンチさん自身の作業が大変だと思います。

とりあえず
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画アドレス" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

これが現在のコード内容でこれは定形ですから動画アドレスを差し替えるだけで利用できます。こちらを辞書登録して使っても良いと思います(動画アドレスはブラウザアドレスバーから取得できます)
ただしyoutubeもチョコチョコと変更を入れていますのでずっと使えるというわけではありません。

オカンチ  

2019/04/17 (Wed) 16:33

毎回 お手数を お掛け致します
拡張機能 Search App By Ask v2 が オフになっていたので
オンにしたら Topページ上に 検索バーが出てしまいました
ポップアップとリダイレクト は許可になっていました

お時間取らせて 本当に申し訳ないです

オカンチ  

2019/04/17 (Wed) 16:54

ソースコードを載せたら スパムとされてしまいました~

本文だと線は出ませんが 追記で載せると 線が出ます
https://okanchi1027.blog.fc2.com/blog-entry-31.html

Akira  

2019/04/17 (Wed) 18:03
vanillaice (Akira)

To オカンチさん

Askは自ら入れたのでなければ感染です。マルウェア削除ツールですがask自体がマルウェアみたいなものなので(勝手にインストールされるので)削除した方が良いと思います。

参考記事: マルウェア駆除ブログ 様
http://makobun.seesaa.net/article/413737566.html

-----
線の件ですが、それはyou may also like の仕切り線で通常でも出ています。marginの関係で重なっています。
これは私の方でツベのコードを修正した方が良いと思いますので少しお待ち下さい。

Akira  

2019/04/17 (Wed) 21:09
vanillaice (Akira)

To オカンチさん②

修正しました。素材変更も容易にできるようにしました。このページにあるものは margin-top のネガティブ値(単位は%)で重なりを調整できますので、計算方法はまたお伝えするとして、今は見た目を確認しながら数値調整してみてください。
よろしくお願いします。

オカンチ  

2019/04/17 (Wed) 21:50

ありがとうございました m(_ _)m

TOPの数値を 45%にしてみました
画像によって 位置の変化が良く解りました 

Akira  

2019/04/17 (Wed) 21:55
vanillaice (Akira)

To オカンチさん

absoluteを使わずに済むようにソースを変更しました。absoluteはちょっとしたことで干渉したり画像が見切れたりしますので、今ここに掲載しているソースに変更された方が良いと思います。その方が変更も楽です。
私が最初からそうすれば良かったんですけどね。すみませんです ^^;

オカンチ  

2019/04/18 (Thu) 23:13

ありがとうございます
また 作ってみます お手数掛けました

Akira  

2019/04/19 (Fri) 17:43
vanillaice (Akira)

To オカンチさん

いえいえ。こちらこそお手数おかけしました ^^;

メッセージボードの方も拝見しましたよ。オカンチさんとてもカンが良いので応用もすぐにこなされますね。
こういうやり方(レスポンシブ)でソースを書けばFC2でも使えます。楽しんでくださいね :)

コメント投稿

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)