サイト作成メモ #04
2015年3月～2017年3月まで運営したFC2ホームページ作成メモ
40 動画のGIFアニメ化
ハウツー動画の代替案としてmp4の動画を Photoshop CS6 でGIFアニメ(無限ループ)にしてみたが、作成方法も簡単でYouTubeのようにアップロードする必要もないので手軽だ。
- 「開く」(「ファイルの種類」→「すべてのファイル形式」を選択)から動画ファイルを選択して取り込む。
- タイムラインが表示されるのでカットやトリミングなどの作業を行う。
- テロップやフェードアウトも追加できるので必要に応じて追加する。
- 「Web用に保存」で設定画面を開き、GIF形式(ループ回数も設定可能)で出力する。
39 Googleカスタム検索4 複数設置
トップメニューにある検索フォームはJavaScriptが使えない環境では機能しないのでサイトマップ専用の検索フォームを配置しようとしたが同ページにGoogleロゴが表示されなかったりして失敗した。同ページに検索フォームを2つ設置することがいけないみたいだがダイナミックwebテンプレートが関係しているので片方を削除することも出来ずに考えることを一時停止にした。
36 カテゴリーメニューとトップメニューの分類に苦労する
トップメニューに関連サイトなどへのリンクを貼り、サイドメニューのカテゴリーには主にEDIUSの項目だけにすることにした。元々トップメニューにはEDIUS関連のメニューを配置していたがサイドバーにアコーディオンメニューを実装できたことで新たに面倒な作業も増えてしまった。このようなことわざがあったような…。
35 RSSフィーダ実装にメド？！
Expression Web 4でのRSSフィーダーのやり方が全く理解出来ないので調べていたらRSSを勝手に自動作成・更新してくれる無料Webサービスなるものを発見。これで何とかなりそうε- (´ー`*)ﾌｯ。
34 アマゾンアソシエイトに”box-shadow”を設定すると謎の点が浮き彫りになる
画像のみ、またはテキストタイプのアマゾンアソシエイトリンクを貼って、CSSでbox-shadowを掛けると1x1の丸いイメージが浮き出てきた。これについて調べたら次のようなことが記述が見つかった。
アソシエイト・プログラムでは、Amazonの広告の成果を効率的に図るためのインプレッションのデータを提供しています。Webサイトにこのリンクを掲載すると、ページがロードされるたびにwww.assoc-amazon.jpのサーバーに1x1ピクセルのイメージをリクエストします。当プログラムでは、このリクエストの数をインプレッションとしてカウントします。インプレッションデータはリンクタイプレポートで見ることができます。このデータにより、あなたのwebサイトに掲載されているアソシエイトリンクの効率を把握することが、より簡単になるでしょう。
対策として正しいのかどうか分からないがimgタグ内に下記のCSSを記述して消してみた。
style="border:none !important; margin:0px !important;"
33 ライセンスについて少し勉強する
SyntaxHighlighterのライセンスのことが気になりちょっと調べてみた。下記は「shThemeDefault.css」の冒頭部分の記述である。
/** * SyntaxHighlighter * http://alexgorbatchev.com/SyntaxHighlighter * * SyntaxHighlighter is donationware. If you are using it, please donate. * http://alexgorbatchev.com/SyntaxHighlighter/donate.html * * @version * 3.0.83 (July 02 2010) * * @copyright * Copyright (C) 2004-2010 Alex Gorbatchev. * * @license * Dual licensed under the MIT and GPL licenses. */
GPLとは以下のような感じ。
- 著作権表示を保持しなければならない＋無保証である
- 誰でも自由に複製・改変・頒布することが許可
- GPLライセンスのものを使用した場合、その制作物もGPLライセンスで配布しなければならない
MITとは以下のような感じ。
- 再配布時には著作権表示を残す
- 無保証である
GPLやMITやCCなど主要ライセンスの内容と意味のまとめ
32 「shThemeDefault.css」をイジる
「shThemeDefault.css」とはSyntaxHighlighterの外観をつかさどるデフォルトのCSSファイルである。ただ、数値の横にある縦ラインと？マークの背景色のグリーンが気に入らなかったのでgrayに変更した。行の色まで白になったが良い感じなのでこのままにしておこう。ただ、ライセンスがちょっと気になる…。
.syntaxhighlighter .gutter .line {
border-right: 3px solid gray !important; /* #6ce26c → gray */
}
.syntaxhighlighter .toolbar {
color: white !important;
background: gray !important; /* #6ce26c → gray */
border: none !important;
}
31 SyntaxHighlighterの空行について
一行の長いコードだと見にくいので上下の行に改行してみたがなったりならなかったするので上下に (非区切りスペース)を入れたら確実に改行されるのでこの方法でいく。
尚、&はコード内では&と記載する必要がある。