サイト作成メモ #11
2015年3月～2017年3月まで運営したFC2ホームページ作成メモ
111 Googleカスタム検索フォームが崩れる原因判明？！
記載日 : 2016/3/23
Googleカスタム検索フォームが崩れる原因はgetbootstrap(cssファイル)の4行目のline-heightの記述が原因だった。
body{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:1.42857143;
color:#333;
background-color:#fff;
}
もうひとつの原因。
*{
-moz-box-sizing:border-box;
box-sizing:border-box;
}
110 動画の再生方法を変更
記載日 : 2016/1/1
2015/12/24、すべての動画の再生方法をすべてレスポンシブ対応のjQueryを使ってモーダルウィンドウで再生するようにしたので画像のようにスライドさせて再生できるようになった。
109 一部の画像を連続表示するようにした
記載日 : 2015/11/20
「設定 記事一覧」の画像表示方法をColorboxでグループ表示、つまりクリックで画像の切り替えができるようにした。
class="colorboxGroup"
108 「更新情報とお知らせ」の領域の高さを変更
記載日 : 2015/11/18
「更新情報とお知らせ」の領域でマウスで一回の垂直スクロールで進む距離がいい感じになるように高さ(height)を150px → 185pxに変更。
107 Colorboxを利用したYouTube動画で全画面できない不具合を一部解消
記載日 : 2015/10/21
ChromeとFirefoxにおいて、colorboxによるYouTubeの動画表示(画像下の「PLAY」で表示される動画のこと)でメニューにある全画面アイコンがグレイアウトして機能しないのでcolorboxのバージョンを1.6.0から1.6.3にバージョンアップしたら解消した。尚、IE10では未解決。また、104のような埋め込み動画も同様な不具合があるが原因不明のため未解決。
106 YouTubeのサムネイルお化け…！？
記載日 : 2015/10/18
このページにあるSyntaxHighlighterのコードにYouTubeの埋め込みコードを記載するとページの読み込み時に動画の縦に長いサムネイルがページ一杯に表示される不具合が発生。どうしても解消しないのでコード削除で対応した。
105 YouTubeの埋め込み動画をレスポンシブ対応に
記載日 : 2015/7/28
詳しいことは分かりないが下記のように記載するとなる。詳細はドットインストールの講座iframeを埋め込もうを見てもらいたい。尚、htmlのコードも記載してたんですがこのコードを記載すると表示がおかしくなるのでやむなくコメントタグで非表示にしているのでhtmlソースを見れば載ってます。
.xxxxx60 {
width: 60%;
float: left;
margin: 0 24px 24px 0;
}
@media screen and (max-width:480px) {
.xxxxx60 {
width: 100%;
}
}
.movie {
position: relative;
height: 0;
padding-top: 56.25%;
}
iframe {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.xxxxx {
width: 32px;
height: 32px;
margin: 10px;
background-image: url('../images/xxxxx.png');
background-repeat: no-repeat;
line-height: 32px;
text-decoration: none !important;
float: left;
}
.movieCaption {
display: block;
position: relative;
top: -32px;
left: 50px;
width: 90%;
padding-right: 40px;
word-wrap: break-word;
clear: both;
}
104 YouTube埋め込み動画のタイトルバーを非表示に
YouTubeの埋め込み動画の上部にタイトルが表示されるのがゴチャゴチャして好きじゃなかったので動画のURLに”?showinfo=0”を付けて非表示にした。後に廃止。
103 jquery.elevateZoom-3.0.8.min.js
LightBox2はモバイル環境で使いにくそうだったのでjQueryのプラグイン「jquery.elevateZoom-3.0.8.min.js」を導入してみた。マウスオーバーで拡大されるのでクリックする手間が省けるが画像サイズによっては見にくいものもあるので別タブで開く画像リンクも貼っておく。
<script src="../js/jquery.elevateZoom-3.0.8.min.js"></script>
<script>$(function() {
$(".zoom").elevateZoom({
zoomType : "lens",
lensShape : "round",
borderSize : "2",
borderColour : "#e4007f",
lensSize : 240,
responsive: "true",
});
});
</script>
102 CSSアニメーションのツールチップを実装
こちらのサイトを参考に「？」アイコン(サイドバーの検索領域など)にマウスを合わせるとツールチップが表示されるようにした。下記の枠内にある「？」にマウスを合わせると動作します。
<div id="hint-search"> <span class="hint">? <span class="hint-content"> <span class="hint-text"> <span class="hint-inner">こんな感じにCSSアニメーションで動きます。</span> </span> </span> </span> </div>
.hint::after {
content: '';
position: absolute;
width: 100%;
height: 20px;
bottom: 100%;
left: 50%;
pointer-events: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.hint:hover::after {
pointer-events: auto;
}
.hint-content {
position: absolute;
z-index: 9999;
width: 240px;
height: 80px;
left: -230px;
bottom: -65px;
font-size: 11px;
text-align: left;
line-height: 1.4;
color: #fff;
background: transparent;
opacity: 0;
margin: 0 0 0 0;
padding-top: 14px; /*コンテンツ内のリンクに移動する時にツールチップが閉じない為の領域*/
cursor: default;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
}
.hint:hover .hint-content {
opacity: 1;
pointer-events: auto;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.hint-content span {
display: block;
}
.hint-text {
border-top: 2px solid #e4007f;
overflow: hidden;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
}
.hint:hover .hint-text {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.hint-inner {
background: rgba(0,0,0,0.7);
padding: 12px;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.hint:hover .hint-inner {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hint a {
text-decoration: underline;
color: #fff;
}
.hint a:hover {
position: relative;
top: 1px;
left:1px;
}
#hint-search {
text-align:right;
margin: 10px 0 0 0;
}
101 PageSpeed Insights
Google Developerのサイトの表示スピードを計測して改善策を示唆してくれるソフト「PageSpeed Insights」をテストしてみたが散々な結果だったのでこれらの結果がどこまで改善できるか分かるようにキャプチャ画像を貼っておく。
