第四十八回「何回も調べてしまった覚えてしまいたいCSSまとめ~その一~」

本日は私が何回もやり方を調べてしまっているCSSをまとめて記載します。
基本的なCSSですが、コピペで対応できるように備忘録しておくことによって、コーディング速度の向上を図ります。

■hoverしたら透過してbackgroundを透過させる。

■float落ちを修正、必殺clearfix

■height指定の中で下に寄せるposition

■行間を開けるline-height

■リセットcss

Eric Mayer様考案CSS

CSS Tools: Reset CSS

★完成★

定期的に、すぐ使えるCSSまとめを上げていこうと思います。

第四十七回「SlickNavを使って、Gnaviをレスポンシブ化する方法」

こんな感じでメニューが出ます。(templeのデモです)

bandicam 2016-06-29 21-39-55-634

                   ↓
bandicam 2016-06-29 21-39-59-944

■「SlickNav」の使い方

1.インターネットより「SlickNav」をダウンロードします。
bandicam 2016-06-29 21-07-23-306

2.画像の二つを使用したいjsフォルダとcssフォルダにそれぞれ移動します。
bandicam 2016-06-29 21-14-19-079

3.表示させたいHTMLにスクリプトを読み込みます。

4.レスポンジブ化を行いたいソースのリストに「id=”menu”」を書きます。

5.CSSに下記を記載します。

★完成★

以上で簡単に、レスポンシブ時のメニュー表示ができるのでレスポンシブコーディングをする時は設定しましょう。

★参考サイト★

jQuery レスポンシブメニュープラグイン SlickNav の使い方

.htaccess でのbasic認証のかけ方

今回はbasic認証のかけ方です。

特定の誰かに見せたい場合や、
サイト作成中等の未完成のサイトを仮アップする場合等
誰でもアクセスできないように認証を設定します。

まず.htpasswdというファイルを作成し、
下記サイト等で.htpasswd用のパスワード設定コードを作成してください。
http://www.luft.co.jp/cgi/htpasswd.php
.htpasswdに貼り付けます。

そして.htaccess に下記を記述して.htpasswdと共にサーバーにアップします。

AuthUserfileには.passwdがあるパスを指定しています。

この状態でアクセスすると認証が必要な状態にする事ができます。
pass1

第四十六回「audio.jsを使って、ホームページに音楽を流す」

■「audio.js」の使い方

1.インターネットより、audio.jsをダウンロードします。
bandicam 2016-06-28 18-39-36-037

2.画像の二つを使用したいjsフォルダに移動します。
bandicam 2016-06-28 18-41-44-722

3.表示させたいHTMLにjsを読み込みます。

4.次にスクリプトを読み込みます。

5.最後に以下コードを埋め込めば、完了です。

★完成★

bandicam 2016-06-28 18-40-58-936

上のような画像が出現していれば完了です。
前回の音楽挿入と違い、見た目の色や大きさを変更可能なので音楽挿入時に拘った設定をしたい場合は「audio.js」を使いましょう。

第四十五回「TablePressプラグインで簡単な表を作る」

■「TablePress」プラグインの使い方

1.プラグインより「TablePress」をインストールします。
bandicam 2016-06-27 22-09-26-048

2.サイドにある「TablePress」の新しいテーブルをクリックします。
bandicam 2016-06-27 22-11-14-971

3.新しく追加を押して、テーブル情報にテーブルの名前を入れます。
bandicam 2016-06-27 22-11-48-525

4.テーブルの内容の中にそれぞれ必要な語句を入れて、「ショートコード」をコピーします。
bandicam 2016-06-27 22-13-46-583

5.投稿の中にショートコードを埋め込みます。
bandicam 2016-06-27 22-15-40-147

6.埋め込んだ位置にテーブルが表示されていれば完了です。

★完成★

こんな感じで表示されます。

りんごりんごりんごりんごりんご
みかんみかんみかんみかんみかん
もももももももももも
めろんめろんめろんめろんめろん
ぶどうぶどうぶどうぶどうぶどう

簡単に高性能のテーブルが組めますので、HTMLの知識がなくても表を作れます。
設定をさらにいじればデザインなども変更できるので「TablePress」プラグインを有効活用しましょう。

.htaccessを使用したリダイレクト設定

今回は.htaccessを使用したリダイレクト設定です。

前回記事の
ディレクトリ変更の仕方 等の理由でURLが変更になった場合
変更前のURLにアクセスすると下記のように
htURL.lnk
URLが変わってしまっているので当然アクセスできません。

なので変更後のURLに転送しなくてはなりません。
そこで.htaccessファイルにリダイレクト設定を書き足します。

追記箇所は下記です。

変更前のURLは「Rootからのパス」、
変更後のURLは「絶対パス」で指定しています。

もし.htaccessファイルが無い場合、
下記のサイト等でリダイレクト用のファイルを作成することができるので利用するのも良いと思います。
http://www.itjpn.co.jp/mkhtacc/

第四十四回「PubSubHubbubプラグインで即座にWordPressサイトをインデックスさせる」

「PubSubHubbub」を使用すれば、自分のWEBサイトを即座にインデックスさせることができます。
インデックスさせればSEO対策になる効果のほかにも、自分のwebサイトが真似された場合の悪い評価を受けにくくなります。

■「PubSubHubbub」プラグインの使い方

1.プラグインより「PubSubHubbub」をインストールします。
bandicam 2016-06-24 22-21-02-389

★完成★

プラグインをインストールするだけで、簡単なのでSEO対策の為にインデックスさせましょう!

wordpressのディレクトリ変更の仕方

今回はwordpressのディレクトリ変更について

wordpressでサイトを作るとhttp://www.xxx.co.jp/wp/

メニューの設定から一般を選択

wpurl1
下記の「WordPress アドレス (URL)」「WordPress アドレス (URL)」
wpurl2

例としてurlを「http://www.xxx.co.jp/wp/」→「http://www.xxx.co.jp/blog/」に変更します。

wpurl3

これでWordpress側の設定は完了ですが。

この状態でurlにアクセスすると表示することができません。

これはサーバーに上げているディレクトリ名も「wp」→「blog」に変更していない為に
リンクが切れてしまっているので忘れず変更しておきましょう。

HTMLにwordpressのphpを読み込ませる。

今回はHTMLにwordpressのphpを読み込ませるコードの記述です。

ソース内の1行目に下記を入力します。

WordPressインストールフォルダにある「wp-blog-header.php」までの相対パスを記述しすると。
静的ページでWordPressの関数を実行できるようになります。

第四十三回「WordPress Popular Posts プラグインで人気記事をまとめよう」

■「WordPress Popular Posts」の使い方

1.「WordPress Popular Posts」をインストールします。
1

2.ウィジェットを開き、「WordPress Popular Posts」をサイドバーにドラッグして移動します。
3

3.「WordPress Popular Posts」の中のtitleに文字を入力します。(今回は人気記事と記載します。)
4

4.ホームページのサイドバーに反映されていれば完了です。
5

★完成★

人気記事リンクがあれば、ページ巡回率が増えるので設定していきましょう。