本日は私が何回もやり方を調べてしまっている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/
「PubSubHubbub」を使用すれば、自分のWEBサイトを即座にインデックスさせることができます。
インデックスさせればSEO対策になる効果のほかにも、自分のwebサイトが真似された場合の悪い評価を受けにくくなります。
1.プラグインより「PubSubHubbub」をインストールします。
プラグインをインストールするだけで、簡単なのでSEO対策の為にインデックスさせましょう！
今回はwordpressのディレクトリ変更について
wordpressでサイトを作るとhttp://www.xxx.co.jp/wp/
メニューの設定から一般を選択
下記の「WordPress アドレス (URL)」「WordPress アドレス (URL)」
例としてurlを「http://www.xxx.co.jp/ｗｐ/」→「http://www.xxx.co.jp/blog/」に変更します。
これでWordpress側の設定は完了ですが。
この状態でurlにアクセスすると表示することができません。
これはサーバーに上げているディレクトリ名も「wp」→「blog」に変更していない為に
リンクが切れてしまっているので忘れず変更しておきましょう。
今回はHTMLにwordpressのphpを読み込ませるコードの記述です。
ソース内の１行目に下記を入力します。
<?php require './wp-blog-header.php'; ?>
WordPressインストールフォルダにある「wp-blog-header.php」までの相対パスを記述しすると。
静的ページでWordPressの関数を実行できるようになります。
1.「WordPress Popular Posts」をインストールします。
2.ウィジェットを開き、「WordPress Popular Posts」をサイドバーにドラッグして移動します。
3.「WordPress Popular Posts」の中のtitleに文字を入力します。（今回は人気記事と記載します。）
4.ホームページのサイドバーに反映されていれば完了です。
人気記事リンクがあれば、ページ巡回率が増えるので設定していきましょう。