display:inline-blockでできる隙間を消す方法

■floatの代わりに使う機会が増えてきたdisplay:inline-block

・display:inline-blockは
1.block要素のようにwidthやheight、paddingやmarginの設定ができる。
2.inline要素のように横並びにできる

■display:inline-blockできれいに横並びにならないとき

例えば
display:inline-block;
height:400px;
width:50%;
border:1px solid #000;
box-sizing:border-box;

の要素を2つ並べてもこのままでは段落ちしてしまいます。

■横並びにするには
1.htmlを修正する

上記のようになっていると段落ちしてしまいます。
これを、

このようにくっつけます。
display:inline-blockにすると改行部分の情報が空白になるようです。

2.cssを修正する

親要素のulにletter-spacingを-で設定します。

※このままではliの表示が崩れるので、必ずletter-spacing:normalを追加する事が大切です。

■参考display:inline-block;でできた隙間をなくす4つの方法 | webledge

WPプラグイン:Single Post Template

固定ページにはある、テンプレート設定機能ですが、投稿にも同様の機能が必要になりました。
そんなときに役立ったプラグインがこれ。

「Single Post Template」
https://ja.wordpress.org/plugins/single-post-template/

使用方法:

1.プラグインのインストール&有効化

2.single.php等を複製して、任意のファイル名に変更してサーバーにアップ 例)single-2.php

3.作成したsingle-2.phpの先頭に下記を記述

「任意の名称」の部分は日本語でも大丈夫です。後で判別しやすい名前に設定しましょう。

後は、投稿記事の作成ページで選択して更新するだけ!

投稿に個別のデザインを当てたいときは、是非使ってみてください。

301リダイレクト

サイトのディレクトリやHTMLの名前変更を行った後は、301リダイレクトも忘れずに設定しておきましょう。

下記のWEBツールが便利です。
http://www.htaccesseditor.com/

htaccessファイルをサーバーにアップロード下後には、動作チェックもしてあげましょう。

http://ohotuku.jp/redirect_checker/

ちゃんと設定しておけば、旧URLにアクセスすると404なんて事は無くなります。

さらに、301リダイレクトを設定しておけば、検索エンジンからの評価を引き継ぐことが可能です。

302リダイレクトもありますが、下記のような違いがあります。

301:恒久的な転送
302:一時的な転送

参考:http://viral-community.com/seo/301-redirect-2992/

JS:telリンクをスマホの時だけ有効化

レスポンシブサイトで、スマホ表示のときだけtelリンクを有効化したいとき、cssでやるのもいいですがソースが汚れるだけなので、おとなしくscriptで実現しましょう。

あ、当然jQueryの本体は読み込んでいるものとして書きますので、あしからず。

で、こんな感じでソースを書きますね。

あとはお好みでcssを書いちゃってください。以上。

twitter,facebook,youtube埋め込み

■twitter,facebook,youtube埋め込み方法のリンクまとめ

【1】twitter
・埋め込みタイムラインを使用する
タイムラインを埋め込む方法 | Twitterヘルプセンター

【2】facebook
・下記ページでURLをいれ、タグを取得し貼り付け
ページプラグイン – ソーシャルプラグイン|facebook for developers

【3】YouTube
・埋め込む動画を開き、動画の下にある「共有」から「埋め込みコード」を取得
・タグを貼り付け
動画と再生リストを埋め込む – YouTube ヘルプ

box-sizing プロパティ

■widthなどを%で指定する際に便利なプロパティです。

・box-sizing:border-box;
padding と border の大きさを要素の大きさ含めることができる

例えば、
width:50%のボックスを二つ横に並べる際、ボーダーの大きさなどがボックスの大きさ(width:50%内)に含まれるので、
レスポンシブデザインなどで活用できる。

■参考
box-sizing-CSS3リファレンス

WP:画像パスを短縮

固定ページなどに、テーマ内の「images」フォルダにある画像を表示させたい場合に、
パスの指定が無駄に長くなってしまうので、対処方法を調べました。

書かれていることは単純で、「images/」を「get_bloginfo(‘template_directory’)」に置き換えるよ!と言う事。

ですので、「images/」の部分は、それぞれの環境に合わせて変えてください。

スマホページ離脱率に関する注意点

■スマホページで離脱率が高い →問題点を考える前に注意する事

・スマホページで電話ボタン(自動で通話になるボタン)を設定している場合
→タップすると離脱するので、CVになるものも離脱にカウントされている
→CV数が多く、離脱率が高くなる場合もある。

formタグ inputタグ【html】

■formタグ
・action属性とmethod属性を指定する

・action属性
→フォームのデータの送信先(※URI)を指定する
※データを送るサーバーのCGIプログラムのURI

・method属性
→データの転送方法を指定する
→post と getの2種類

■inputタグ

・属性
type=”text”    入力ボックス
type=”password” 入力してテキストが●で表示されるボックス
type=”checkbox” チェックボックス
type=”radio”  ラジオボタン ※複数のラジオボタンを1つのグループにするにはおなじname属性をつける
type=”submit”  送信ボタン

など

参考:
-HTMLタグリファレンス