コメント欄

YouTubeコメント欄に指定した場所にスキップさせるリンク機能を発見

Categories | YouTube

YouTubeコメント欄に指定した場所にスキップさせるリンク機能を発見」と、意味

わからないタイトルかもしれませんが、事の発端はたまたま長編の動画を作成したもんで、

動画中の内容が分かりやすくコメント欄に詳細を記述したんです。

こんな感じに・・・

0923 400x300 YouTubeコメント欄に指定した場所にスキップさせるリンク機能を発見

画像を拡大するとわかると思いますが、動画の中の内容を時間ごとに説明したんです。

01:00 京王線 高尾駅着
02:41 高尾駅北口 陣馬高原下行き発
03:13 陣馬高原下バス停 到着
03:25 陣馬山に出発
03:53 陣馬高原 新ハイキングコース入口
07:17 陣馬山 山頂

そしたら自動的にリンクが貼られ、例えば02:41をクリックするとその時間に

ジャンプ再生するんです。

まぁ、実際の動画を見てもらうのが一番理解しやすいので、

ここね ↓

高尾山(奥高尾)縦走レポート 陣馬山~明王峠~景信山~小仏峠~高尾山

あ! ここ↑クリックしてもモーダルウィンドが開かれるのでコメント欄が見れなかった。

 

すみません

下記URLをコピペして見て下さい。

https://youtu.be/IkMdBM6PSvY

 

どうです? 見れましたか?

この機能はたまたま発見したのですが、ググってみると随分前からあったみたいですね。

でも、裏技的な機能なので、自分的にはニンマリって感じです。

 

追伸

スマホで確認したら、この機能はまだ使えないようです。

Comment(0) | Trackback(0)

TAGS: / / / / | 2016年9月23日 |

コメント欄のカスタマイズ その2 アバター追加 「Simple Local Avatars」導入

Categories | ブログ(WordPress)

ブログのコメント欄をカスタマイズしました。

以前のカスタマイズは、アバターの選択肢がなかったのを使えるようにし、

各所微調整しました。備忘録です。

 

まず、

設定 > ディスカッション で「アバターの表示」にチェック入れる。

プラグイン「Simple Local Avatars」 を導入(インストール)

ユーザー > あなたのプロフィール で「Upload Avatar」 画像を取り込む

1107 400x218 コメント欄のカスタマイズ その2 アバター追加 「Simple Local Avatars」導入

テーマディレクトリ内「style.css」のコメント欄を少し変更。

 

/*コメント欄のカスタマイズ*/

h3#comments {
	font-size: 11px;
	margin-bottom:20px;
	margin-top:30px;
}

#comments .navigation {
	padding: 0 0 18px 0;
}

.commentlist li.comment {
	line-height: 24px;
	margin: 0 16px 30px -30px;
	padding: 10px 15px 0 15px;
	box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
	background-color:#FFFFFF;
    list-style: none;
	font-size:12px;	
}

.comment-author {
	float:left;
}

.comment-author cite {
	color: #000;
	font-style: normal;
	font-weight: bold;
	padding: 0 0 12px 12px;
	vertical-align:top;
}

.comment-author cite a {
	color: #000;
	font-style: normal;
	font-weight: bold;
	padding: 0 0 12px 12px;
	vertical-align:top;
}

.comment-author span {
	vertical-align:top;
	margin-right:30px;}

.comment-meta { margin-bottom:20px;}

.comment-meta a:link,
.comment-meta a:visited {
	color: #888;
}

.commentlist p{ margin-left:50px;}

.reply {
	font-size: 12px;
	padding: 0 0 10px 0;
}

Comment(0) | Trackback(0)

TAGS: / / / / / | 2014年11月7日 |

コメント欄のカスタマイズ WordPress

Categories | ブログ(WordPress)

今回はワードプレスのコメント欄をカスタマイズしました。

コメント欄の設置方法は、前回の記事「ブログにコメント欄を追加しました」を見てくさい。

さてと、

phpはまだまだ初心者ですが、htmlは割りと得意にしてる私です。

デフォルト状態をブラウザの「ページのソース」で表示させ、

どうな感じにコメント欄が生成させたか、取りあえずタグを理解すぅ。

でぇ、イジリたいタグをテーマフォルダ内の「style.css」に書き出し、

こうカスタマイズした。 参考まで

 /*コメント欄のカスタマイズ*/
h3#comments { font-size: 11px;
margin-bottom:20px;
margin-top:30px; }
#comments .navigation {
padding: 0 0 18px 0;
}
.commentlist li.comment {
line-height: 24px;
margin: 0 16px 30px -20px;
padding: 10px 0 0 70px;
background-image:url(images/abt.png);
background-repeat:no-repeat;
background-position:10px 10px;
box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
background-color:#FFFFFF;
list-style: none;
font-size:12px;
}
.comment-author {
float:left;
margin-right:30px;
}
.comment-author cite {
color: #000;
font-style: normal;
font-weight: bold;
}
.comment-meta a:link,
.comment-meta a:visited {
color: #888;
}
.reply {
font-size: 12px;
padding: 0 0 10px 0;
}

実際にコメントされるとこんな感じに表示される。

2013 0613 01 400x172 コメント欄のカスタマイズ  WordPress

アバターはフリー素材で拾ってきたものですが

↓必要であればコピペして使ってくさい。

abt コメント欄のカスタマイズ  WordPress abt.png  50×50ピクセル

序にコメントフォームも少しいじりました。

これまた参考まで

/* Comments form */
input[type="submit"] {
color: #333;
}
#respond {
line-height: 24px;
margin: 40px 16px 40px 20px;
padding: 18px;
box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
background-color:#FFFFFF;<br /> }
#respond p {
margin: 0;
}
#respond label {
color: #888;
font-size: 12px;
}
#respond input {
margin: 0 0 12px;
width: 260px;<
}
#respond textarea {
width: 98%;
margin-bottom:12px;
}

こんな感じ

2013 0613 02 400x375 コメント欄のカスタマイズ  WordPress

自作テーマなので、仕様の違い?で表示も若干異なるかもしれません。

また、今回確認はWinXPにてブラウザはFirefoxを使用しています。

一部CSS3も使っているのでIE8以下は対応していません。

しまい

Comment(3) | Trackback(1)

TAGS: / / | 2013年6月13日 |

ブログにコメント欄を追加しました

Categories | ブログ(WordPress)

私、ワードプレスの投稿記事にコメント欄を作るのに半日苦闘しました。

まず、コメントフォームでぐぐってみたのですが

<?php comment_form(); ?>

↑このタグを「single.php」に追加し、新たに「comments.php」なるファイルを作り

うんぬんかんぬん・・・ってことが色々ヒットしました。

でぇ、取りあえず<?php comment_form(); ?>を「single.php」に追加し

サーバーにアップしたんですぅ。そしたら出来ました!?っと思いきや、

フォームは動いても、コメントがどこのも表示されない。

やはり新たに「comments.php」なるファイルを作らなきゃだめなんかな・・・

殆ど諦めていたんですが、とあるサイトで見つけました!!

<?php comments_template(); ?>

このタグを「single.php」」にコピペするだけで出来ました。

2013 0608 333x400 ブログにコメント欄を追加しました

テストでコメントしてみましたが、ばっちしです。

デフォルトはこんなもんなんでしょが、今後レイアウトをカスタマイズしてみます。

コメント欄のカスタマイズ WordPress につづく

Comment(0) | Trackback(1)

TAGS: / / | 2013年6月8日 |