jQueryなどサイト構築の上で毎回利用するようなライブラリについては、サーバにファイルをアップロードするよりもCDNを利用したほうが使い勝手も良く、サーバへの負荷を減らせるためパフォーマンス向上にも有効です。
主要なCDNとしては、「Google Hosted Library」「Microsoft Ajax Content Delivery Network」「jsDelivr」「cdnjs.com」があります。
jQueryの最新版をそれぞれ読み込む場合、次のようになります。
|
|
<!-- Google Hosted Library --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- Microsoft Ajax Content Delivery Network --> <script src="ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <!-- jsDelivr --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- cdnjs.com --> <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script> |
複数のJavaScriptライブラリを読み込みたいときには1行ずつ追加しても良いのですが、jsDelivrなら単一のファイルとして統合して読み込むこともできます。
jQueryとjQueryのプラグインを同時に読みこむ場合には、次のようになります。
|
|
<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@2.1.4(jquery.min.js),jquery.cookie@1.4.1(jquery.cookie.min.js)"></script> |
Drupalでサイトを構築する際に、SEO対策として導入すると効果のあるモジュールを紹介します。
- Pathauto
- コアモジュールの「Path」でノードごとにURLエイリアスを付けることができますが、「Pathauto」ではURLエイリアスの命名をパターン化して、自動で付けることができます。
- Global Redirect
- 各ノードにURLエイリアスを付けた際でも、もともとの「/node/1」のURLでもアクセスできてしまいますが、このモジュールでは強制的にURLエイリアスに転送してくれます。
- Page title
- コンテンツのタイトルとは別に、head内のタイトルを設定することができます。コンテンツタイプごとにパターンを設定することもできます。
- Metatag
- 各ページのDescriptionなどのMetaタグを詳細に設定することができます。SNS向けのOGPにも対応しています。
- Menu attributes
- サイト内のメニュー項目に対して、Nameなどの属性を追加することができます。ID、Classも付加できますので、CSSでデザインする場合にも有効です。
- XML sitemap
- 検索エンジンのクローラー向けに、XMLサイトマップを自動生成してくれます。コンテンツタイプや、個別ノードごとに含めるかどうかの設定もできます。
Drupal 7で「page.tpl.php」などのテンプレート内でリダイレクト処理のメモです。
カレントユーザーがログインしていない場合には、次のような記述でログインページにリダイレクトできます。
|
|
<?php if (!$logged_in) { drupal_goto('user/login', array('query' => array('destination' => 'home'))); } ?> |
パラメータの「destination」にURLを入れることで、ログイン後に該当ページへ移動することもできます。
CSSを使ってボタンのロールオーバーで画像を差し替えなどの処理の際に、画像が読み込まれていない状態では一瞬ちらつきが発生することがあります。
ロールオーバー用の画像をあらかじめ読み込むために、jQueryを使って画像をプリロードするためのメモです。
|
|
//プリロードする画像を配列で渡します priloadImages(["image-01.jpg", "image-02.jpg", "image-03.jpg"]); function preloadImages(images) { $.each(images, function(index, value) { $("<img>").attr("src", value); }); } |
CKEditorの編集画面で画像を挿入すると、デフォルトでは画像のサイズをStyle属性にて指定されます。
|
|
<img src="image/jpg" style="width:100px; height:100px;"> |
通常の使用では特に影響はありませんが、レスポンシブデザインの場合、画面サイズに合わせて画像が縮小表示するように、CSSで次のように記述することがあります。
|
|
img { max-width: 100%; height: auto; } |
ですがStyle属性でサイズを指定してある場合そちらの方が優先されますので、CSSの設定では期待通りに画像を表示することができません。
CKEditorで編集の際にStyle属性ではなく、従来のwidth、height属性で画像サイズを指定するには、CKEditorの「Enhanced Image」というプラグインをインストールすることで実現することができます。
このプラグインを有効にするためには、次の依存するプラグインも併せてインストールする必要があります。
「Dialog」「Clipboard」については標準で入っていますので、残りの2つを「ckeditor/plugins」ディレクトリに入れます。
その上で設定ファイル「ckeditor/config.js」内に次の一行を追加します。
|
|
config.extraPlugins = 'widget,lineutils,image2'; |
DrupalでCKEditorを利用している場合、環境設定のCKEditorの設定にある「高度なオプション」に上記を記述することもできます。