サイト作成メモ #03
2015年3月～2017年3月まで運営したFC2ホームページ作成メモ
30 SyntaxHighlighterのコード表示に余白が設定できない？！
CSSのスキルの問題だとは思うが、<pre></pre>(ブロック要素)にmarginやpaddingを設定しても余白やマージンが設定されない。詳しく原因を追究する時間もないので<div></div>要素で囲んで強制的に解決した。
29 SyntaxHighlighter設置
HTML、CSS、jQueryなどコードを見やすくするためのJavaScriptのプラグイン SyntaxHighlighter(点線内の領域)を設置してみた。Versionの違いでかなりインターフェイスが異なるがVersion2.1.382にした。最初は正常に表示されなかったが下記のコードを定義ファイルの下の行に追加したらうまく表示されるようになった。
その後、長いコードが領域からはみ出したりするのでversion3.0.83に変更する。v3ではスクロールバー表示、コード上でダブルクリックするとコードがすべて選択される。ただ一度ダブルクリックして選択すると、一旦領域外をクリックしないと再びダブルクリックでの選択はできないみたいだ。
SyntaxHighlighter
<script type="text/javascript"< SyntaxHighlighter.all(); </script>
28 Googleカスタム検索3 設置場所の移動
検索フォームをトップバーに移動した。またテキストエリアに表示される「Googleカスタム検索」のロゴが表示される(※消すことは利用規約に反するらしい)のがダサいのでjQueyで虫眼鏡のアイコンにmouseoverした時にフェードインし、mouseleaveしたらフェードアウトするようにした。尚、デザインの都合上検索ボタンを削除したがenterボタンで検索できるので問題ないだろう…。
27 画像はCSSにリンクを張る
アイコンなどの複数ある画像はHTMLにリンクを張ると修正する時に面倒なのでCSSにリンクを張って表示するようにする。他のサイトで右クリックから保存できない画像があるのはこのようなリンクが張られているためのようだ。
25 カテゴリー領域をアコーディオン化
アコーディオン(右にあるカテゴリー領域の動き)設置方法について分かりやすい記事があったので真似して書いてみたら動いたのでCSSで装飾して実装完了～。
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery24 JavaScriptの外部スクリプト化
Webサイトの高速化のためにJavaScriptやCSSは外部ファイル化したほうが良いみたいなのでやってみた。以下は備忘録としての記録。
<script>(コード)</script> スクリプトタグを含まないコードのみをメモ帳にコピーして拡張子を***.jsで保存 <head></head>リンクを貼る。
22 もくじに戻るボタンを実装
ページ内リンクをヌルッと移動するコードを見つけたので実装する。
KYASPER WEB DESIGN
<script>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 750; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
21 ファビコンを作成
ファビコン(ブラウザのタブに表示されるアイコン)をサイトカラーを利用して作成。使用フォント Lithos Pro。作成にはアイコン ウィザード(IconWiz.exe)を利用。
アイコン ウィザード(インストーラーなし)1.6.1