投稿

ラベル(website)が付いた投稿を表示しています

初心者がWordpressをインストールしてやらかしたお話

イメージ
一度はWordpressを設定してみたいと思いながら過ぎ去ること幾数年、今回ついに思い立ってやってみることにした。しかし案の定、迷いに迷い遂にはやらかしてしまったことがあったので、これから挑戦しようと考えている方へ、注意喚起と備忘録を兼ねてここに報告したい。 現在レンタルサーバーは「 さくらインターネット 」で「 さくらのレンタルサーバ スタンダード 」を借りているので、さくらインターネットでの設定方法でのお話になることはご寛恕いただきたい。 また、さくらインターネットでのWordpressのインストール方法等は、ネット検索をかけると山のようにあるので、好みの情報を参考にするようにお願いする。(検索ワード「 Wordpress さくらインターネット 」で結構な数見つかるはず) で、やらかした件だが、さくらインターネットの場合、「サーバコントロールパネル」からWordpressをインストールするのだが、その画面は以下のようになっている。 まず上記画像のAに自分が保有しているドメイン(例:https://www.example.com/)を入力する。そしてBを選択してサブディレクトリ、つまりWordpressをドメインにぶら下げておく階層を新たに設定する、という流れである。 だけども何をどうしたのか今となっては不明だが、Bの設定がうまく行かずに、ドメインにそのままWordpressをインストールするという事態に陥ってしまったのである。 本来ドメインには、自身のwebsiteがあったのだが、それがWordpressに差し替わってしまってwebsiteが行方知れずになってしまったのである。 Wordpressをインストールしていろいろな設定をある程度まで済ましてから気付いたので、虚無感が半端なかったのである。 せっかくインストールしたWordpressをアンインストールするはめになり、またさい者からやり直しと相成りました。 皆さん、お気をつけくださいませ。 それから、今回は さくらインターネット でのWordpressのインストールについて話したが、新規で借りる場合は「 wordpress レンタルサーバー 比較 」でネット検索かけることをオススメする。Wordpressはサーバーに負担がかかってくるらしいので、なるべく性能の...

jQueryのhoverで文字色をふんわり変える効果をつけると、ページ読込完了後の最初のマウスホバーでふんわり変わらない件と代替方法

イメージ
今までのウェブ制作で、jQueryのhoverを使って文字色をふんわり変える効果をつけていたところ、どうもページ読込完了後の最初のマウスホバーでふんわり変わらないことに気付いた。これはjQueryのhover内の始めのfunction(マウスホバー時の関数に当たる)でアニメーション時間を遅くした時に出くわしたもので、それ以後ひじょ〜に気になって仕方が無いのでその解消方法を探してみたら、CSS3を使えば良さそうだということがわかったので以下にチョットだけ解説を。 1. jQueryのhoverで文字色をふんわり変える コードはいつもこんな感じのものを使っている。 $(function(){ $("a").hover( function () { $(this).stop().animate({color: "任意の色A"}, 500); }, function() { $(this).stop().animate({color: "任意の色B" }, 500); } ); }); jQueryのhoverは、対応ブラウザが多いのだが、ページ読込完了後の最初のマウスホバーではアニメーションが効かないようだ。この現象は、特に、CSSにもa:hoverを同時に指定している場合に起こる現象のようだ。 対応策としては、CSSのa:hoverでの指定はしないことで、アニメーションが効かない現象は解消されるが、これだとjQueryが読込めない時にa:hoverが出来なくなる、という欠点がある。 2. CSS3のtransitionで文字色をふんわり変える 通常のリンク色とマウスホバー時の色指定はこんな感じ。 a {color: 任意の色A;} a:hover {color: 任意の色B;} CSS3のtransitionの対応ブラウザは、IEがver10のみで、他のブラウザもベンダープレフィックスでの対応となっている。 しかし1.と違い、ページ読込み完了時の最初のマウスホバーでも効く。 なぜなら、CSSのa:hoverはそのままで、aに a { color: #000; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-...

jQueryでline-height値を取得する時、IEだけ返り値が違う

イメージ
とあるCSSで body { font-size: 12px; line-height: 2; } と指定し、jQueryにてline-heightの値を取得する時、 var lineHeight = parseFloat($("body").css("line-height")); とすると、通常「24」と、 font-size*line-height が内部計算された数値が返される(parseFloatは文字列を数値に変換する関数。parseFloat関数なしだと「24px」と単位付きの文字列が返される)。しかし、 IEではCSSでline-heightに指定した値「2」がそのまま返されて他のブラウザと異なる結果となり 非常に困る。それ故ブラウザ判別のスクリプトが必要になる(ホンマにメンドイ)。 var userAgent = window.navigator.userAgent.toLowerCase(); var appVersion = window.navigator.appVersion.toLowerCase(); if (userAgent.indexOf('msie') != -1) { if (appVersion.indexOf('msie 6.') != -1) { //ie6のとき var getStyle = $("body")[0].currentStyle || document.defaultView.getComputedStyle($("body")[0], ''); var lineHeight = getStyle.lineHeight*parseFloat($("body").css("font-size")); var bHeight = Math.round(lineHeight) } else if (appVersion.indexOf('msie 7.') != -1) {//ie7のとき var getStyle = ...

上下に展開・格納する縦型メニューjQueryの簡略化に成功

イメージ
現在拙サイト・ブログ等で使用中の「上下に展開・格納する縦型メニューjQuery」はかなり煩雑で、今回整理して簡略化させることに成功。 縦型メニューのHTML <ul> <li> <span id="accordion01" class="accordion" >news</span> (ここに「+」または「−」が挿入される) <ul id="subNavi01" class="subNavi" > <li><a href="#">ESZETT</a></li> <li><a href="#">TYPŒ</a></li> <li><a href="#">LETTER-PRESS</a></li> </ul> </li> <li> <span id="accordion02" class="accordion" >works</span> (ここに「+」または「−」が挿入される) <ul id="subNavi02" class="subNavi" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> </ul> </li> <li> <span id="accordion03" ...

縦型メニュー展開・収納時(開閉時)にメニュー横の+−表示が切替るjQuery

イメージ
今回の 拙サイト 全面改修の際追加したメニュー横の+−表示が切替るjQueryの詳説をば。 実際どのようなものかは、この拙ブログのサイドメニューも同じ仕様なのでご覧あれ。 メニュー右に「+」を追加して、メニュー展開時にこれが「−」に変わり、メニュー収納時にまた「+」になるようなメニュー展開・収納jQuery。この「+」「−」はいわば飾りなのでHTML上には書きたくない、しかしjQueryの特性上、CSSの疑似要素〔:after〕をセレクターとして呼べないこともあって、「+」「−」の切替え方に難儀。当初、〔toggle(fn1, fn2, ..., fnN)〕を使用しようと考えたがjQuery 1.9からこれが廃止されたことを知り愕然。(詳細は jQuery Core 1.9 Upgrade Guide | jQuery を参照) 他に手はないかと色々調べた結果、jQueryの〔 after() 〕と〔 replaceWith() 〕が使えそうと判断。〔after()〕は指定したセレクターの後ろにHTML文字列などを挿入するもの、〔replaceWith()〕は指定したセレクターのHTML文字列などを置換するもの。この2つを組み合わせて「+」「−」の切替えを可能にした。 以下に使用例を。 HTML <ul> <li><span id="accordion02" >works</span> <ul id="subNavi02" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> <li><a href="#">letter carving</a></li> </ul> </li> ...

何回目かのウェブサイト全面リニューアル

イメージ
ちょっと思うところあって7回目の 拙サイト 全面改修を挙行。 今回は見映えなどの大幅変更というよりも細かい箇所の改装が主目的だったが、構造見直しのためHTMLは全取っ替え。以下に今回の改修点を列挙。 横幅を960pxから1200pxへ ヘッダおよびサイドメニューの固定化 不要になったページの削除 「上に戻る」ボタンの削除 メニュー展開時のアイコンのアニメ追加 文字詰めjQueryの追加 横幅変更 横幅は現状1200pxでも大丈夫と(勝手に)判断し変更。そのついでに今まで左寄せにしていたレイアウトを左右中心揃えに。そのTIPSはネット上に沢山転がっているので割愛。 サイドメニュー固定 ウェブ、ショウジン さんの記事「 サイドメニューとフッターメニューをCSSのposition:fixedで固定する例 *一応「IE6」もいける。 」を参考にした。深謝! サイドメニューに該当するCSS #side { width: 100%; float:left; position: fixed; overflow: auto; background-image: url("../images/common/eszett_logo01.jpg"); background-repeat: no-repeat; background-position: 3.6rem top; } #sideWrapper {width: 180px;} 上記赤字の「position: fixed;」を追加することでサイドメニューは固定される。 そして、今回の密かな目玉である「eſzett」ロゴを背景に追加しこれもサイドメニューと共に固定させるために、上記青字を追加。幅100%はサイト全体の横幅に対する設定で、これにより背景ロゴはサイドメニューに設定しているにも関わらず中途で切れずに(サイドメニュー自体は#sideWrapperにて幅180pxに設定)表示される。 コンテンツ部分のCSS #main { width: 900px; float: right; overflow: auto; position: relative; margin-bottom: 6rem; } コンテンツ部分のCSSにて、赤字の「float: r...