CSSで“蛍光ペン”っぽく文字にマーカー線を引く方法 | vdeep
こんにちは、okutani(@okutani_t)です。Twitterでこんな質問を受けたので、取り急ぎ記事にしてみました。 @okutani_t 文字の下に可愛い蛍光マーカー引いた風にするのってどうやるんですか？？ お手すきの際に教えて下さいませ…！ — 一ノ瀬あや(恋愛コラムニスト) (@ichinoseaya) 2016, 2月 21 というわけで、「CSSを使って蛍光ペンっぽく文字にマーカー線を引く方法」を記事にしてみたので、サクッと見ていきましょう！ スポンサーリンク HTML側の準備 HTMLでは次のようにしてあげればOKです。HTMLがよくわからない人は、とりあえず投稿画面に次のように記述すればOKなのね、ぐらいに捉えておいてください。 また、WordPressを使っている人は「テキストモード」にしてから記述しましょうね。 ・文字強調なし <span class="gray-
カラーツール「0to255」で色を決めてメニューを作ってみる
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない（コード 付き）
タイトルはパンくずリストなんですけど、パンくずリストを紹介する記事ではありません。でも、パンくずリストを自分で作ってみると分かるんですけど、パンくずリストのコードには、WordPress でのサイト構築のノウハウが詰まっているなーって思います。なのでパンくずリストを作りながら、WordPress でのサイト構築の考え方みたいなものを紹介する感じの記事になっています。 WordPress でブログじゃない Web サイト構築をするとき、サイトの構造によってはサイドバーなどを自分でカスタマイズしなくてはいけません。例えば固定ページを作ったら、親ページでは子ページへのリンクを表示したりとか、逆に子ページでは親ページのリンクを表示したりとか …。もちろんリンクだけじゃなくて、アイキャッチ画像なんかも一緒に表示したいこともあったりします。一般的な Webサイトを WordPress で作ろうとすると
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
作った：MarsEdit用、記事でHTMLのコードを紹介するための実体参照変換スクリプト :Heartlogic
作った：MarsEdit用、記事でHTMLのコードを紹介するための実体参照変換スクリプト ブログの記事にHTMLのコードを書くとき、「>」は「>」のように、実体参照と呼ばれる方法で書く必要があります。これが面倒なので、簡単に変換するためにMarsEdit用のAppleScriptを作ってみました。「>」「<」「&」「"」の4つだけを変換します。 1：インストールする こちらのURLからダウンロードします→ ChangeCharacterEntities.zip 圧縮ファイルを解凍し、出てきたファイルを、MarsEditのスクリプト用フォルダにコピーします。MarsEditを起動してメニューバーのスクリプトアイコン-［Open Script Folder］をクリックし、開いたフォルダの中にファイル「ChangeCharacterEntities」をコピーします。 2：呼び出す MarsE
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
デザインどや！？｜海外カジノ オンラインのWEB作成
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
WPプラグイン「Tweet Old Post」の書き換えるべき33行
ひとつ前の記事でご紹介した、過去に書いたブログの記事をランダムに抽出し、Twitterに自動投稿する「Tweet Old Post」。 実はマルチバイト非対応という日本語ユーザーには致命的な問題があるわけですけど、コアファイルをいじることで、簡単に対応させることができます。 「Tweet Old Post」は、そもそもマルチバイト文字である日本語で扱われることが想定されていない仕様になっています。 そのため、日本語は2倍の文字数で計算されてしまうため、タイトルが長くなると、Twitterに投稿しきれない長さになると判断され、よくわからん点字みたいな状態で投稿されてしまいます。 ピックアップ記事:… http://t.co/0pYF6QE — ホシナカズキ(・e・) (@cazuki) September 10, 2011 というわけでマルチバイトに対応させましょう。 つーても難しい話ではな
iOSゆとりプログラミングのススメ - 仕事人の開発日誌
iOS Advent Calendar 2011という今年を締めくくる売名イベントが突如発足したので我こそはとエントリーしたわけなんだが。http://atnd.org/events/22792 俺は入門書をいくつ読んでもアプリをいつまでたっても完成させることのできないお前らの為にわざわざ書き下ろす事にした。精力的に入門記事を書いているもとまかさん(@motomaka)ですら書いていない内容をな！ 今更ですがiOSアプリ開発の基礎について色々調べてみましたhttp://d.hatena.ne.jp/moto_maka/20110425/1303673150 12月3日までの記事は以下の通り。 12月1日 @glassonion1 失敗しない iOS In-App Purchase プログラミング12月2日 @k_katsumi CAEmitterLayer でクリスマスは爆発しろ12月3日
地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef
Google Analyticsでいいね！ボタンやTweetボタンのアクションを計測する方法 - F.Ko-Jiの「一秒後は未来」
6月末にGoogle AnalyticsでGoogleの+1ボタン、FacebookのLikeボタン、TwitterのTweetボタンのアクションを計測できるようになりました。 » Google Analytics Blog: +1 reporting in Google Webmaster Tools and Google Analytics このブログでも計測コードを設置してみたので、その方法を紹介しておきます。 Google Analyticsを新しい管理画面に切り替える ソーシャルプラグインのレポートは新しい管理画面からしか確認できないので、Analyticsの管理画面を新バージョンに切り替えましょう。 新バージョンの管理画面では「Visitors」メニューの中に「Social」という項目があります。もしGoogleの+1ボタンをサイトに設置しているなら、すでに自動的に+1ボタンの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
seo-matome.jp