カテゴリー: コーディング

Google Shortener で短縮URL作成

admin コメントをする

■長いURLを短く変換する短縮URL
・Google Shortenerでは
http://4koma-web.com/coding/
↑を変換すると↓のようになります。
https://goo.gl/sVb2GL

リンク先がわからなくなるので、長すぎるもの以外は使わない方がよいと思います。

■Googleアカウントにログイン
ログインしなくても使えますが、いちいち認証が必要なので、数が多いと面倒くさいです。
ログインすれば、認証がなくなります。

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

admin コメントをする

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

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

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

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

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

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

<ul>
  <li>幅50％</li>
  <li>幅50％</li>
</ul>

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

<ul>
  <li>幅50％</li><li>幅50％</li>
</ul>

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

2.cssを修正する

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

ul {
  letter-spacing: -0.5em;
}

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

li{
  /* ↓追加します */
  letter-spacing: normal; 
}

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

WPプラグイン：Single Post Template

admin コメントをする

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

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

使用方法：

１．プラグインのインストール＆有効化

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

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

<?php
/*
Single Post Template: 任意の名称
*/
?>

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

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

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

301リダイレクト

admin コメントをする

サイトのディレクトリや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リンクをスマホの時だけ有効化

admin コメントをする

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

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

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        $('.tel-link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});

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

<p>
お問い合わせ：<span class="tel-link">00-0000-0000</span>
</p>

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

twitter,facebook,youtube埋め込み

admin コメントをする

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

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

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

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

box-sizing プロパティ

admin コメントをする

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

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

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

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

WP:画像パスを短縮

admin コメントをする

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

function imagepassshort($arg) {
$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);
return $content;
}
add_action('the_content', 'imagepassshort');

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

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