Category Archives : ホームページ作成

JavaScriptだけでsqliteのDBへクエリ実行 - 2022/11/05(Sat)
ドラクエウォーク攻略（https://dqw.ek-pro.com/）のサイトで、能力などでこころ検索をしたいなぁ、と考えていた。そこにドラクエウォークで新しく実装されたこころ道で、条件に合致するこころの装備が必要になったため、より一層検索が欲しくなった。だけれども、検索をサーバサイドではなく、クライアントサイド、JavaScriptで実装したい、でもDBがsqlite、CSVで検索は速度がどうだろうなぁ、と思ってていた。色々と調べたところ...
Bootstrap4からBootstrap5へバージョンアップ - 2022/03/23(Wed)
Bootstrap4からBootstrap5（5.1.2）へ移行してみました。自分のウェブサイトではそんなに手間はなかったです。■scriptタグで読み込む bootstrap.bundle.min.js を変更。■styleタグで読み込む bootstrapのcss を最新へ変更。■cssの変更（追加）。a 要素がブラウザのデフォルトスタイルが適用、つまりアンダーラインが表示されるようになった点の修正と、パンくずリストのスタイルが無くなった（？）点について、bootstrap4の方のcss...
CSSのcontentで絵文字（emoji）を使う - 2020/03/23(Mon)
ホームページを作っているときや、ブログを書いているときに、アイキャッチ、またはアイコンとして、ちょっとした装飾をリスト（UL）や定義文（DL）に追加したい、ということは割とよくあることだと思います。 でもそのために画像を用意するのはちょっと面倒くさい、ということも割とよくあることだと思います。 そこで、そのアイキャッチ・アイコンに、絵文字を使う、というのはどうでしょうか。 絵文字（emoji）は2009年3...
jQuery 3 でfadeInとfadeOutが使えない対策CSS - 2018/08/15(Wed)
ドラクエ攻略FAQ（https://www.dqfaq.com/）のデザインをBootstrapを使って更新しようとしています。せっかく新しくするのだからBootstrap4をもとに作成しているのですが、そのバージョンではjQuery3系が利用されています。そして、jQuery3ではfadeInとfadeOutが効かず、使えなくなっていることに気づきました、今更ながら。ということで、なんとか「fadeInとfadeOutが使えなくなった」問題に対処しようと思い、はじめはjavascript...
FTPアップロード時にファイル名の文字コードを変換する - 2018/04/26(Thu)
日本語ファイル名のファイルをWEBサーバにアップロードして、そこから日本語ファイル名のままファイルをダウンロードさせたい、アクセスさせたい、ということは割とよくあると思います。よくわからない文字列に変換されてしまうと、サーバーからも探しにくいですし。で、ローカルはWindows、でもWEBサーバはLinux、という割とよくあるパターンの場合、Windowsのファイル名の文字コードはShift_JIS、Linux側のファイル名の文字コー...
Apache2.4でバーチャルホストに自己証明書を入れる方法（その２） - 2018/04/08(Sun)
Apache2.4でバーチャルホストに自己証明書を入れる方法（その１）からの続きです。前回作成したSSL証明書を使ってWEBサーバを起動します。...
Apache2.4でバーチャルホストに自己証明書を入れる方法（その１） - 2018/04/08(Sun)
さくらのレンタルサーバーで動かしている ドラクエ攻略FAQ はfswikiを使っているのですが、この度バージョンアップがあったので、サーバー側もバージョンアップすることにしました。せっかくなので、同じく古いままになっていたローカル環境もアップデート、というかxamppを再セットアップしました。また、dqfaqはさくら、というかLet’s Encrypt が提供してるSSLサーバー証明書を使ってHTTPSでアクセスできるようにしているので、...
Bootstrap を 文字コードShift_JISで使うと Glyphicons が使えない - 2017/05/27(Sat)
タイトルの通りなのですが、Bootstrap を 文字コードShift_JISで使うと Glyphicons が使えないです。色々苦労したけど全くうまくいかないので、忘れて苦労しないようの備忘録。UTF-8でにすればいいのですが、さくらのブログの文字コードがShift_JISなんですよね。辛い。...
謎のUserAgent - 2017/01/27(Fri)
MobileSafari/602.1 CFNetwork/808.2.16 Darwin/16.3.0というUserAgent（UA）で結構なアクセスログがあるんですけど、これって何なんだろう・・・。おそらくクローラーかbotだとは思うのですが、正体不明。...
日本語ファイル名のHTMLファイルを使う。注意点など - 2015/01/15(Thu)
今更ながら、ではありますが、ファイル名が日本語のHTMLファイルを使ったときの注意点などをメモしておきます。自分用。「日本語のHTMLファイル」というのは、「http://ek-pro.com/テスト.html」みたいな話のことです。Wikipediaのように、URL欄に「http://ja.wikipedia.org/wiki/ウィキペディア」と表示させたい、と思ったのがきっかけです。挙動を理解するまで手間取ったので、備忘録代わりに残しておきます。...
さくらのブログのテンプレートを整形 - 2014/11/04(Tue)
別ブログ（ピリオドの彼方に）でさくらのブログを使用しています。テンプレートをカスタマイズしようとしたところ、デフォルトのHTMLテンプレートが極めて見づらい状態であったため、適切にインデントを入力・改行を追加することにより、整形を行いました。かなり見やすくなっている…はず。以下のリンクからダウンロードできます。http://blog-imgs-47.fc2.com/k/o/m/komitsudo/sakura_blog_template_html.txt→基本のHTMLテンプレ...
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)
ブログに限らず、ウェブサイトにおいてメニューはどの位置に付けるのが最適なのでしょうか。...
画像と画像、文字を並べて表示する方法 - 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)
以下の画像の通り、コンテンツとブラウザの境界面にに影（ドロップシャドウ）を付ける方法です。ちょっとしたところで、あまり目立ちはしませんが、こういうふうに影をつけるだけで、立体感がでてかなりいい感じになります。...
ウェブサイトをFTPを利用し自動でバックアップ - 2013/04/09(Tue)
データ消失の悪夢が発生したときに備え、ウェブサイトのバックアップは必要です。…とは思いながら、なかなかできていないのが現実。理由は単純で、面倒くさいから。何が面倒かというと、いちいち手で操作してあげる必要があるところです。ということで、無料で自動化かつ定例化し、そんな面倒とおさらばする方法の備忘録。なお、定例化する方法は割愛してます。タスクマネージャーへの登録だけのため。一番手間がかかった「バッチ...