Tag Archives : ホームページ作成

jQuery 3 でfadeInとfadeOutが使えない対策CSS - 2018/08/15(Wed)
ドラクエ攻略FAQ（https://www.dqfaq.com/）のデザインをBootstrapを使って更新しようとしています。せっかく新しくするのだからBootstrap4をもとに作成しているのですが、そのバージョンではjQuery3系が利用されています。そして、jQuery3ではfadeInとfadeOutが効かず、使えなくなっていることに気づきました、今更ながら。ということで、なんとか「fadeInとfadeOutが使えなくなった」問題に対処しようと思い、はじめはjavascript...
URLの一部をリアルタイムに書き換える - 2016/02/12(Fri)
URLの一部をリアルタイムに書き換えたい、ということがあって、調べてみました。WEBページ上での操作をローカルストレージ（localStorage：https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage）に保存させていたのですが、それだと端末が変わるとその内容を引き継げない、という使い勝手でイマイチな部分がありました。このご時世、流石にスマホでやった内容がパソコンでも引き継げる、というのは、まあ、普通で...
日本語ファイル名のHTMLファイルを使う。注意点など - 2015/01/15(Thu)
今更ながら、ではありますが、ファイル名が日本語のHTMLファイルを使ったときの注意点などをメモしておきます。自分用。「日本語のHTMLファイル」というのは、「http://ek-pro.com/テスト.html」みたいな話のことです。Wikipediaのように、URL欄に「http://ja.wikipedia.org/wiki/ウィキペディア」と表示させたい、と思ったのがきっかけです。挙動を理解するまで手間取ったので、備忘録代わりに残しておきます。...
検索ボックス（input）の全角スペースを半角スペースに置換する - 2014/12/16(Tue)
Wordpressなどの検索ボックス（検索フォーム）において、半角スペースは"AND"検索ですが、全角スペースを入れるとひとつの単語とみなされて検索されることが有ります。例えば、「javascript input 空白」なら「javascript」「input」「空白」のAND検索ですが、「javascript　input　空白」だと「javascript　input　空白」という文字列の検索になってしまい、入力者が意図とはことなる結果が返ってきます。これはあまりよろしくな...
addthisでtwitterボタンをクリックしたときURLに文字列を追加させない方法 - 2014/06/22(Sun)
ソーシャルボタンを簡単に作成できる便利なサービス、addthis。以下のようなコード（2014/06/22時点）で簡単にソーシャルボタンをブログなどに追加できます。<!-- Go to www.addthis.com/dashboard to customize your tools --><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=XXXXXXXX"></script><!-- Go to www.addthis.com/dashboard to customize your tools --&g...
リンク（アンカー）に index.html は必要か否か - 2013/07/12(Fri)
「リンクに index.html は必要か」というのは、自分のホームページ内で、例えばトップページにもどるリンク、言い変えればアンカー（<a href=～）にindex.htmlまでつけるのか否か、という疑問です。つまり、サブディレクトリからトップページに戻るアンカータグは、<a href="../index.html">と、<a href="../">のどちらが良いのか、ということです。...
FC2ブログでのfavicon設定方法（含：favicon作成方法） - 2013/06/30(Sun)
このブログ（高密度商業地域）を開始してからかなりの年月が流れたのですが、faviconを設定せず、ずっとFC2ブログ標準のfaviconが表示されていました。さすがにこれはイカン、と思い、faviconを設定しました。【Favicon】Favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。Favorite icon（フェイバリット・アイコン：お気...
ウェブサイト作成にあたりよく使うサイトのまとめ - 2013/06/29(Sat)
LZ77 JavaScript CompressorJavaScriptの圧縮。結果として難読化される。/packer/JavaScriptの圧縮。コメント、改行、タブ・スペースの削除だけならこちら。HeartRails Capture | サムネイル画像／PDF ファイル作成サービス縦・横のサイズを1px単位で調整可能な、ウェブサイトのスクリーンショット自動作成サイト。YUI 3Yahoo!'s next-generation JavaScript and CSS library.「CSS Reset」と「CSS Fonts」は大変便利。Google Libr...
画像と画像、文字を並べて表示する方法 - 2013/06/26(Wed)
FC2ブログで、記事中に画像を表示させようとした場合、標準機能を使って行うと、下記のようなHTMLコードが書かれます。<a href="http://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" target="_blank"><img src="http://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0"></a><br clear="all">※『href=""』と『src=""』...
ソースコードをハイライトする google-code-prettify の設置方法 - 2013/06/22(Sat)
この「高密度商業地域」のように、HTMLやCSS、JavaScriptのコードをブログに掲載する際、単純に<pre>タグで囲うだけでも良いのですが、ソースコードの可読性を上げたり見た目をカッコよくしたいと思うことが稀によくあると思います。世の中には同じようなことを思う方がたくさんいるわけで、いわゆるテキストエディタのようなかたちでソースコードをハイライトし、可読性を高めてくれるツールが存在します。その手のツールで...
ブラウザとの境界面に影（シャドウ）を付ける方法 - 2013/06/21(Fri)
以下の画像の通り、コンテンツとブラウザの境界面にに影（ドロップシャドウ）を付ける方法です。ちょっとしたところで、あまり目立ちはしませんが、こういうふうに影をつけるだけで、立体感がでてかなりいい感じになります。...
FSWikiのカウンタリセット対策 - 2013/06/14(Fri)
たびたびdqfaq.comで利用してるFSWiki（FreeStyle Wiki）のカウンタがリセットされるので、標準（？）のカウンタプラグインを少し変更しました。…というよりも、ほぼサンプルコードによるPerl入門さんの「順番を守ってファイルを読み書きする - flock関数」の流用です。すいません、ありがとうございます。...
ウェブサイトをFTPを利用し自動でバックアップ - 2013/04/09(Tue)
データ消失の悪夢が発生したときに備え、ウェブサイトのバックアップは必要です。…とは思いながら、なかなかできていないのが現実。理由は単純で、面倒くさいから。何が面倒かというと、いちいち手で操作してあげる必要があるところです。ということで、無料で自動化かつ定例化し、そんな面倒とおさらばする方法の備忘録。なお、定例化する方法は割愛してます。タスクマネージャーへの登録だけのため。一番手間がかかった「バッチ...
IEでネガティブマージンをした際にボーダー等が消えてしまうときの対処方法 - 2012/07/26(Thu)
Internet Explorerでネガティブマージン（maring-top: -10px等）を指定した際に、その部分が消えてしまう場合の対象方法の備忘録です。例えば、「bordre: 1px solid #000; margin-top:-5px」の場合は、上側のボーダーが消えてしまう場合、などです。（１）単に重なりあいの問題なら、z-indexを追加する。（２）その要素に「position:relative;」を追加する。（３）それでもダメなら、「zoom: 1」を追加してhasLayoutをtrueにする。...
textContent と innerText の挙動の違い - 2012/07/16(Mon)
JavaScriptにおいて、ある特定エレメントのテキスト部分を取り出すプロパティとして、「textContent」「innerText」があります。前者はW3Cで規定されている標準のプロパティ、後者はInternet Explorer独自の拡張機能です。これらが全く同じ動作をするのか、といえばそうではなく、その挙動でハマったのでメモ。いやー、XMLの仕様まで読むことになるとは思っていませんでした……。実現したかったことは、ブログテンプレート作成の際...
WordPress 「最近の投稿」に日付を追加する - 2012/06/02(Sat)
WordPressの「最近の投稿」は、デフォルトで入っているウィジェットの場合、日付が表示されません。日付を表示するオプションもありませんので、以下のように日付を追加する場合、直接サイドバーの部分に日付つきの「最近の投稿」を表示するコードを追記する、または、プラグインを追加する、という方法があります。直接サイドバーにコードを書くのは美しくないので、今回は、「Executable PHP widget」という、PHPコードを記述・...
ウィジェットの作り方メモ（WordPress） - 2012/04/30(Mon)
WordPressでCompact Monthly Archiveを使おうとしたが、「default-widgets.php」は編集せず、テーマも編集せず、ウィジェットを追加する方法のメモです。コアファイルを触ってしまうと、後で大変なので……。【Compact Monthly Archiveを使う】「default-widgets.php」でアーカイブを出力している部分、つまり「WP_Widget_Archives」クラスを修正する方法もありますが、コアファイルは触りたくないので、この方法はNG。なので、「WP_...
jQueryで擬似フレーム - 2011/02/25(Fri)
かなり前に作成していた擬似フレームですが、この度、大いにやる気が出たので作成しなおしてみることにします。前回は特にJavaScriptのライブラリを使わず実装しましたが、今回はjQueryを使用してみたいと思います。以下の３点を実現することを目標とした擬似フレームを作成しますjQueryを使うことでコードを簡単にする。ヘッダー、フッター、メニューが指定可能。JavaScriptのみで制御しているため、実装が簡単（別途のCSSファイ...
新テンプレート flowerfestival_2c_r - 2010/08/13(Fri)
新しいテンプレート「flowerfestival_2c_r」を作成しました！！表示イメージは以下のとおり。...
iモードブラウザがJavaScript、Cookie、リファラに対応＋α - 2009/05/20(Wed)
NTTドコモが2009年夏モデルに18機種を発表しました。例によって、ソニーエリクソン携帯（SOシリーズ）は発表されなかったので、SO902から買い換えることはなさそうですが、ホームページを作る側からすると重大な変更が発表されました。iモードブラウザがJavaScript、Cookie、リファラに対応するということです（iモードブラウザの機能拡充について）。また、ページ内のテキストがコピーできるようにもなるとのこと。...