Profile

Author: ドット follow me
俺的メモを適当に書いてってます。

にほんブログ村 携帯ブログ スマホ・携帯アプリへ
にほんブログ村 ゲームブログへ
1日1クリック
よろしくお願いします!
Search
Tags

スマートフォン Androidアプリ オンラインツール GalaxySII Windows CSS HTML ネトゲ 可愛いケース特集 可愛いアバター Gmail Twitter Google Facebook iPhone GalaxyS3 オンラインゲーム ストラップの付け方 プレイ日記 ゲーム バックアップ Excel iPhone4 ソフト スマホ 無音カメラ Android スクリーンショット ネット上でファイル変換 チェック画像 素材作成 タータンチェック素材を作る ツイートの全削除 vertical-alignが効かない nobrのCSS版 PREのCSS版 はみ出た文字列を省略させる 1文字目だけを取り除く シャッター音を消す スタートメニューの高さを変更する メモ帳でソースを開く セキュリティメッセージの表示回避 ペンタブの波紋を消す Photoshop 塗り無し円を描く クリック音を消す DropBoxの容量の増やし方 マクロ iPhone4S アメピグ ツール ホーム画面をカスタマイズする 絵文字 デコメ フリーメール WEBメール メールサービス比較 ポイント制無しの無料デコメサイト ColorBox 同窓で画像拡大 セキュリティの警告を出さない UIMカードの抜き方 特殊文字 タグを直接記述する 改行タグが効かない フェイスブック アトゲ 鍵付メモアプリ カロリー計算 可愛いFPS オリジナルのスマホケースが作れるサービス ウィンドウサイズを変更する BoatBrowser 比較 音消し 地震 地震速報  通知 リサイズ 画像を一括でリサイズ(拡大/縮小)する キャラクター アニメ ドコモ いいねボタン フリーソフト 設置方法 設定方法 一括でアンフォロー むらびと どう森 WiiFit USB 効かない 認識しない 新作 スマブラ ドコモメール フォロー解除 右寄せ div 大乱闘 ソフトウェア更新 きせかえ とびだせどうぶつの森 コミュニケーションゲーム チャット @games アットゲームズ VOCALOID ボーカロイド タブと半角スペースを表示する notepad++ ブラウザアプリ ネタ 改善方法 フィルタ フォルダ自動振り分け メール自動振り分け ボカロ 朝一番 LINE 変身前 トーク履歴 チャットログ USB接続モード とび森 画像 ネタバレ 便秘解消 白湯 1文字目がローマ字になってしまう ドキドキプリキュア ドキプリ 検索されないようにする 

Other


人気ブログランキングへ

スポンサーサイト

<!-- passive:etc --><div style="text-align:center;margin-bottom:10px;"><iframe src='//assys01.fc2.com/1374' style='width:300px;height:250px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1368" width="1" height="1"><!-- FC2管理用 --></div><div style="font-size:8px;">上記の広告は1ヶ月以上更新のないブログに表示されています。<br />新しい記事を書く事で広告が消せます。</div>
68

cssで要素を右寄せにする

ホームページを作成する時に、最近であれば横幅1024pxの中央寄せのレイアウトが主流ですよね。中央寄せはmargin: 0 auto;で実現可能です。これは以前から知っていたのですが、最近始めて知ったものがあります。なぜ知らなかったのか、と自分でも意外なのですが(笑)、わざわざ親要素で囲って、親要素の横幅を広げなくても、目的の要素を右寄せにする方法。margin-left: auto;左側のマージンを auto にしてしまうんですね。簡単な... ホームページを作成する時に、最近であれば<br />横幅1024pxの中央寄せのレイアウトが主流ですよね。<br /><br />中央寄せは<br /><blockquote>margin: 0 auto;</blockquote>で実現可能です。<br /><br /><br />これは以前から知っていたのですが、最近始めて知ったものがあります。<br />なぜ知らなかったのか、と自分でも意外なのですが(笑)、<br />わざわざ親要素で囲って、親要素の横幅を広げなくても、<br />目的の要素を右寄せにする方法。<br /><br /><blockquote>margin-left: auto;</blockquote><br />左側のマージンを auto にしてしまうんですね。<br />簡単ながらも、これを知った時はちょっと感動しました・・・(笑)
  • Date : 2013-05-29 (Wed)
  • Category : HTML,CSS
62

Facebookの「いいね!」ボタンをFC2ブログに設置する方法

Facebookの「いいね!」ボタンをFC2ブログに設置する方法メモ。FC2の環境設定にも、いいねボタンの設置項目はありますが、これだと拍手ボタンの場所と同じ所にしか設置できません。好きな所に設置したい時には不便なので、自分でタグを取得してきて好きな場所にいいねボタンを設置する方法です。【1】http://developers.facebook.com/docs/reference/plugins/like/ にアクセスする【2】[URL]にブログのURLを入力して、それぞれの... <a href="http://blog-imgs-55.fc2.com/a/n/i/anigoo/20130215201947d98.jpg" target="_blank"><img src="http://blog-imgs-55.fc2.com/a/n/i/anigoo/20130215201947d98.jpg" alt="いいね!ボタンを設置する" border="0" width="205" height="96" /></a><br /><br />Facebookの「いいね!」ボタンをFC2ブログに設置する方法メモ。<br /><br />FC2の環境設定にも、いいねボタンの設置項目はありますが、<br />これだと拍手ボタンの場所と同じ所にしか設置できません。<br />好きな所に設置したい時には不便なので、<br />自分でタグを取得してきて好きな場所にいいねボタンを設置する方法です。<br /><br /><hr><br /><br />【1】<a href="http://developers.facebook.com/docs/reference/plugins/like/" target="_blank" title="http://developers.facebook.com/docs/reference/plugins/like/">http://developers.facebook.com/docs/reference/plugins/like/</a> にアクセスする<br /><br />【2】[URL]にブログのURLを入力して、それぞれの項目を設定。<br />   [Get Code]をクリックする<br />   <a href="http://blog-imgs-55.fc2.com/a/n/i/anigoo/20130215202722c82.jpg" target="_blank"><img src="http://blog-imgs-55.fc2.com/a/n/i/anigoo/20130215202722c82.jpg" alt="GetCode" border="0" width="100" /></a><br /><br />【3】テンプレートの設定を開いて、<br />   1つ目のHTMLタグを&lt;body&gt;のすぐ後ろにコピペして保存。<br />   <a href="http://blog-imgs-55.fc2.com/a/n/i/anigoo/201302152033559a0.jpg" target="_blank"><img src="http://blog-imgs-55.fc2.com/a/n/i/anigoo/201302152033559a0.jpg" alt="設置コード" border="0" width="400" /></a><br /><br />【4】2つ目のHTMLタグを、ボタンを設置したい場所にコピペ。<br />   その時に、入力したURLの部分を&lt;%topentry_link&gt;に書き換える必要があります。<br />   これを書き換えないと、個別記事の「いいね!」ではなく<br />   ブログのトップページに「いいね!」されてしまいます。<br /><br /><blockquote><p>&lt;div class="fb-like" data-href="<span style="color:#FF6600">http://anigoo.blog98.fc2.com/</span>" data-send="false" data-layout="button_count" data-show-faces="true"&gt;&lt;/div&gt;</p></blockquote><br />   ↓<br /><blockquote><p>&lt;div class="fb-like" data-href="<span style="color:#FF6600">&lt;%topentry_link&gt;</span>" data-send="false" data-layout="button_count" data-show-faces="true"&gt;&lt;/div&gt;</p></blockquote><br />   この変更後のHTMLタグを、そのままご自分のブログにコピペしてもOKです。<br /><br />【5】テンプレートを保存して、設置完了!
  • Date : 2013-02-15 (Fri)
  • Category : HTML,CSS
34

別窓を開かずに拡大画像を表示させる、ColorBox

拡大画像を表示しようと画像をクリックした時に、通常なら別窓(新規ウィンドウ)で開くはずが、その場でなんかカッコ良く開いた・・・なんて経験はありませんか?そう、あの画像がかっこよく、かつ新窓が出現しないから便利なアレ、Lightboxと言うらしいです。名前を知らない時、「画像 同じウィンドウ 拡大」とか「画像 拡大 かっこいい」とかかなり探しました(笑)今回はこのLightboxの派生?クローン?の、ColorBoxを導入方法を... <a href="http://blog-imgs-55.fc2.com/a/n/i/anigoo/201212050009348c4.jpg" target="_blank"><img src="http://blog-imgs-55.fc2.com/a/n/i/anigoo/201212050009348c4.jpg" alt="別窓を開かずに拡大画像を表示させるColorBox" border="0"/></a><br /><br />拡大画像を表示しようと画像をクリックした時に、通常なら別窓(新規ウィンドウ)で開くはずが、<br />その場でなんかカッコ良く開いた・・・なんて経験はありませんか?<br />そう、あの画像がかっこよく、かつ新窓が出現しないから便利なアレ、<br /><b>Lightbox</b>と言うらしいです。<br /><br /><span style="font-size:x-small;"><span style="color:#cccccc">名前を知らない時、「画像 同じウィンドウ 拡大」とか「画像 拡大 かっこいい」とかかなり探しました(笑)</span></span><br /><br />今回はこのLightboxの派生?クローン?の、<b>ColorBox</b>を導入方法をメモしておこうと思います。<br />↓サンプル(クリックしてください)<br /><a href="http://blog-imgs-55.fc2.com/a/n/i/anigoo/CA8XUJE3.png" target="_blank"><img src="http://blog-imgs-55.fc2.com/a/n/i/anigoo/CA8XUJE3.png" alt="" border="0" width="100" height="150" /></a><br />同窓で画像が拡大されましたか?<br />今回はこの<b>ColorBox</b>のFC2ブログへの導入方法を解説しますヾ(・∀・)ノ<br /><br /><hr><br /><br />【1】ColorBoxをDL→<a href="http://colorpowered.com/colorbox/" target="_blank" title="http://colorpowered.com/colorbox/">http://colorpowered.com/colorbox/</a><br />   左上の「Download」の、一番左のリンクでいいと思います。<br />   「View Demonstration」の1,2,3,4,5 は、デザインのサンプル。<br />   <span style="font-size:x-small;"><span style="color:#cccccc">(ちなみにこのブログはexample1のデザインを使用)</span></span><br />   <a href="http://blog-imgs-43.fc2.com/a/n/i/anigoo/201109122020384b3.gif" target="_blank"><img src="http://blog-imgs-43.fc2.com/a/n/i/anigoo/201109122020384b3s.gif" alt="" border="0" width="398" height="197" /></a><br /><br /><br />【2】zipファイルを解凍し、フォルダを開く。<br />   そして、example1~5の中で自分の選んだデザインのフォルダを開き、<br />   imagesフォルダの中の画像ファイルを全てアップロードする。<br />   アップロードは、いつも記事を書く時の画像アップロードと同じ方法でOK<br />   <i>※ファイル名は元のファイル名と同じものにしてください</i><br />   「参照」でファイルを選択し、「タイトル」に、loading.gifなら「loading.gif」と、<br />   「.gif」まで入力する。<br /><br />   example1とexample4は「ie6」というフォルダが入っていますが、<br />   この中の画像ファイルも全てアップロードしてください。<br /><br /><br />【3】「colorbox」フォルダの中の「jquery.colorbox-min.js」の名前を、<br />   「jquery-colorbox-min.js」に変更し、同じようにファイル名を指定してアップロードする。<br />   <span style="font-size:x-small;"><span style="color:#cccccc">(名前に ドット が入っているファイルはアップロードできないため)</span></span><br /><br /><br />【4】アップロードしたファイルをクリックし、画像のアドレスを調べて、<br />   ファイル名より前の部分をコピーする。<br />   (例)このブログでは、loading.gifのアドレスは<br />      「<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span><span style="color:#ffaa00">loading.gif</span>」だったので、<br />      「<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>」をコピー。<br /><br />   次に「colorbox.css」をメモ帳等で開き、「url(images/」となっているところを全て、<br />   コピーしたアドレスと置き換える。<br />   (例)「background:url(<span style="color:#ffaa00">images/</span>loading.gif)」<br />     →「background:url(<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>loading.gif)」<br /><br />   書き換えたら保存して、これも同じくファイル名を指定してアップロードする。<br /><br /><br />【5】テンプレートの設定を開き、&lt;head&gt;~&lt;/head&gt;に以下をコピーして貼り付ける<br /><blockquote>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;<br />&lt;script type="text/javascript" src="<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>jquery-colorbox-min.js" &gt;&lt;/script&gt;<br />&lt;link rel="stylesheet" type="text/css" href="<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>colorbox.css" media="screen" /&gt;<br />&lt;script type="text/javascript"&gt;<br />$(document).ready(function(){$('a[rel="gallery"],a[href$=".jpg"], a[href$=".gif"], a[href$=".png"],a[href$=".JPG"], a[href$=".GIF"], a[href$=".PNG"]').colorbox({maxHeight:"95%",maxWidth:"95%",current: "{current} of {total}",initialWidth: "50",initialHeight:"50"});});<br />&lt;/script&gt;</blockquote><br /><span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>の部分は、コピーしたものに置き換えてください。<br /><br /><br />【6】テンプレートの更新をして、導入完了。</p><br /><br /><hr><br /><br /><a href="http://firespeed.org/diary.php?diary=kenz-1309" target="_blank" title="http://firespeed.org/diary.php?diary=kenz-1309">http://firespeed.org/diary.php?diary=kenz-1309</a><br /><a href="http://www.dokuritsu-kigyo.net/blog/2010/06/jquerycolorbox.html" target="_blank" title="http://www.dokuritsu-kigyo.net/blog/2010/06/jquerycolorbox.html">http://www.dokuritsu-kigyo.net/blog/2010/06/jquerycolorbox.html</a><br />↑の2つのサイト様を参考にさせていただいています。<br /><br /><br /><span style="color:#cccccc">rel="lightbox" とかを入れなくても全部対応にできてかなり便利だなー<br />というか結構しっかりと記事を書いた、まぁ90%自分のための覚え書きですがw</span>
  • Date : 2011-09-12 (Mon)
  • Category : HTML,CSS
19

Webページ上にHTMLタグを表示する

Webページ上で「<s>打ち消し</s>」と表示させたい時、そのままタグを書いてしまうと「打ち消し」のようにタグが反映されてしまい記述できません。そのままのタグをページ上で表示したい場合は、特殊文字を使います。<: &lt;>: &gt;&: &amp;": &quot;(スペース): &nbsp;©: &copy;™: &trade;«: &#171;»: &#187;♡: &... Webページ上で「&lt;s&gt;打ち消し&lt;/s&gt;」と表示させたい時、<br />そのままタグを書いてしまうと「<s>打ち消し</s>」のようにタグが反映されてしまい記述できません。<br />そのままのタグをページ上で表示したい場合は、<b>特殊文字</b>を使います。<br /><br /><b>&lt;</b>: &amp;lt;<br /><b>&gt;</b>: &amp;gt;<br /><b>&amp;</b>: &amp;amp;<br /><b>&quot;</b>: &amp;quot;<br /><b>(スペース)</b>: &amp;nbsp;<br /><b>&copy;</b>: &amp;copy;<br /><b>&trade;</b>: &amp;trade;<br /><b>&#171;</b>: &amp;#171;<br /><b>&#187;</b>: &amp;#187;<br /><b>&#9825;</b>: &amp;#9825;<br /><b>&#9829;</b>: &amp;#9829;<br /><b>&#9824;</b>: &amp;#9824;<br /><b>&#9827;</b>: &amp;#9827;<br /><b>&#9830;</b>: &amp;#9830;<br /><b>&#10047;</b>: &amp;#10047;<br /><b>&#10022;</b>: &amp;#10022;<br /><b>&#10020;</b>: &amp;#10020;<br /><b>&#9787;</b>: &amp;#9787;<br /><b>&#10004;</b>: &amp;#10004;<br /><b>&#9745;</b>: &amp;#9745;<br /><b>&#9728;</b>: &amp;#9728;<br /><b>&#9729;</b>: &amp;#9729;<br /><b>&#9730;</b>: &amp;#9730;<br /><b>&#9640;</b>: &amp;#9740;<br /><b>&#12999;</b>: &amp;#12999;<br />
  • Date : 2011-07-10 (Sun)
  • Category : HTML,CSS
18

改行タグ BRが効かない場合の対処法

改行のBRを2つ入れて1行文のスペースを空けたいのに効かず、4つ入れてやっと1行分のスペースが空いた・・・そんな時の対処法。原因は、文字間を空けるためのletter-spacingを使っていること。このタグがあると、BRタグが正しく表示されないバグがあるようです。なのでletter-spacingを使うときには一緒にbr {letter-spacing: 0;}↑これも入れると直ります。いちいち<br><br><br><br>って書くのめんどかってん... 改行の<b>BR</b>を2つ入れて1行文のスペースを空けたいのに効かず、<br />4つ入れてやっと1行分のスペースが空いた・・・そんな時の対処法。<br />原因は、文字間を空けるための<b>letter-spacing</b>を使っていること。<br />このタグがあると、<b>BR</b>タグが正しく表示されないバグがあるようです。<br />なので<b>letter-spacing</b>を使うときには一緒に<br /><blockquote><p>br {<br />letter-spacing: 0;<br />}</p></blockquote><br />↑これも入れると直ります。<br /><br /><span style="color:#cccccc">いちいち&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;って書くのめんどかってん</span><br />
  • Date : 2011-07-10 (Sun)
  • Category : HTML,CSS
5

vertical-align:middle;が効かない時の対策

HTMLをいじっていると、垂直方向にセンタリングしようと思ってvertical-align:middle;を入れても効かないことがしばしば。原因は、vertical-alignが効くのはインライン要素とテーブルのセルのみであること。span img td などなどこの他の場所でvertical-align:middle;と同じ効果を得るには、heightとline-heightを同じ値にすればOK!height: 30px;line-height: 30px;これでdivとかpでも垂直方向にセンター寄せができるーオリジ... HTMLをいじっていると、垂直方向にセンタリングしようと思って<br /><u>vertical-align:middle;</u>を入れても効かないことがしばしば。<br />原因は、vertical-alignが効くのはインライン要素とテーブルのセルのみであること。<br /><u>span</u> <u>img</u> <u>td</u> などなど<br /><br />この他の場所でvertical-align:middle;と同じ効果を得るには、<br /><u>height</u>と<u>line-height</u>を同じ値にすればOK!<br /><br /><blockquote><p>height: 30px;<br />line-height: 30px;</p></blockquote><br /><br /><span style="color:#cccccc">これでdivとかpでも垂直方向にセンター寄せができるー</span><br /><br /><br /><div class="osusume"><ul style="list-style-type:square;width:300px;"><li style="border-bottom:dashed #99ddff 1px;padding-left:2px;"><a href="http://anigoo.blog98.fc2.com/blog-entry-29.html" title="オリジナルのスマホケースが作れるサービス">オリジナルのスマホケースが作れるサービス</a></li><li style="border-bottom:dashed #99ddff 1px;padding-left:2px;"><a href="http://anigoo.blog98.fc2.com/blog-entry-28.html" title="可愛いアバターのブラウザゲーム @games">可愛いアバターのブラウザゲーム @games</a></li><li style="border-bottom:dashed #99ddff 0px;padding-left:2px;"><a href="http://anigoo.blog98.fc2.com/blog-entry-41.html" title="ポイント制無しの無料デコメサイト">ポイント制無しの無料デコメサイト</a></li></ul></div><br /><br /><a href="http://h.accesstrade.net/sp/cc?rk=0100arip008301" target="_blank"><img src="http://h.accesstrade.net/sp/rr?rk=0100arip008301" alt="" border="0" /></a><br><a href="http://h.accesstrade.net/sp/cc?rk=010097b7008301" target="_blank"><img src="http://h.accesstrade.net/sp/rr?rk=010097b7008301" alt="" border="0" /></a><br><a href="http://h.accesstrade.net/sp/cc?rk=010060y1008301" target="_blank"><img src="http://h.accesstrade.net/sp/rr?rk=010060y1008301" alt="" border="0" /></a><br />
  • Date : 2011-06-26 (Sun)
  • Category : HTML,CSS
4

ソース内の半角スペース,改行を適応させる

brを使わなくてもソースの記述通りに表示させるタグ、PREのCSS版。ちなみにPREが無いと、半角スペースをいくつ入れても1つの半角スペースにしかならない。white-space: pre;タブと改行も適応されるっぽいので注意。まさにPREのCSS版。他の値との比較↓normal:  連続半角スペース・タブ・改行 → 1つの半角スペース  ボックスの横幅が決まっている場合 → 横幅に従って折り返されるnowrap:  連続半角スペース・タブ・改行... brを使わなくてもソースの記述通りに表示させるタグ、<u>PRE</u>のCSS版。<br />ちなみに<u>PRE</u>が無いと、半角スペースをいくつ入れても1つの半角スペースにしかならない。<br /><br /><blockquote>white-space: pre;</blockquote><br /><br />タブと改行も適応されるっぽいので注意。まさにPREのCSS版。<br />他の値との比較↓<br /><u>normal</u>:<br />  連続半角スペース・タブ・改行 → 1つの半角スペース<br />  ボックスの横幅が決まっている場合 → 横幅に従って折り返される<br /><u>nowrap</u>:<br />  連続半角スペース・タブ・改行 → 1つの半角スペース<br />  ボックスの横幅が決まっている場合 → 無視(nobrみたいな)<br /><u>pre</u>:<br />  連続半角スペース・タブ・改行 → そのまま適応<br />  ボックスの横幅が決まっている場合 → 無視(nobrみたいな)<br /><br /><span style="color:#cccccc">やっぱりnormalが無難かも。普段ならわざわざ指定する必要は無いけど、<br />BBSスキンをいじる時とかは入れると便利?<br />本文部分で改行入れられて投稿されても、改行を無効にできる。<br />normal → nobrのCSS版(普通)<br />nowrap → nobrのCSS版(最強)<br /><br />参考→http://www.htmq.com/style/white-space.shtml</span>
  • Date : 2011-06-26 (Sun)
  • Category : HTML,CSS
3

長すぎる文字列を「…」で省略して表示する

長すぎるタイトルを横幅を決めて「・・・」で省略させたい時のためのCSS。テキストが領域からはみ出ている場合の表示方法を指定するプロパティであるtext-overflowに、省略符号を表示する値であるellipsisを指定すればOK(ちなみに省略符号無しで省略する時はclip)white-spce:nowrap;は、改行が入っていても改行させないためにoverflow:hidden;は、text-overflow以前にはみ出た部分を表示させないためのもの.hamidasuna {text-overfl... 長すぎるタイトルを横幅を決めて「・・・」で省略させたい時のためのCSS。<br /><br />テキストが領域からはみ出ている場合の表示方法を指定するプロパティである<u>text-overflow</u>に、<br />省略符号を表示する値である<u>ellipsis</u>を指定すればOK<br />(ちなみに省略符号無しで省略する時は<u>clip</u>)<br /><br /><u>white-spce:nowrap;</u>は、改行が入っていても改行させないために<br /><u>overflow:hidden;</u>は、text-overflow以前にはみ出た部分を表示させないためのもの<br /><br /><blockquote>.hamidasuna {<br />text-overflow: ellipsis;<br />overflow: hidden;<br />width: 150px;<br />white-space: nowrap;<br />-webkit-text-overflow: ellipsis;<br />-o-text-overflow: ellipsis;<br />}</blockquote><br /><br /><span style="color:#cccccc">divとかspanでclass指定して使えばいいと思う!</span><br />
  • Date : 2011-06-26 (Sun)
  • Category : HTML,CSS
    Return to Pagetop
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。