今回はページ内にTwitterのタイムラインを表示する仕方です。
まずTwitterのプロフィールの設定からウィジェットページを開き
新規作成からリストを選択します。
すると何種類かの表示形式を選べる画面が表示されます。
今回は下記のようなツィートの表示形式を選んでみました。
「Past a URL」の箇所にアカウントのページＵＲＬを入力します。
するとコードが吐き出されるので「copy code」の項目を選択するとクリップボードにコピーされます。
そのコードをページの表示したい箇所に貼りつけると完成です。
写真等の画像をさせる事ができる、
JQueryのfancyboxの使い方です。
下記サイトでファイルをダウンロードします。
http://fancybox.net/
ダウンロードして
解凍したフォルダ内の「fancybox」フォルダを読み込みたいサイトにコピーします。
今回は「common」の「js」フォルダに入れています。
ますヘッダー内に下記コードを記述してfancyboxを読み込みます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="common/js/fancybox/jquery.fancybox-1.3.4.css"/> <script type="text/javascript" src="common/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
次にスクリプトタグも記述します。
<script type="text/javascript">
$(document).ready(function() {
$(".group").fancybox({
cyclic: true
});
});
</script>
「.group」の箇所には任意のグループ名を付けてください。
「cyclic: true」の箇所はループ表示するかどうかを指定しています。
この場合はtrueなのでループ表示がONになっています。
そして下記のようにHTMLを組むとクリックすると拡大画像が表示されます。
<p><a class="group" rel="group1" href="img/pic01_l.jpg"><img src="img/pic01.jpg" alt=""></a></p> <p><a class="group" rel="group1" href="img/pic02_l.jpg"><img src="img/pic02.jpg" alt=""></a></p> <p><a class="group" rel="group1" href="img/pic03_l.jpg"><img src="img/pic03.jpg" alt=""></a></p> <p><a class="group" rel="group1" href="img/pic04_l.jpg"><img src="img/pic04.jpg" alt=""></a></p>
「rel」で任意の名前を付けた同一のグループ名を付ける事によって
拡大表示した時に同じグループ名内でループ表示されます。
ページにアクセス制限をかける場合.htacessでのbasic認証がありますが、
.htacessや.htpasswdファイルを用意したりと地味に設定が大変です。
wordpressの場合、プラグインを使うだけでbasic認証をかける事ができます。
設定の仕方は実に簡単
「WP BASIC Auth」で検索してインストール
あとはプラグインを有効にするだけです。
wordpressのログインIDとpassでbasic認証をかける事ができます。
メディアクエリの設定の仕方です。
スマホや等の表示域によってレイアウトが変わってしまう、または変えたい時に
ディスプレイサイズ毎にcssの指定を変える事ができます。
指定の仕方は下記です。
.test{
width:100%;
}
@media screen and (max-width: 768px){
.test{
width:50%;
}
}
通常.testに対してwidth:100%に設定しているのに対し
@media screen and (max-width: 768px)と記述した括弧内に
ディスプレイのサイズが768px以下になった場合だけwidth:50%になります。
主に使用する設定として
・Max Width
ディスプレイの最大幅。
このサイズより小さい場合に適用されます。
・Min Width
ディスプレイの最小幅で指定します。
このサイズより大きい場合に適用されます。
よく使われる数値については
1024px、768px、480px、320px
があるようです。
本日は私が何回もやり方を調べてしまっているCSSをまとめて記載します。
基本的なCSSですが、コピペで対応できるように備忘録しておくことによって、コーディング速度の向上を図ります。
Eric Mayer様考案CSS
定期的に、すぐ使えるCSSまとめを上げていこうと思います。
こんな感じでメニューが出ます。(templeのデモです)
↓
1.インターネットより「SlickNav」をダウンロードします。
2.画像の二つを使用したいjsフォルダとcssフォルダにそれぞれ移動します。
3.表示させたいHTMLにスクリプトを読み込みます。
4.レスポンジブ化を行いたいソースのリストに「id=”menu”」を書きます。
5.CSSに下記を記載します。
以上で簡単に、レスポンシブ時のメニュー表示ができるのでレスポンシブコーディングをする時は設定しましょう。
今回はbasic認証のかけ方です。
特定の誰かに見せたい場合や、
サイト作成中等の未完成のサイトを仮アップする場合等
誰でもアクセスできないように認証を設定します。
まず.htpasswdというファイルを作成し、
下記サイト等で.htpasswd用のパスワード設定コードを作成してください。
http://www.luft.co.jp/cgi/htpasswd.php
.htpasswdに貼り付けます。
そして.htaccess に下記を記述して.htpasswdと共にサーバーにアップします。
AuthUserfile /xxxx/.htpasswd AuthGroupfile /dev/null AuthName "Please enter your ID and password" AuthType Basic require valid-user
AuthUserfileには.passwdがあるパスを指定しています。
この状態でアクセスすると認証が必要な状態にする事ができます。
1.インターネットより、audio.jsをダウンロードします。
2.画像の二つを使用したいjsフォルダに移動します。
3.表示させたいHTMLにjsを読み込みます。
4.次にスクリプトを読み込みます。
5.最後に以下コードを埋め込めば、完了です。
上のような画像が出現していれば完了です。
前回の音楽挿入と違い、見た目の色や大きさを変更可能なので音楽挿入時に拘った設定をしたい場合は「audio.js」を使いましょう。
1.プラグインより「TablePress」をインストールします。
2.サイドにある「TablePress」の新しいテーブルをクリックします。
3.新しく追加を押して、テーブル情報にテーブルの名前を入れます。
4.テーブルの内容の中にそれぞれ必要な語句を入れて、「ショートコード」をコピーします。
5.投稿の中にショートコードを埋め込みます。
6.埋め込んだ位置にテーブルが表示されていれば完了です。
こんな感じで表示されます。
| りんご | りんご | りんご | りんご | りんご |
|---|---|---|---|---|
| みかん | みかん | みかん | みかん | みかん |
| もも | もも | もも | もも | もも |
| めろん | めろん | めろん | めろん | めろん |
| ぶどう | ぶどう | ぶどう | ぶどう | ぶどう |
簡単に高性能のテーブルが組めますので、HTMLの知識がなくても表を作れます。
設定をさらにいじればデザインなども変更できるので「TablePress」プラグインを有効活用しましょう。
今回は.htaccessを使用したリダイレクト設定です。
前回記事の
ディレクトリ変更の仕方 等の理由でＵＲＬが変更になった場合
変更前のＵＲＬにアクセスすると下記のように
URLが変わってしまっているので当然アクセスできません。
なので変更後のＵＲＬに転送しなくてはなりません。
そこで.htaccessファイルにリダイレクト設定を書き足します。
<Files ~ "^.(htaccess|htpasswd)$"> deny from all </Files> Redirect permanent /wp http://www.xxx.co.jp/blog/ order deny,allow
追記箇所は下記です。
Redirect permanent /wp http://www.xxx.co.jp/blog/
変更前のURLは「Rootからのパス」、
変更後のURLは「絶対パス」で指定しています。
もし.htaccessファイルが無い場合、
下記のサイト等でリダイレクト用のファイルを作成することができるので利用するのも良いと思います。
http://www.itjpn.co.jp/mkhtacc/