morobitokozouのブックマーク - はてなブックマーク

WordPress：絵文字表示用のスクリプトとスタイルの記述を消去する方法 - NxWorld
WordPress Ver 4.2から絵文字が利用可能になったことにより、デフォルトでhead内に絵文字表示用のスクリプトとスタイルが記述されるようになったのですが、絵文字を使うつもりもなく記述が邪魔だと思ったときにこれらの記述を消す方法です。絵文字に関する記述を消したい場合は、その他のhead内の記述を消す時などでも見かけることも多いと思うremove_action()で消すことができ、functions.phpへ下記のように記述します。 remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_
morobitokozou 2015/05/01
WordPress
リンク
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。各要素のデフォルトスタイルを削除フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
morobitokozou 2015/03/28
CSS

Web制作
リンク
WordPress：カスタマイズするなら覚えておきたい条件分岐について - NxWorld
WordPressを使ってサイトやブログを構築する際、例えば「一覧と詳細でサイドコンテンツを変えたい」とか「カテゴリーによって表示内容をガラッと変えたい」のように「○○の時に○○する」といったことをしたい場合に用いるのが条件分岐です。 WordPressには便利な条件分岐タグが沢山用意されており、それらを用いることで様々なことができるので、先述したように特定の条件で何か処理を行うカスタマイズをしたい方は参考にしてみてください。条件分岐の使い方条件分岐とは、簡単に説明すると「指定された条件に合うか・合わないかを判断し、判断に応じて処理を行う」というものになり、例えばWordPressの場合であればこれを利用することによって、同じテンプレートを使用していても条件に応じて全く違う見栄えにしたり、処理を行うといったことが可能です。条件分岐にはswitch文というものもありますが、ここで紹介し
morobitokozou 2015/03/23
WordPress
リンク
WordPress：WP_DEBUG使用時に、エラー内容をログファイルに出力する方法 - NxWorld
WordPressで不具合等が出て原因を特定する際にWP_DEBUGを利用してデバッグモードにすることがあると思いますが、そのまま利用すると公開しているページにもエラー内容が表示されてしまいます。非公開サイトやローカル環境など自分だけしか見えない状況であれば良いのですが、既に本番公開されているような場合にエラー内容をページ上には出さずに確認できるようにする方法です。デバッグモードを有効化するデバッグモードを有効化する際には、まずwp-config.phpで70行目辺りから始まる下記のような記述を見つけます。 /** * 開発者へ: WordPress デバッグモード * * この値を true にすると、開発中に注意 (notice) を表示します。 * テーマおよびプラグインの開発者には、その開発環境においてこの WP_DEBUG を使用することを強く推奨します。 */ defin
morobitokozou 2015/03/11
WordPress
リンク
CSSで括弧を表現したサンプル - NxWorld
丸括弧（）頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
morobitokozou 2015/03/08
CSS
リンク
1