Pre に行番号を付ける方法
Pre タグにCSSで行番号を付けるには次のようにする。 スクロールバーもついでに装飾。 Javascriptを使うまでもない。 pre { background-color: #002000; color: #E2E2E2; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; padding: 15px; display: block;
投稿の順番を古い記事から表示させる
投稿の記事がデフォルトでは新着順なのですが、使い方によっては古い記事から表示させたい時があると思います。 そんな時、古い記事から表示させる方法です♪ 以下をループコードの直前に記述する <?php if(is_archive()) : query_posts($query_string.'&order=ASC'); endif ?> 例） <?php if(is_archive()) : query_posts($query_string.'&order=ASC'); endif ?> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> これで古い記事から表示されます！
WordPressで特定の部分だけ自動整形のPタグを消す
実現したいこと 実現したい事は以下の通り。 特定の範囲や部位を対象に、pタグを消す 本来は「WordPressの自動整形で挿入されたpタグ」だけに限定したかったのですが、その仕組みが作れず、範囲内の全てのpタグを消すという方法に切り替えた次第です。 コード 以下コードです。 //ショートコードで囲んだ範囲のpタグを消す add_shortcode('nop','nop_func'); function nop_func($atts, $content = null) { $content = str_replace( '<p>' , '' , $content ); $content = str_replace( '</p>' , '' , $content ); return $content; } 使う場合は、該当箇所を以下のようにショートコードで囲みます。 ［nop］ ｐタグが入って
連続するリストを横並びに等分表示する方法 – イディア：情報デザインと情報アーキテクチャ
ECサイトの「商品一覧」や会社サイトの「お知らせ」などでは、連続する同格の情報をHTMLのリストアイテム要素を用いてマークアップし、横並びで表示させることが多い。固定幅での表示では厳密な計算によって美しく並べることができたが、レスポンシブなWebサイトのように画面幅が変化する環境では等分表示することは容易ではない。CSS3の疑似クラスを用いて、横並びさせたリストアイテムを美しく等分表示する方法のひとつを紹介する。なお、「連続するリストを横並びに等分表示する方法2」のほうがより簡単です。 前提となるHTMLとCSS HTML 次のようなHTMLでマークアップした「商品一覧リスト」について考える。 <html> <head> <title>商品一覧リスト</title> </head> <body> <h1>商品一覧リスト</h1> <div id="item-list"> <ul> <li>
WordPressテーマ「Luxeritas」をカスタマイズ（その７）トップページのCSSをカスタマイズ | 創kenブログ
「Luxeritas（ルクセリタス）」は国産の無料WordPressテーマです。 ＊Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ 「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用可。 SEO 最適化済、レスポンシブ（Bootstrapベース）、機能豊富、AMP対応可。 架空のオウンドメディア（ブログ）を制作するという脳内設定シリーズ。 前回に引き続き、Luxeritasのカスタマイズ「その７」。 前回までの進行状況↓ これを最終回までに、以下の状態にまでカスタマイズします。 ＊アイベルブログ | WEB業務の処方箋 （架空のサンプルサイトです） 今回からCSS編の開幕、初回はトップページをメインにカスタマイズします。 ～ 目次 ～ 子テーマ「style.css」にコードを追加
Luxeritas(ルクセリタス)でページネーションをカスタマイズする | まるっと。
記事の一覧が複数ページにまたがる時、一覧下にはページを移動するためのボタンが表示されます。 今日はこちらを少しカスタマイズしてみたいと思います！ デフォルトのページネーションはこんな感じ これを、こんな感じにカスタマイズしたいと思います。 CSSに以下のコードを追加するだけでOKです！ /* ページネーション */ .pagination > li > a, .pagination > li > span { background-color: #eee; border:1px solid #ccc; } .pagination > li { padding:0 3px; } .pagination > li:last-child > a, .pagination > li:last-child > span, .pagination > .not-allow:first-child >
Advanced Custom Fieldsの使い方
目次 中々の大作になってしまったので目次付けときます。 ↓目次を表示する まえがき KoToRiは最近まで「Custom Field Template」を愛用していました。 使い方を詳しく説明した記事も書きました。詳しく書き過ぎて見てくれた人にコメントで注意もされました笑 Custom Field Templateの使い方[WordPress] でも最近『Advanced Custom Fields』に乗り換えました。 理由はいろいろあるのですが一番の理由は編集画面に表示されるフィールドが見やすいからです。 管理画面をなるべく使いやすくカスタマイズするという事に重きを置くようになったのです。今更ですが。 でも調べていくうちに『Advanced Custom Fields』の柔軟性にビビりました。 みなさん、このプラグインが無料なのは凄いことです！ なので『Advanced Custom F
WordPress：古い記事にメッセージを表示させる際の備忘録 - NxWorld
○年以上前や○日以上前というように、WordPressで一定の期間が経過した古い記事にメッセージを表示させる方法で、公開日だけでなく更新日を条件にした場合も含めた全4パターンの実装方法です。 例えば時事ネタや技術ネタといったように掲載している情報がどんどん古くなったり最悪使えなくなるようなものを扱っていて閲覧者に注意を促したいという場合に便利です。 ○○以上前の記事にメッセージを表示する 90日前や半年前というように細かく指定したい時に便利な方法で、下記は例として「公開されてから1年以上経過している」という条件のものになります。 <?php if ( date( 'U' ) - get_the_time( 'U' ) > 60 * 60 * 24 * 365 ) : ?> <div class="old-post-message"> <p>この記事は<?php the_time( 'Y年n
WordPressのプルダウンをCSSだけでシャレオツにカスタマイズしてみる
このブログもサボリ気味ながら更新を続けてきたことで、サイドバーのアーカイブやカテゴリーが充実して縦長になってきました。ネットを巡回しているとやたらとサイドバーが縦長のブログにめぐり合うことがありますが、私はこれが気になったので表示をドロップダウンに切り替えようと思ったところ、デフォルトのものはどうにも味気ない。 select タグのカスタマイズについて検索すると画像を使ったものが多いですが、今回は CSS だけで実現できるちょっとおしゃれなドロップダウン表示のカスタマイズ方法を紹介します。このブログが WordPress で運営されているので WordPress にて動作確認を行っていますが、原理を理解すれば他のブログサービスでも同様のカスタマイズを行うことができます。 こちらを参考にさせていただきました。 プルダウン（select）の見た目を思い通りにするCSS – m31 完成品このよ
番号なしulリストを記号・マーク・画像で装飾！CSS初心者が応用できるカスタマイズ説明あり
ul liを入れ子にしたとき、階層ごとにスタイルを変えたほうが項目の見栄えが良いので、見ていて分かりやすいです。 CSSでスタイルを触りだした頃、この指定方法が分からかったので、ulリストの基本的なセレクタの指定方法から書きますね。 ul li:before ul li ul li:before ul li ul li ul li:before 上記は、孫の孫まで反映させ、下記は直下の子だけ反映させる子セレクタ>を使った感じ。 ul > li:before ul > li > ul > li:before ul > li > ul > li > ul > li:before これに#mainなど、テーマに合わせた親要素を前に書いて半角スペースをあけると、優先順位で反映しない…ということがありません。 例えばstinger系では.post ul > li:beforeや.entry-cont
CSS,JavaScript,PHPで使えるコメントアウト装飾
CSS,JavaScript,PHPで各ブロックごとに説明のコメントアウトをするかと思いますが、それを見やすくするための装飾をまとめてみました。 大ブロック用（大見出し） ※各記号によって長さが違うように見えますが、全て同じ文字数です。 /* 大ブロック ———————————–*/ /*———————————– 大ブロック ———————————–*/ /*================================== 大ブロック ==================================*/ /*:::::::::::::::::::::::::::::::::: 大ブロック :::::::::::::::::::::::::::::::::::*/ /*++++++++++++++++++++++++++++++++++ 大ブロック +++++++++++++++++
はてなブログでふい字が使えたのでメモ風cssを作ってみた - FOXISM
ほかにもタイトルだけで使っているといった限定的な使い方をしているものもあります。で、これらのcssを確認したところ、たしかにはてなブログに「ふい字」があるようです。 ふい字の使い方 cssに以下を追加すればふい字を使えます。 @font-face{ font-family:HuiFontP109; src:url(/fonts/public/HuiFont/HuiFontP109.eot); src: url(/fonts/public/HuiFont/HuiFontP109.eot?#iefix) format('embedded-opentype'), url(/fonts/public/HuiFont/HuiFontP109.woff) format('woff'), url(/fonts/public/HuiFont/HuiFontP109.ttf) format('truetyp
WordPressに投稿日と更新日を表示させる。time要素でタイムゾーンも仕込んでみた
記事のタイトル部分に「投稿日」だけでなく「更新日」も表示させるようにしてみました。せっかく書き直しても古い日付だけなのもナンですから。 一度も更新してない記事には「更新日」は表示されないようにしています。 ついでにHTMLの<time>要素の「datetime属性」でタイムゾーンも仕込みました。 で、日付だけ表示する場合でも「the_date」より「the_time」のほうがイイとか、今回調べたことをメモっておきます。 本日のINDEX 投稿日と更新日の表示のコード the_time と the_dateの違い 投稿日と更新日が異なる場合だけ更新日を表示する time要素で正確な日時やタイムゾーンを記述する 投稿日と更新日の表示のコード 投稿日と更新日の表示のためのコードの例です。time要素も仕込んでいます。 投稿・固定ページとも同じコードで使えます。 必ずループ内で使用。（じゃないと日
不揃いな画像たちを中央下揃えに表示する - Qiita
こんな感じです。 わかりやすくするために親要素の li に点線を指定しています。 商品画像を下揃えで表示したいときに使えると思います。 記述は下記です。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>不揃いな画像たちを中央下揃えに表示する</title> <style> /* リストのスタイルや無駄な余白を消すために記述 ---------------------------------- */ .abc li { margin:0; padding:0; list-style:none; float:left; border:1px dotted #666; } /* 中央下揃えに関するスタイル ---------------------------------- */ .abc li { width:180px;
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特定のタームの時だけ、何かを表示したい カスタム投稿vol.3［WordPress］ – HIromi
WordPress神推しブログ - ねたわん
CSS: 擬似クラス before, after の解除方法 | siro:chro
【WordPress】PHPによる条件分岐タグの使い方 | ULノマド
便利なWordPressの条件分岐16パターン：カスタマイズで活躍するものを厳選！
