カスタム投稿のアーカイブで2ページ目が表示されない時の対処 - デザイナーのタネあかし
カスタム投稿タイプのアーカイブページ（taxonomy-$taxonomy.php）を用いて一覧ページを準備していた際、２ページ目以降が404 NotFoundとなってページが表示されない事態が発生してしまいました。 手こずったポイント１：パーマリンク設定がデフォルトだった なかなかググっても答えに到達できなかった原因は、今回解決したいのがパーマリンク設定がデフォルトのままの場合でした。 http://ドメイン名/?taxonomy&paged=2 一般的に利用されているURL形式は http://ドメイン名/taxonomy/paged/2 なので、このURL形式で２ページ目以降が404 NotFoundとなってページが表示されない問題を解決するのは沢山検索に引っかかりましたが、デフォルトのままの場合は見つけられず。。。 手こずったポイント2：WP_Query() にこだわったせい これ
Flexbox内でテキストを省略(ellipsis使用)できないバグの対応 - Qiita
Flexboxを使っていて、なんだかテキストの省略が効かないなと思うことが有りました。 調べると対策が分かったのですが、Qiitaには記事が無さそうだったので、まとめてみました。 問題が発生する条件 Flexbox内で、サイズ指定の無い親要素の中で文字省略しようとしてもできない。 (親要素のサイズを指定すれば文字省略されます) See the Pen OZRLaj by teppei (@peitetsu) on CodePen. よく有るパターン Flexbox内で、一部要素をサイズ固定にし、残りを flex: 1 とする場合も省略されない。 See the Pen VxKZwJ by teppei (@peitetsu) on CodePen. 解決策 親要素に overflow: hiddenもしくは min-width: 0を指定すると解決するようです。 個人的には oveflow
【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法
【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法 Web2017年3月27日 「特定の子要素を持つ親要素にcssを適用したい」というケースはしばしばありますが、css3を駆使してもこれを実現するセレクタは存在しません。そこで、jsを使って実現する方法を本記事ではご紹介いたします。jQueryでもVanilla JS（生のjavascript）でもどちらでも可能ですので、サイト環境に合う方法をどうぞお使いください。 サンプルコード html <ul class="hoge"> <li><p>特にスタイルを当てる必要なし</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p class="moge">これの親要素liにだけcssを適用したい</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p
の番号だけ装飾するには？CSSカウンタを使ってみた
順序リストの表示に利用するol要素。 デフォルトではごくシンプルな番号つきリストですが、デザイナーさんからこんな風に番号部分だけ色を変えるなどの装飾がされたデザインを渡されたらどのようにCSSを作りますか？ …簡単そうに見えて、意外と悩むのではないでしょうか？ 今回の記事では、こんなシーンで使えるCSSのTipsをご紹介します。 最初からついている数字は使わない 結論から言うと、list-style-typeによって付与される数字は使いません。 ここだけを装飾する方法はないので、せっかくですが指定自体を無くすことになります。 ol{ list-style-type: none; } ここから活躍するのが当記事の主役、CSS2から登場した「カウンタ機能」です。 これを使って1,2,3,4…といった連番を疑似要素:beforeにつけなおす方法をとった上で、自由に装飾できるようにしてみましょう。
【css】「background-attachment:fixed;」がiphoneのsafariで効かない | web関連 | 二色人日記。
jqueryで指定した要素が範囲内に入った時のみ表示 <script> jQuery(function($){ $(window).on('load scroll resize', function() { // 「section.test02」が存在したら発火 if($('section.test02').length){ add_class_in_scrolling($('section.test02')); } }); // スクロールで要素が表示されている時にclassを付与する function add_class_in_scrolling(target) { // 指定した要素の次の要素 var nextElement = $('section.test03'); var winScroll = $(window).scrollTop(); var winHeight = $(
人気のスライダーjQuery「slick.js」をWordPressで利用する方法
こんにちは、ゾノ( @ozonosho )です。 さて、今日のブログでは人気のスライダーjQuery「slick.js」をWordpressで利用する方法をご紹介いたします。 slickを利用すれば、画像スライダーから記事スライダーまでどんなスライダーでも実装することができます。そのうえWordPressのスライダー系プラグインよりも動作が軽いので、サイトの表示速度を遅くしたくない方にとてもおすすめのスライダーです。 もちろんレスポンシブにも完全対応しています！ slickの導入方法 まずはWordpressのテーマ上でslickを利用できるように導入しましょう。 導入は簡単で、下記の３ステップでおこないます。 slickファイルを公式サイトからダウンロード slickファイルをサーバーにアップロード slickの読み込み それぞれ説明していきます。 ①slickファイルを公式サイトからダ
スマートフォンサイトのコピー用inputにselect()はダメ
inputにコピー用テキスト スマートフォンサイトにコピーしてほしいテキストを表示するときにコピーしやすいようinputタグのvalueに設定することがある。これに加えてタップ時に全選択されるようにする場合はPCサイトならselect()がよく使用されるがスマートフォンサイトでは使用してはならない。 select()はiOSだと効かない select()はiOSだと効かないのでテキスト全選択を代わりに実行する場合はsetSelectionRangeを使用する。setSelectionRangeならiOSとAndroidの双方で使用可能。（バージョンが古いと効かないことも） 追記：iOSはコピーがうまくできないことが多い模様 readonlyも付ける inputタグにフォーカスするとキーボードが表示されて文字が編集できてしまうため間違えてテキスト部分を消してしまうことがある。 これを防ぐには
jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法｜BLACKFLAG
以前にテキストを1文字ずつタイプライター風に表示するjQueryプラグインを紹介しましたが、 HTMLもスクリプトもシンプルでもっと扱いやすい構成で同様の動作が実現できないか 試しに作ってみたので紹介してみたいと思います。 まずは動作サンプルから。 「jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示 ページロードするとテキストが 1文字ずつタイプライターのように表示されます。 この動作の全体構成について まずはHTMLから。 ◆HTML <p class="split">jQueryでテキストを一文字ずつ読み込むサンプルテキストです。</p> HTMLでは通常の文章を構成する時と同じように テキストを＜p＞タグで囲ってあります。 サンプルでは＜p＞タグにクラスをつけていますが 特にクラスをつけることが必須ではありません。 もちろん＜p＞タグ以外で
CSSでラジオボタンをカスタマイズする方法 - プロエンジニア
1. ラジオボタンカスタマイズの準備をする 1.1. 通常のラジオボタンの作成 [input type="radio"] ラジオボタンのカスタマイズはCSSで行いますが、まずはラジオボタンの標準スタイルを確認してみましょう。 ●ラジオボタン ※HTMLでラジオボタンを作成する詳しい方法については、「HTML入門：ラジオボタンを作成してみよう【<input type="radio">】」で解説していますのでこちらもご参考下さい。 「radio1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。 ●radio1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS入門-ラジオボタンのカスタマイズ</title> </head> <body> <h1
簡単に調整できる。ページ内リンクの停止位置を調整 | いろどり
レシポンシブのサイトで面幅が大きいときは上部固定で追従してくるメニュー、画面幅が小さくなると上部にメニューを固定の場合。同じアンカーでは停止した時の画面位置が違ってくるのでその時の対応。 CSSとJSのやり方があるようだけど、簡単そうなCSSで調整。 <h1> <span id=“no1” class=“anchorlink"></span>タイトル</h1> アンカーをつけたい場所にspanで挿入。 @media only screen and (min-width:760px){ span.anchorlink { position: relative; top: -120px; display: block; } } 上部メニューが表示されるサイズを指定して、上部にメニューが表示されているときはアンカーの要素を上方にずらすようにする。
iPhoneのaタグの中にimgが複数あってタップハイライトが邪魔！でもこれで解決☆～img要素のタップハイライトを消す！～ - BLOG-BOX
こんばんは！ インターネットって素敵ですね。何でも解決してくれますね。 ワタクシ、スマホのマークアップのお仕事をしていまして、３日ほどずっと悩んでたことがありました。 それは・・iPhone。そう、iPhone。 iPhoneとアンドロイドのwebサイトをコーディンクしていまして、よくあるリストタイプのパーツを作っていたのですが、いざiPhoneで確認した時に、なんて煩わしいのか、画像が１個１個タップするとハイライトしてしまうんですね。。要素を全部aタグで囲ってるのに！！！ と、いうわけでめちゃくちゃ調べました。検索検索・・・。 基本的に『タップ ハイライト』とか『画像 タップ アイフォン』とかで調べてたのですが、殆どが、webkit-tap-highlight-colorでハイライトの色を変えれるよ、という記事でした。色を変えたいわけじゃない。ハイライトを消したいわけじゃない。アンドロイ
jQueryでタブパネルを作るチュートリアル (1/3)
「タブパネル」はタブ（見出し）をクリックすると、パネル（タブの内容が書かれた部分）が切り替わるUIです。アコーディオンパネル（関連記事）と同じく、情報量に対して表示スペースが少ない場合に使われます。Yahoo!やlivedoorなどの大手ポータルサイトがトップページで採用していることもあり、現在では多くのユーザーが迷わず操作できるUIとして定着しています。 基本のタブパネルの作り方 タブパネルのHTML／XHTML（以下、HTML）は、タブ部分（見出し）とパネル部分（表示する中身）をul/li要素を使って別々にマークアップし、タブのul要素には「tab」、パネルのul要素には「panel」というclass名を付けます。 パネル部分は、タブが選択されたときに表示する内容をli要素で1つずつ記述していき（1タブ項目＝1つのli要素）、それぞれに「tab1」「tab2」……といった連番のid名を
テキスト周りのスタイリングに使えるCSSプロパティやスニペット - NxWorld
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
YAMLで改行する方法 - このブログは証明できない。
Railsのtest/fixturesにテストデータを用意するときなど、改行が入った文字列を使いたい場合がありますね。\nを入れてもダメです。代わりに特別な書式をつかいます。 memo: | 1行目です。 2行目です。 3行目かな？ 4行目いっちゃう？ 上の書き方だと、最後の行の末尾にも改行が入ります。入れたくない場合は、こう書きます。 memo: |- 1行目です。 2行目です。 3行目かな？ 4行目いっちゃう？ ちなみに、明示的に最後に改行を入れることを示したい場合は、こうです。 memo: |+ 1行目です。 2行目です。 3行目かな？ 4行目いっちゃう？ 文字列を加工して\nを入れたりしなくていいので、YAMLってステキだったんですね。
「WordPressのトップページに、新着記事数件を表示する」get_postsのサンプルコードをあげとく
※2018.03.01追記：4年半経ちましたが、今のところはおおむねこの記事のままで大丈夫と思ってます。定期的にチェックするのは大事。 今年に入ってから、「クエリ変更はquery_postsかpre_get_postsか」という話題がWordPress中級者以上の間では盛り上がっていましたが、初心者コピペWordPressユーザーの多くの方には「お前ら何を言っているんだ」ということでしょう。 実際、WordPress日本語フォーラムに投稿される質問の中でも、必要ないところでquery_postsを使って表示がおかしなことになっているケースがあとを絶ちません。 古い記事が検索上位に出ている現状 なぜ同じようなトラブルが減らないのかといえば、Googleで「WordPress 新着記事」「WordPress 新着情報」などのワードで検索した時、上位に表示されている記事が結構古いものが多いのにも
display:table-cellでwidth:100%に設定したいとき
2014年12月5日に作成されたページです。 情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。 全件リストはこちら。 どもです。 久々の連続更新(ﾟ∀ﾟ) 要素を手っ取り早く上下中央揃えにしたいとき、親要素のdisplayをtable-cellにするのが楽ちん。 でも、display:table-cellはwidth:xx%が効かない罠。 親要素のwidthが決まっている場合、width:inherit;（親の数値を引き継ぐ）でイケる。 まぁ、親要素が決まってるならそのpx書けば良いだけだけど、その変動も考えるとinheritのが堅実。 しかし親要素もパーセンテージ指定だったら…。 width:想定される最大pxより大きな数値;でイケた。ちょっと驚いた。 どうやらtable-cellには親要素を絶対にはみ出ないという原則があるようだ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html
お手軽WordPress Tips：プラグインを使わず投稿記事や固定ページの好きな場所に任意のPHPファイルを挿入、実行できるようにする
WordPress：カスタムメニュー（wp_nav_menu）について - NxWorld
display:inline-block;でできた隙間をなくす4つの方法