.htaccess による転送設定（リダイレクト）を設定する方法に関してです。ついつい何となくでやりくりしてしまう.htaccess における、mod_rewrite を使ったリダイレクトの正しい記述方法を、最新の Apache によるマニュアルを元に、まとめ直しました。 【はじめに】.htaccess とリダイレクト .htaccess とは？ 「.htaccess（エイチティーティーアクセス）」とは、Apache（アパッチ）と呼ばれるWebサーバーにおける、ディレクトリごとに個別設定を行うためのファイルです。Apache サーバーにおけるリダイレクトの設定は、通常、任意のディレクトリにこの .htaccess を配置して、そこに転送処理を書き込みこむ事が一般的です。 ディレクトリ単位での設定に便利 Apache Webサーバーでは、サーバー全体に適応する設定は「httpd.conf」と
何気なくプラグインやワードプレスを更新して、 サイトが表示されなくなってしまった…。 なんて状態になっていると気が気ではありませんよね。 今回は実体験にもとづいた、ワードプレスが表示されず５００エラーが表示されてしまった対処方法についてお話していきますので、ぜひ手順ややり方をご参考にしてください。 ワードプレスが表示されない原因は大きく２つ何気なくワードプレスをいじっていて、その作業をした境に 「ページが表示できません」 「青い画面に大きく５００の数字」 これが出てしまった場合にはワードプレスやサーバーでの設定でエラーを起こしている可能性があります。 こういった画像ですね。 その代表例としては、主に以下のものが挙げられます。 プラグインやワードプレス更新が影響しているサーバー内のデータ「.htaccess」に異常があるこの２つですね。 ケース１．プラグインやワードプレスの更新が影響している
HTMLコード記述例 <div class="radius1"> <p>四隅の角を10px丸くしています。</p> </div> <div class="radius2"> <p>四隅の角をそれぞれ丸くしています。</p> </div> 外部ファイルCSS記述例 @charset "utf-8"; div.radius1 { border: 5px solid green; border-radius: 10px; margin-right: 10px; width: 150px; height: 150px; padding: 10px; display: inline-block; } div.radius2 { border: 5px solid orange; border-radius: 10px 20px 30px 40px; width: 150px; height: 150
特定の要素やクラスの背景色を指定します。 詳しい説明はこちら。 ページ全体の背景色を変える 次のソースで、このように表示される。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ページタイトル</title> <style type="text/css"> <!-- body { background-color: red; } --> </style> </head> <body> </body> </html> 特定の要素やクラス名・ID名の背景色指定 次のソースで、このように表示される。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans
見出しのアクセントとしてよく使われるアイコン画像。 imgタグで表示させるよりもcssで書いたほうがメンテナンス性にも優れます。 センター寄せをする方法も含め、まとめておきます。 １．backgroundで表示する方法 cssでアイコン画像を表示させる一番スタンダードな方法です。 backgroundのプロパティ内容は場合によって変更して使いわけます。 html <h1 class="title">タイトルです</h1> テキストが１行の場合 CSS title { padding-left: 30px; line-height: 30px; background: url(../images/icon.png) no-repeat; } line-heightでアイコン画像とテキストの上下位置を中央にするテクニックです。 line-heightはアイコンの高さ分を指定し、 padding
マイ AdSense ページにはお客様のアカウントに特化した情報が表示されます。AdSense での成果向上にぜひご活用ください。 AdSense コードは、AdSense アカウントの [広告] ページで取得してコピーします。AdSense コードの生成方法は、自動広告と広告ユニットのどちらを使うかによって異なります。自動広告を使う場合に必要となるのは AdSense コードのみですが、広告ユニットを使う場合は AdSense コードに加えて広告ユニットコードも必要になります。 自動広告のコードを取得してコピーする方法 自動広告用の AdSense コードを生成するには、事前にサイト全体に自動広告を設定する必要があります。その設定が終わっている場合は、次の手順で AdSense コードを取得できます。 AdSense アカウントにログインします。 [広告] をクリックします。 [コードを
Googleフォトに画像を保存まず、GoogleフォトでWordPressから読み込むための共有アルバムを作り、そこに画像を保存します。 手順は、以下のとおりです。 WebブラウザからGoogleフォトにアクセスして、左メニューから「アルバム」をクリックします。 アルバム画面で「新しいアルバム」をクリックしてアルバムを作成します。 作成したアルバムを開いて、右上の「その他のオプション」メニューから「共有オプション」をクリックします。 以下の画像のように共有設定することで、アルバム画像を誰でも閲覧できるようになります。なお「共同編集」「コメント」はOFFにしておきます。 あとは、作成したアルバムに画像をドラッグ＆ドロップで登録するだけです。 記事に画像を挿入するときはGoogleフォトの共有アルバムに保存している画像を、記事に挿入するときは、Webブラウザで挿入したい画像を表示した状態で、画
少しずつ、20年程昔のノート『部屋へ』のテキスト化を進めている。ワープロ打ちしてプリントアウトしたものは残しているので、OCRでテキスト認識した後は、スキャニングした手書きの画像を挿入すればよい。しかしそれでも大変面倒な作業で、ACROBATでテキスト認識したデータをコピーペーストすると、改行文字が下図のように挿入されてしまい、一々改行文字を削除するのが煩わしくてならなかった。 ところがおかしいことに、単に改行されている場所でダブルクリックすれば改行コードが選択できるので、それを置換すればよいというネットで調べた情報に基づいて、改行文字を削除してみたところ、一度目こそできたものの、少し休憩を挟んで行なった二度目以降のそれがが全くできなくなってしまった。仕方なく、他のネット情報にしたがって、期待しないでエディタmi上で同じことをやってみたら成功した。 下図はエディタmiの改行コードが入ってい
オウンドメディアを運営するにあたって、何から始めればいいのか頭を悩ます人は多いと思います。また、どんなコンテンツを発信していくべきか、誰もが悩むことでしょう。 今回は、オウンドメディアを始めるにあたって、押さえておきたい考え方について、事例をもとに説明したいと思います。 ＼オウンドメディアを成功に導く！資料ダウンロードはこちらから／ これから紹介するのは、バズるコンテンツやPV（ページビュー）を稼ぐコンテンツの作り方といった小手先の施策ではなく、ユーザーと信頼関係を築くために欠かせない5つの条件です。 1：Honesty（顔が見えるか？） 2：Originality（オリジナリティがあるか？） 3：User First（ユーザーの役に立つか？） 4：Reliability（信頼性があるか？） 5：Strategy（長期的な戦略か？） それぞれの条件の頭文字を取って「HOURS」の条件と覚え
強調スニペットに表示されるような強力なコンテンツを実際に作るには、どんな考え方で、どう執筆していけばいいのだろうか。それは、「逆ピラミッド型」のコンテンツだ。 もしあなたが、強調スニペット向けのコンテンツを執筆する手軽なテクニックを探しているのなら、この記事は適していない。なぜなら、そんな手軽に実現できる手法ではないからだ。 しかし、スニペットを獲得するチャンスを高めるために持続的な結果とスマートな戦術を探している人には、間違いなく最適な記事だ。 ジャーナリズムの世界から拝借した逆ピラミッドの執筆方法は、意図に沿った、説得力のあるリッチなコンテンツを作成する助けになる。こうしたコンテンツは、複数のクエリに対して検索結果に表示させ、一度に複数のスニペットを獲得するのに役立つだろう。 唯一無二の存在であるドクター・ピートが登場する今回のホワイトボード・フライデーで、その方法を学ぼう！ Mozフ
Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。 Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリです。GitHub（ https://github.com/Microsoft/ailab/tree/master/Sketch2Code ）で公開されているので、確認することができます。行っている処理は以下の通り。 1. ユーザはWebに画像（手書きワイヤーフレ
当社はゲームに近いプロセスでウェブサイトを作成できる新たな手法を考案しました。 これで、自分のビジネスに情熱を注ぐ人は誰でもデザイナーになることができます。 ウェブサイト、オンラインストア、ランディングページ。Tilda を使えばどんなサイトでも素早く簡単に作成できます。
Webサイト(HTML)をスマートフォンに対応させる方法について説明したページです。本格的にレスポンシブウェブデザインに対応するのは難しいかもしれませんが、できるだけ簡単にスマートフォンに対応するサイトの作り方を説明しています。 <head>部に下の１文を入れ込むだけで、文字がモバイルでもそれ用の大きさで表示される。これだけでもう半分以上やりたいことは済んだ。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> あとはページ幅をモバイル用にするくらいでよい。それに関してはモバイル用の css を作って次のように書く。本文部分は #main という id を設定してあるので、それを使って若干左右に余白を設けた。 body { width: auto; -webkit-text-size-adjust: 1
type属性の値には、使用する画像のMIMEタイプを指定します。 例えば、ファビコンで使用する画像がICO形式で作成されている場合は、以下のように記述します。 type="image/vnd.microsoft.icon" ファビコンで使用する画像は、ICO形式で作成するのが一般的です。（IEがこの画像形式にしか対応していないので） ファビコンの表示例 使用例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
わが社でもオウンドメディアを始めたい。 ぜひ君に、担当者として立ち上げを任せたい。 よろしくたのむよ！ こんな風に、いきなりオウンドメディアの担当者に抜擢されたら、何から始めればよいかわからず困ってしまうのではないだろうか。 コンテンツマーケティングの有用性が広く理解され、さまざまな企業がオウンドメディアを立ち上げるようになった。それにともない、メディア運営やコンテンツ制作の経験がない人が担当者になるというケースも増えている。 メディア運営って、何が必要なの？ 自分で書く？ それともライターに依頼する？ どうやって探せばいいの？ 必要な人員や予算の見当がつかない……。 もし、「もともとオウンドメディアをやってみたかった」という方なら、目標や参考にしているメディアがあるだろうし、作ってみたいコンテンツのイメージを持っているかもしれない。それでも、何もないところからの立ち上げでやるべきことをす
<path opacity="0" d="M0 0h24v24H0z" /> <path d="M17.207 11.293l-7.5-7.5c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L15.086 12l-6.793 6.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-arrow-left="<svg width="28px" height="28px" viewbox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
【この記事を読むのに必要な時間は約 9 分です。】 ライブドアブログは無料版で利用している。テンプレートを変更すると、それまで使用していたテンプレートのカスタマイズが適用されないので、面倒だった＞＜ 本日、ライブドアブログでテンプレートを変更したので、カスタマイズを再設定したついでに、カスタマイズしているところを紹介していきたいと思う。 まずは、定番の上へ戻るボタンの設置について２種類ほど説明したい。どちらも一定量スクロールすると表示されるパターン。 1.JqueryプラグインとCSSで作る上へ戻るボタン 定番中の定番。こちらのjQueryでページの「トップに戻る」ボタンを実装。スクロールに応じてフェードイン・アウト[WordPress]という記事を参考にさせて頂いた。もちろんWordPressでなくても全く問題なく動作する。 ヘッダー部分への記載 <head>と</head>の間にJqu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
