• RSS
PDF やWord、Excel などのリンクに自動でアイコンを表示させる方法

企業サイトを構築していると、ニュース内のテキストリンクに「PDF アイコン」を表示させるカスタマイズが必要になることが多いですので、

今回はWordPress での投稿を例に、PDF ファイルへのリンクテキストに自動でアイコンを表示させる方法に加えて、Word、Excel、ZIP ファイルのリンクにも同様にアイコンを表示させる方法を紹介致します。
続きを読む

[CSS]CSS3 の transform で文字を斜めに傾けて表示する方法

CSS3 の transform プロパティを使って要素を斜めに傾けて表示させることが可能です。

テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。
写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。
続きを読む

[CSS]CSS で作る「吹き出し」のサンプル

吹き出しやバルーンとも言いますが、CSS だけで実現できるのでまとめました。

上下左右の4方向に対応した吹き出しサンプルです。
続きを読む

[スマホ]iOS や Android でリンクタップ時のハイライト表示を変更する方法

スマホサイトでリンクをタップすると、iPhone(iOS)ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。

このグレーの影やオレンジの枠(ハイライト表示)をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。
続きを読む

[CSS]マウスでドラッグした際の文字を選択範囲の色(ハイライトカラー)を変更する方法

マウスカーソルでテキストをグイーッとなぞると、選択範囲がハイライト表示されます。

通常、この選択範囲のハイライトカラーは青色で、たまにピンクや赤色などになっているサイトやを見かけますが、CSS3 の擬似要素 selection を用いることで、このハイライトカラーを変更することができます。
続きを読む