【WordPress】ページや権限によってアクセス制限をかける | バシャログ。
みなさんこんにちは、yamashitaです。 今回はWordPressでログインの有無やユーザー権限によってアクセスできるページを設定する方法を紹介します。 これにより、クローズドな情報などを掲載することができます。 パスワード保護もありますが、複数ページを同時にアクセス制限する場合などに使えます。 ログインしていない場合はどのページも見られない // アクセスされてるURLを取得 $url = $_SERVER['REQUEST_URI']; $parseUrlArray = parse_url($url); // ログインページのURLを取得 $parseLoginUrlArray = parse_url(wp_login_url()); // ログインページの一致していない且つ、ログインしていない if ((strpos($parseUrlArray['path'], $parseL
【WordPress】多言語対応プラグインPolylangでhome_url()を使うときに気を付けること | バシャログ。
みなさんこんにちは、yamashitaです。 6月からクーラーをフル稼働していて8月にはどうなっていることやら心配です。 さて今回はPolylangプラグインを設定している状態でhome_url()を使う際の注意点を一つ紹介したいと思います。 Polylangとは 設定することで多言語ページのURLを設定してくれるプラグインで、各投稿・ページにも対応するページが存在するか一覧で確認できるようになります。 今のところ自分は使用していませんが、有料版には自動翻訳もあるようです。 home_url()の動作 テンプレート上で使用する場合はほとんど通常時と同じ感覚で使って大丈夫です。 出力内容は以下の通りです。 デフォルト言語ページの場合、http://example.co.jp/の様にトップのURLがそのまま出力されます。 他の言語ページの場合、http://example.co.jp/enの様
【WordPress】類似したURLからリダイレクトで全く別ページにアクセスされるのを止める | バシャログ。
皆さんご機嫌いかがでしょうか。yamashitaです。 本日はWordPressのお節介機能を止める方法を紹介します。 URL自動補完リダイレクトについて 実際の動作例 以下のような親子構成の固定ページがあるとします。（いい例が考えつかずすみません） /jp /en /jp/aaaa /en/bbbb この時/en/bbbbにアクセスしようと思い、間違えて/jp/bbbbとURLを入力すると・・・なんと/en/bbbbにアクセスできるとても便利な機能なんです。 他にも/jp/jpと入力した場合、ビックリなことに階層を飛び越えて/jpにアクセスさせてくれます。とても便利と見せかけて存在しないページへのアクセスを勝手に存在してるページに飛ばしちゃいます。 このような例のほかにも、/jp/aaと入力すると/jp/aaaaにアクセスします。 どうやら前方一致でリダイレクトしてるようでパスの最後の階
【WordPress】is_xxxx()という関数は用法用量を守って使いましょう。 | バシャログ。
皆様ご無沙汰しております。yamashitaです。 今回はWordPressの関数を使うにあたって、気を付ける点を書こうと思います。 開発時に使ってみたら全然動かなくてパニックになったので調べてみました。 主な関数はis_page(),is_single(),is_archive(),is_attachement()など、表示するページの種類を判定する関数です。 おそらくこのファイルにある関数が主な対象です。 https://github.com/WordPress/WordPress/blob/master/wp-includes/query.php どういう風に失敗したのか。 カスタム投稿を含めた特定の投稿やアーカイブ、一部のユーザーからのアクセスが出来ないようにしたかったのですが、 functions.phpに以下のような記述をしました。 if(is_post_type_archiv
F12必押！コンソールでおもしろ表現をしているサイトのご紹介！ | バシャログ。
ウェブ制作をするうえで欠かせない強力な味方、開発ツール。F12キーを押すだけで駆けつけてくれる健気なやつです。その中で、JSやCSSのエラーなどを記録してくれるウェブコンソールという画面があります。とある日、株式会社ホムンクルスというすごいサイトを作る会社のウェブサイトの構造を見ていたとき、コンソールを見てみると求人募集しているじゃありませんか！これはネタの予感。というわけで色々なサイトのコンソールネタを探してみました。みなさまもレッツF12！ 求人募集系 コンソール見る奴らはウェブ関係者に違いない！勧誘だ！ということで求人情報載せてるサイトさんは結構多かったです。 株式会社ホムンクルス はじめに紹介したホムンクルスさんはシンプルに勧誘メッセージとURL。 「そこの方！」って言われるとドキッとしちゃいます。コンソールをのぞく時、コンソールもまたこちらをのぞいているのだ。 Pinterest
PhotoshopとIllustratorで角丸を作成、修正する方法を探ってみた。 | バシャログ。
こんにちは。mackyです。 今日は、タイトルにある2つのデザインツールを行ったり来たりしながら角丸という一見シンプルなテーマで掘り下げてみようと思います。 けっこう「へー」って思うところもあったのでまとめておきたいと思います。 Photoshop（環境：CS5.1） プラグインをいれてしまう。 Photoshopで角丸のオブジェクトを描くとき、単純に左のツールバーから角丸長方形ツールを選択しタブでWとHを入力、丸みも設定すれば完成。ですが、Photoshopはここからがちょっと力不足です。（※CCでは属性パネルから簡単に角丸の編集が可能になりました。参考：http://www.adobe.com/jp/jos/photoshopmagazine/howto/photoshop/rounded-rectangles.html） そんなときに使えるのが、「Rounded Rectangle
つかえる。チェックツールまとめ | バシャログ。
こんにちは。mackyです。 今日は、安心の品質をお届けするために使える賢いちょっとしたツールたちを紹介して、私はGW気分に突入しようと思います。GWは実はまだ予定がない…家に引きこもってサイトでも作ってみようかな…ちくしょー！というそこの君。是非、使ってみてほしい。 ちなみに、今日ご紹介するツールは主にAlt、Title、META情報、リンクに関するもので、Chromeの拡張機能になります。 Popup Image Alt Attribute 一番シンプルなチェックツール。チェックしたい画像にカーソルを載せるだけで、フワりとAltが表示されます。はい。そんなに、画像数が多くない場合はこれでいいかもしれません。ただ、超急いでるときはそのフワり感にイラっとしてしまうかも。 Alt & Meta viewer フワらなくていいからスパッと出してくれ。という方や、画像数の多いECサイトなどにはこ
「なんとなく」を解消。z-indexを掘り下げてみた。 | バシャログ。
こんにちは。mackyです。 春なので、足元をスニーカーに変えて駅までダッシュしてみたら、ブーツでのダッシュより2分ほど早く駅に着けるようになりました。が、その分5分ほど長く寝てしまうようになったせいか、結局ギリギリです。そして汗だくです。夏にむけて、このダイエット法でいこうかと思います。 さて今日は、なにげにあやふやに理解していると痛い目にあう、z-indexについてまとめてみました。 スタックコンテキストとスタックレベル まず、重なりを自由に操るためには、スタックコンテキストとスタックレベルを理解しておく必要があります。 z-indexの意味やpositionとの併用のしかたをどれだけ知っていても、ここを理解していなければあまり意味がありません。 しかし、私は何度か説明を読みましたが、最初はほぼ意味不明。 とりあえず説明してみます。 スタックコンテキストとは ざっくり言うと、同じスタッ
width:auto;とwidth:100%;の違い＋中央寄せについて。 | バシャログ。
どうも。mackyです。 花粉症とは無縁の私は、早くお花見シーズンにならないかなー…なんて、今はそれだけを楽しみに生きています。のみたい！食べたい！食べたい！ さて今日は、その大切さ＆重要さに近すぎて気づかない、みたいな存在の「width」についてちょっと書こうと思います。 これからレスポンシブどんどん勉強していきたいという方は是非。 width:100%とwidth:autoの違い 例えばPC版のコーディングから行うとして、widthをpx指定したときなどはブレイクポイントを設けてSP版用に幅を上書きする。この流れはよくあります。共に、親要素の幅に合わせるとういう意味では同じですが、paddingやborderを指定する場合にちょっと違ってきます。 width:auto;の場合 Media Queriesをつかってwidthを上書きする場合はこちらが便利です。 上の図を使って説明すると.
nth-childやlast-childをIE8でどうしても使いたいときの代替手段。 | バシャログ。
ご無沙汰してます。mackyです。 最近、目覚めると14:00で、やってしまった…。今日はどんな言い訳をしようか…。と朝から真剣に考える「夢」をよく見ます。 「落し物を届けたのは先週使ったしな～！」と毎回言うのですが、なかなか言い訳の嘘くささもリアルで面白いです。 さて今日は、タイトルにもありますようにIE8で、nth-childやlast-childと同等の指定ができる方法について書こうと思います。 そもそも、こんなことが必要にならないようにコーディングを行うよ。と言われればそれまでなのですが、 自分の未熟さはわかっている。くそ！悔しい！でもてっとり早く何とかしたいの。という仲間たち、つづきを読んでやってください。 HTML <h3>寝坊したときの言い訳リスト</h3> <ul> <li>朝から腹痛</li> <li>道に人が倒れていた</li> <li>愛犬が逝く</li> <li>（
CSS で「吹き出し」をつくってみる | バシャログ。
こんにちは。mackyです！ 最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。 よかったら読んでみてください。 では、早速。 HTML HTMLはこの一行。 <div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div> CSS：スタンダードな角丸長方形 使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。 .baloon { width: 400px; padding: 10px; background: #FF3399; position: relative; color: #fff; border-radius: 5px; text-align: center; } .baloon:before { content: ""; position: absolu
フォントサイズをremで指定する。（emとの比較） | バシャログ。
こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継承をおさらい。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位です。 em(エム) 文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。 まずはpxとemをおさらい pxとemについてのわかりやすい説明はこ
displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。
こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント（480px）を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</
なんだかちょっと楽しい...。フォームの新しい入力属性と疑似クラス | バシャログ。
こんにちは。mackyです。いやー、夏ですね。夏が終わったらもう年末ですね。私は毎年この時期から猛スピードで一年が終わります。早く走らないと。。詳しくはコチラをご覧ください。 さて、今日は、HTML5で新しく追加された入力属性にちょっと「なんか楽しいかも...」と感じたので、この気持ちが冷めないうちにまとめることにしました。 autofocus オートフォーカス。 ページを開いたときにフォーカスされるようになる。ちなみに、emailはHTML5で追加されたtype属性の値で、メールアドレス専用のキーボードを表示させることが出来る。 <form> <label>お名前: <input type="text" name="name" class="text" autofocus/></label> </form> お名前: autocomplete オートコンプリート。 入力候補はdatali
【ツール】CSSのフォントサイズの相対指定に活躍！「PXtoEM.com」 | バシャログ。
こんにちは Latin です。いや～、ワールドカップのブラジル×ドイツ戦、凄い試合でしたね！（見てないけど） 決勝は欧州勢になりそうな予感。 さて今回は、フォントサイズの相対指定時に便利なツール「PXtoEM.com」をご紹介します。 フォントサイズの一覧や任意のサイズを出力してくれるツール「PXtoEM.com」 このツールの特長は大きく3つあります。 基準サイズからの相対サイズを一覧で表示 任意のサイズの相対サイズを出力 「px」と「em」の相互変換が可能 といった感じ。 例えば、ベースのフォントサイズが「14px」で、「20px」を指定したかった場合に、「1.429em だね！」って感じで一々、計算しなくて済むので便利です。 サイトのフォントサイズに「rem」を採用している場合にも同じで、ルートのフォントサイズを基準値とし、「em」の倍率をそのまま「rem」として使ってあげればOKで
【WordPress連載企画 第10回】オリジナルのテンプレートファイルを追加してみよう | バシャログ。
さてさて、早いものでこの連載企画も最終回となりました。 今回は、サイト上で共通している部分をオリジナルのテンプレートにしてみよう、という回です。 サイト内で同じ記述をいくつも書かなきゃならない場合があると思います。 例えばアクセス解析のトラッキングコードなどは、サイト内のすべてのページに埋め込む必要があったりしますよね。 その場合は、トラッキングコードを独自テンプレートとして切り出し、それを他から読み込むようにすると便利です。 今回はそういう時に活躍する、オリジナルテンプレートについてお話します。 テンプレートを読み込む関数 テンプレートを用意する前に、テンプレートを読み込む関数を確認しましょう。 関数名は get_tempalte_part() です。 get_tempalte_part($slug, $name); 仕様としては、テンプレートは「($slug)-($name).php」
【Wordpress 連載企画 第8回】固定ページでカスタムメニューを実装してみよう！ | バシャログ。
WordPress連載企画 第8回は、固定ページのカスタマイズについてです。 よろしくお願いします。 前回も紹介したように page.php は固定ページのテンプレートファイルです。この回では、おもにこの page.php のカスタマイズ方法を紹介していきます。 カスタムメニューを実装してみよう! カスタムメニューとは 任意のメニュー（グローバルナビゲーションなど）を、カスタマイズできる機能のことです。カスタムメニューを利用することによって、メニューの内容を動的に生成したり、管理画面で簡単に変更する事が可能になります。 また、カスタムメニューはグローバルナビゲーションだけでなく、複数のナビゲーションを作成することも可能です。 カスタムメニュー化させるページを作成しておく カスタムメニュー化させたいページは、予め作成しておいてください。 今回は固定ページをカスタムメニュー化してみます。作成し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://bashalog.c-brains.jp/19/11/12-152006.php
【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。 | バシャログ。
【書籍紹介】レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方 (WEB PROFESSIONAL) | バシャログ。
