WordPressのメデイア(画像)のリンクをデフォルトで無しに設定する方法

WordPress

お客さんのサイトでブログ機能を持たせるのに便利なWordpress。

もうけっこう当たり前に使っている人もいると思いますが、その当たり前も普段からWebやパソコンに慣れている人の話であって、Webの知識の無い人にとってはまだまだハードルの高いもののようです。

WordPressはいろいろな機能があって便利な反面、どこで設定するのかわからないものもあります。ブログを書いていると画像を配置することはよくありますが、メディア追加で画像の表示設定ができるこの部分。
僕は画像にリンクを付けないことが多いんですが、デフォルトでは「メディアファイル」が選択されるようになっています。

続きを読む

BackWPUpでWordPressのバックアップをMAMPに復元する

mamp_wordpress

WordPressのバックアップ内容を自由に設定でき、定期的に自動バックアップをとってくれるWordpressプラグイン「BackWPUp

個人的に一番うれしいのが、バックアップデータの保存先を選べること。
FTPにも保存出来るけど、なるべく分散しておきたいので、筆者はDropboxにバックアップデータを自動で保存されるように設定している。

バックアップを自動で行ってくれるのは安心できるが、いざ何か問題が起こった時にすぐに復元出来るのかと、ちょっと心配にならないだろうか。その時に慌てないために練習をしておきたいところ。

ということで今回はMacのローカル開発でよく使うMAMPにBackWPUpでとったバックアップデータを復元してみたいと思います。
ちなみに当サイトは独自SSLを行っているんですが、それによってつまずいた問題も紹介したいと思います。

続きを読む

エックスサーバーの無料独自SSLをWordPressに設定する方法

xserver_wordpress

2016年6月30日からエックスサーバーの全プランで独自SSLの無料提供が開始しました。
https://www.xserver.ne.jp/news_detail.php?view_id=2767

SSLにすることでサイト上で通信される情報が暗号化され、SSLになっていないサイトと比べて安全にデータの送受信が行われるようになります。

WordPressは基本的にブログとして使われることがほとんどですが、プラグインによってコーポレートサイトやネットショップとして使っている人はデータも安全に扱わなければなりません。
またWordpressはオープンソースなので、ハッキングされるリスクも自然と高くなります。それ防ぐためにもセキュリティ的に安心なSSLは導入した方がいいでしょう。

続きを読む

iPhoneでデベロッパーツール(Webインスペクタ)を使う方法

Webインスペクタをオンに

ホームページのコーディングをする時、表示が崩れている箇所をすぐにチェック出来るデベロッパーツール。どこがおかしいのか簡単にチェック出来る上、CSSをブラウザ上で修正、コンソールなども確認出来る便利なツールですが、iPhone上でもこのデベロッパーツールを使うことが出来るのでその方法を紹介します。

1, iPhoneをMacにコネクタで接続、MacでSafari起動

まずiPhoneとMacをコネクタで接続します。
iPhone上でデベロッパーツールを使うと書きましたが、厳密には「iPhoneで確認しながらMacでデベロッパーツールを操作する」といった感じです。Safariではデベロッパーツールのことを「Webインスペクタ」と言います。Webインスペクタを使うのにMacのSafariを起動しておきます。

2, iPhoneのWebインスペクタを設定

デフォルトの設定ではiPhoneのWebインスペクタの設定はオフになっていますので、それをオンにします。
iPhoneの「設定」から「Safari」を選択。

Safariを選択

「Safari」の中の「詳細」を選択。

「Safari」の中の「詳細」を選択

「詳細」の中にある「Webインスペクタ」をオンにしてください。

Webインスペクタをオンに

「詳細」の中にある「Webインスペクタ」をオンにしてください。
これで設定は完了です。

3, MacのSafariからデバイスを選択

iPhoneの設定が完了したら、iPhoneのSafariでチェックしたいページを開きます。
開いた状態でMacのSafariのメニューから「開発」をクリックします(あらかじめ環境設定で「メニューバーに”開発”メニューを表示」にチェックを入れておいてください)

MacのSafariの設定

すると現在接続されているiPhone名が表示され、その中にiPhoneのSafariで開いているページのURLが表示されているはずです(iPhoneのSafariで別ウィンドウがある場合、それも一覧で表示されます)

4, デベロッパーツール(Webインスペクタ)起動

URLの中からチェックしたいページのURLをクリックするとWebインスペクタが起動します。

Webインスペクタ

ソースにカーソルを合わせるとiPhoneでも対象の要素が選択されます。

Webインスペクタ

Webインスペクタ

一個残念なのが要素のMacと違って要素から選択が出来ないということ、一つ一つ折りたたまれたソースを開けていくのはちょっと面倒。

でもこれでiPhoneでのCSSの調整や修正がかなり効率的になるのではないでしょうか。

CSSで下線じゃなくマーカー風にテキストをハイライトする方法

テキストを目立たせたい時、よく文字サイズや文字色を変えたり、下線を付けたりします。
リアルの紙の場合、よく蛍光マーカーで色を付けたりしますが、あれをborderでは再現できません。

以前はbackground-imageを使って専用の画像を作っていましたが、CSS3の「linear-gradient属性」を使うことで、画像を使わずCSSだけで見せることが出来るので紹介します。

蛍光ペンでマーキングしたように見せることが出来る「linear-gradient属性」

transparentのパーセントを変えることで下半分だけマークすることも出来ます。