イクライフログ

旅好きクリエーターいくらによる旅・バイク・仕事・資産運用・節約・変形股関節
new最新記事
このブログのデザインを少しいじりました

ビフォアー/アフター

 

 

大きくはかえていないのだけど、記事幅広げたり文字サイズ調整したり、パーツの位置を変えたりとか。

前回デザインをいじったのが2014年9月だったもよう。

それ以来にhtml/cssをいじったことになる。

 

Webの仕事に転職する前の、Web素人時代。

divが使えずテーブルタグ使いまくり。青臭いコーディング。

今なら、当時より意図通り自由自在にcssを組める。

自分の成長を感じた。

 

バイクに乗り始めるので、バイク関連コンテンツを乗せていきたいなと考えてのブログいじり。

ほんとはWebページをつくりたいんだけど、運用続ける自信なく。

まずはこの既存部ブログに追加する形ですすめていくことに。

さらにいうとWordpressとかにしたいんだけど。Jugemブログはスマホ表示がダメすぎる。

でも15年もためてきたこのブログ記事が尊くて。

 



| いくら | Webライフ | comments(0) | - | 01:02
さよならYahooブログ

Yahooブログが2019年12月15日でサービスを終了するとか。2005年1月ごろにサービスがスタート、私が利用を開始したのは2005年6月。面白くて夢中で更新したり、ほかのブロガーさんとからんだり、楽しい時間を過ごさせてもらった。

でも1年ほどたった2006年6月を最後に更新することもなくなりずっと放置していた。

 

ひとつの時代が終わる感。さみしいねぇ。

データは移行しないと消えるということで、取り急ぎ移行することにしてさっき作業した。ツールで簡単に移行できるようになっていた。さすが。移行先は4択で、内3つはすでにアカウント持っていたのでどこでもいいちゃいいんだけど、4つの中では比較的好印象をもっていたはてなブログに移管することに。はてなはIDは持っていたのでブログだけ新規開設してボタン一つでデータ移行完了。

https://ikuranet.hatenablog.com/

 

13年も前の記事を読み返すと、なんとまぁ懐かしい事!これはタイムカプセル。昔の自分にちょっと元気をもらった。

ちなみにこのブログを始めたのは 2005/02/23。Yahooブログよりこちらが先で、一番初めに造ったのがこのブログなんだよね。記事自体は2004年10月からあるけど過去にさかのぼって記事を書いたから。

かれこれ14年。これまでもいろんなブログサービスが閉鎖していた。長い事サービスを続けるってすごい事。

 



| いくら | Webライフ | comments(0) | - | 23:24
WEBサイト再構築

いろいろやり散らかしてここ数年は放置していたWEBサイトを、本気でちょっとテコ入れすることにした。

転職して1年経ってちょっと落ち着いたというのもある。

それから2度の転職をしたこの約3年間でかなりがっつりWEBを実戦で学びスキルを身に着けたというのも理由。

あと今まで作ってきたWEBサイトが、今の自分には合わなくなってきたというのもある。

今、私が作りたいWEBサイトを、今まで身に着けたスキルを総動員してゼロベースで作り直す。

 

サーバーとドメインだけはずっと維持してきた。

久しぶりにちゃんと見直してみると、いろいろ機能が変わっていて面食らう。

サーバー側の設定、ドメイン側の設定、DNSやらphpのバージョンやらSSLやらと、やらなくてはいけないことが溜まっていた。

こりゃほねがおれる。

5年前くらいに勉強のために入れたWordpress、これを活用しようと進めてたのだけど、いろいろ問題があって挫折した。

サブディレクトリのURLで構築されているのが一番の問題。

Wordpressは最初の設定が超重要と再認識。やむなく、新しく入れなおすことにした。

使用しているロリポップサーバー、いろいろ進化しててwordpressも複数簡単に入れることができる、っていうのが助かった。

サブドメイン運用するべく調整して改めてインストール。これまたちょっとてこずったのが昨夜。

いろいろ調べて何とか解決。

 

今回やったこと

・Wordpressの新規インストール(ロリポサーバーには複数入れることができる)

・新規サブドメイン設定

・ドメインのDNS設定調整(ムームードメイン管理画面から)

・SSL対応(ロリポ無料版)

・パーマリンク設定(重要!)・・・さんざん悩んでカテゴリー/post-IDにした。投稿日は入れないほうがいいと判断

・プラグイン「Contact Form 7」の導入(お問い合わせフォーム)(参考

・プラグイン「Really Simple SSL 」で簡単SSL対応(ほんとに簡単!)

・テーマCOREの導入とセッティング

・ロリポップサーバーのWAF設定調整-テーマの設定で403エラーが出たのはこれが原因だった(参考

・WPの引越しプラグイン「All-in-One WP Migration」は挫折。移設元のWPがマルチになってたので無料版は使用できず。

 

 

 



| いくら | Webライフ | comments(0) | - | 23:59
WordPress調整ひきつづき

昨年8月に開設したWordpressページに仕込んだはずのアナリティクスタグがみあたらない。

あれれ?入れたはず。アナリティクス設置用プラグインは入っているけど有効化されていなくて、遠い記憶をたどるかぎり、プラグインは使わずにphpに直接張り込んだ記憶があるんだけど、それがない。

うーん。

張りなおす。

今回はプラグインを使うことにした。All in One SEOをインストール。

 

それから、転職して今の会社でGAみててトラッキングコードの仕様が変わっていることに気が付いた。

まあそういうこともあるよね。長らく放置していたし、うすうす感じてはいた。

そもそも「トラッキングコードって全ページに入れなきゃいけないんだ〜?」というのを知って張り込んだのがたしか去年かおととしあたりw

そのへんもほかのページ全部整頓しないと。

 

アドセンスコードも入れていたと思ったけどうまく入ってなくて。

個別記事のphpが複数あっていっこづつためして Hueman: single-tmpl.php (tmpl/single-tmpl.php) にいれたら反映された。

テーマHuemanを使っているけど、記事内のタグの位置が下にあるのがもったいないので、これまたあれこれいぢって、タイトルの下に入れることに成功。

 

けっきょく、このWPは新しいコンテンツとして生まれ変わらせました。

ざっと整った。暫定タイトルは

 

「泊まって良かった世界の素敵ホテル」

http://ikuranet.com/blogs/

 

ホテルに絞って更新していきます。

 

CMS改めて使うとほんと素晴らしい。ロリポブログではできない、マルチカテゴリー指定、タグ指定が特に。

テーマHuemanもすごくよく出来すぎている。

世の中にはすごい人がいるなぁ。

 

 



| いくら | Webライフ | comments(0) | - | 11:43
ひとりっぷをいったん元に戻したメモ

昨年夏にwordpressで全面リニューアルしたひとりっぷを、思うところがありもとに戻しました。

ひとりっぷ http://hitrip.ikuranet.com/

ああ、懐かしい。なんか落ち着くこの素人感たっぷりの作り。

 

Wordpressのほうも生きてます。

http://ikuranet.com/blogs/

 

戻した理由はいくつかあって

1)サーバー側のサブドメイン設定がWordpressだとどうもうまくいかない。

wordpressはルート/blogs/に置いてあり、サーバー側でhitrip.ikuranet.comのサブドメイン設定を/blogs/にしたのですが、

hitrip.ikuranet.comにアクセスするとどうしてもhttp://ikuranet.com/blogs/にリダイレクトがかかってしまう。しかもhitrip.ikuranet.com/index.htmlに直打ちでアクセスするとエラーでページが表示されない。

という問題がずっと解決できずにいた。

2)せっかくWPにしたのに更新できずにいた。

忙しいということや、なんとなくUI/UXがしっくりこず更新のモチベがあがらなくて。

せっかくきれいになったのだけど、きれいになってしまったから軽い投稿ができなくて。結局ブログ「旅メモ」ばかり雑多に更新しているのが実情。

3)WPに移していない旧コンテンツのほうがいまだアクセスとCVが多い

なぜかしら。。

4)WPに変えてからアクセス激減が半年以上たっても回復してない

更新もしてないからね。。

5)別の新しいコンテンツサイトを作りたい構想がある

 

そんなこんなで仕切り直したくなったのです。

あれからいろいろスキルも磨いたのでもっと良い手段がとれそう。WP化は練習台にもなったので無駄じゃないです。

アクセスも激減したことだし、サーバーまるっときれいにお掃除&再構築したい。今の知識スキルをもってすれば美しいサーバー整理ができる。

 

【2018/12/2追記】

1)の原因がわかったので追記。wordpressでURLを変更知れば修正が可能だったが、このWPはマルチで組んでいるためそれができない。マルチでなければ管理画面にURLを修正できる項目がでてくる。



| いくら | Webライフ | comments(0) | - | 00:57
ひとりっぷリニューアルから2か月

ひとりっぷをWordPressにリニューアルしてから、気が付けば2か月が過ぎていました。

忙しくてほぼ放置していたのですが、ちょこちょこアクセス解析をチェックしていると、なんとアクセス半減orz。

細かいページの移設がうまくいってなかったりといろいろあったし、まぁ仕方ないかと思ってました。

 

もう一つ気になっていたのがページスピード。なんかえらい点数が低くてレッドゾーン。何とかならないかなといろいろ調べてちょいちょい試していました。

そして今日もあれこれ調べながらトライ&エラーを続け、結構改善して65点オレンジゾーンに。

いったん改善はこの辺で。

 

それからいろいろうっかりしていたことが。

いままでひとりっぷはサブドメイン設定を/tabi/ディレクトリにしていたのだけど、今回のWordPress化で/blogs/に変更した。

つまり

hitrip.ikuranet.com = ikuranet.com/tabi/

だったのが

hitrip.ikuranet.com = ikuranet.com/blogs/

に変えたのだ。

/blogs/っていうディレクトリ名は今となってはもうちょっと違うほうが良かったのではと思うのだが(hitripとかね)、そもそも当初WordPressを練習で導入したときはそこまで考えてなくてblogsとしてしまったのをそのまま使うことにしたからこうなってしまった。

で、ひとりっぷの変更設定はなんとかできたのだけど、ikuranet.com/tabi/内にあるその他複数のディレクトリのことをすっかりわすれていた。例えばikuranet.com/tabi/USA/など、これらを/blogs/に移動しないとページが存在しないことになっちゃってた。

まぁたいしてアクセスのないぺーじだからいいのだけど、取り急ぎblogsに移動して応急処置。blogs内がどんどんぐちゃぐちゃに(汗)。

 

まとまった時間ができたら、ほんとikuranet内をぜーんぶきれいに再構築したい!!

 

 

 

 



| いくら | Webライフ | comments(0) | - | 23:53
WordPresでサイトリニューアルなう!ひとりっぷ!

つい先ほど、自サイト「ひとりっぷ」をリニューアルリリースしました。

http://hitrip.ikuranet.com/

ビフォアー

やったー\(^^)/

今日はリニューアル記念日です。この休みの2日間怒涛のように打ち込みました。疲れたけどうれしい。達成感。

っていいうかよく2日で終わったなワタシ、みたいな。

デザイン検討変更・構成・情報設計考案・記事約50ページ転載。。

時間最優先で、せっかちだから早くリリースしちゃいたくて細かいところはボロボロです^^;

今まで何度もリニューアルはしてきましたが(前回のリニューアルはこちら2012の記事)それは見た目のデザインを変えたり構成を変えたり、コンテンツを追加したりJSを覚えたのでJS動画を挿入したりとかそんなリニューアルでした。

しかし今回はhtml&cssで組むのを卒業してついにCSMのWordPressに全面組み替え・再構築という大きなリニューアルです。WordPressで組み替えた一番の理由は、スマホに最適化するためにレスポンシブデザインにしたかったこと。

最近、Googleさまが検索順位のアルゴリズムに「スマフォフレンドリーであること」を掲げたというのが発端でもある。確かにここ最近、サイトひとりっぷの検索順位がどんどんどんどん落ちて行っていて気になっていたのです(更新せず放置していたせいもありますが…)。

レスポンシブデザイン自体は WordPress でなくても作ることはできるのですが、仕事で WordPress を使う機会があり最近の WordPress がものすごい機能的であることを知ったのもきっかけです。

それまでは単なるオリジナルブログ作成ツールという認識でいたのですが、いやいや、コーポレートサイトを構築できる自由度の高いツールであるということを理解したのです。

「よし、自分のサイトをWordPresでリニューアルしよう」

火が付いたらもう止まりません。

しかし最初はちょっと遠回りをしてしまいました。html&cssでの構築から考えが抜けられず、SSIを使ったincludeの方法もマスターしたのでそれを使ってみたくてこつこつ html&css で制作着手したのです。

それはまだテストサーバーに残ってるんだけど、こちらです。

ベースを組んでみたところで「これだと相当時間かかるな・・・」と現実に帰り、しかもこのページがWordpressのテンプレをもとに作っていたので「だったらWordPressでよくね?」とやっと気づいたのでした。

WordPress にはたくさんのデザインテンプレート(テーマという)が無料で用意されていて、それをベースに構築すれば超時間短縮できる。いろいろ検討して コンテンツサイトに向いている構成のHueman というテーマに決めました。(公式はこちら デモサイトはこちら)。そのままでも十分かっこいいのですが、私の目指すサイトのイメージとは違うのでアレンジが必要です。そもそもWPテーマはアレンジすること前提になっています。そのアレンジメニューも驚愕の秀逸さ。かゆいところに手が届きまくっていてびっくりしました。ちょいちょい調べないとわからないこともありましたが、ググれば簡単に情報が出てきたので作業はしやすかったです。大変だったのは情報(contents)のすみ分け・情報設計のほう。これがいかに難しく重要であるかというのを仕事を通して学び、そこも今回手を加えたかったとこ。

WordPressの仕組みは基本的にはブログと同じで新しい記事が優先的に表示されるので、そこだけみるとあまり更新しない私のサイトやコーポレートサイトには向きません。でもそれもWordPressではちゃんと考えられていて、そのための「固定メニュー」機能があります。最初はこれをどう活用すべきかがわからなかったのですが、どのメニューがどこにどうやって表示されるのかがわかってきたので活用方法を考えました。サイトの一番かなめでありながらあまり更新しないコンテンツを固定メニューで作成し一番目立つ左サイドトップに表示。ここは写真+タイトル+文章とかくどい表示にはしたくなかったのでベスト構成です。

そのほか手を加えたのは

・スライダーの設置(オプション機能だった)

・ad関連の設定

・解析タグの埋め込み

・ツイッター/Facebook BOXの設置

といったところです。あとはひたすら記事の転載。これがしんどかった。全部で50ページくらいあった。。。まだ全部は終わってないので地道に。

Hueman のテーマをインストールしたのが昨日。たった2日でリニューアル完了です*。

すごいなWordPress。神ツール。

* WordPress自体は2010年ごろにすでにサーバーにセット済だったので(用途がわからずずっと放置してた)、そこからのスタートです。

それからもう一つ問題だったのがリニューアルのサーバー設定。

これは思い切ってサブドメイン設定のディレクトリのほうをいじっちゃいました。

今までは

http://hitrip.ikuranet.com/ には /tabi/というディレクトリが指定されていました。

これを、WordPressがある/blogs/のほうに変えちゃったのです。一瞬でホームページがさし変わります。

でもこの場合の問題は/tabi/以下にあるhtmlファイルにアクセスした場合not foundになってしまうこと。

そこでちょっと強引ですが取り急ぎ /tabi/以下にあるhtmlファイル を /blogs/ に入れちゃいました^^;

これも地道にリダイレクトかけていかなきゃです。

なんか細かいエラーがぼちぼちあって、

http://hitrip.ikuranet.com/ではなく

http://hitrip.ikuranet.com/index.htmlで飛ぶとエラーになってしまう問題が発生。

/blogs/ の中には index.html は存在しなくて index.phpがある。

そこで index.html に http://hitrip.ikuranet.com/ へのリダイレクトmetaタグを入れてアップロードするもうまくゆかず(無限ループのようになり表示されなくなった)。そこでまたググって、リダイレクトをmetaタグではなくhtaccessでやる方法があって、それを試したら成功した。WordPressには htaccess ファイルが既にあるのでそれに下記を追記。

# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index¥.html?$ / [R=301,L]
RewriteRule ^default¥.html?$ / [R=301,L]
RewriteRule ^index¥.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

しかし、問題発生。上記のせいでWordpress がおかしくなり、トップページ以下第二階層が表示されなくなった。
こりゃいかん。
いそいで追加した記述を削除。また調べていろんな記述を試すもどれもダメ。
仕方なく、/index.htmlにリンク記述されてるhtmlのほうを直した。DWの一括置き換え(初めて使った)で処理。



| いくら | Webライフ | comments(0) | - | 23:54
WordPressテーマHuemanのアレンジ(スライダー問題)

自身のWEBサイトをいい加減スマフォ対応にリニューアルしたく、いろいろ考えてレスポンシブデザインがベターであろうとWordPressのレスポンシブデザインページを参考にhtml/cssを組んでいるうち、はたと

「だったらWordPressで構築したほうがはやくね?」って気づきました。

なんか遠回りしましたがWordPressで作り直すプロジェクトスタート。

 

デザイナーとしては唯一無二のデザインをゼロから作る!

っていう気概は実はなくて、なるべく早く簡単にかっこいいページが作れるほうが嬉しい。というのもサイトの第一の目的はかっこいいデザインではなく充実のコンテンツと集客だからだ。

WordPressには世界中の先鋭クリエーターが作った超かっこいいテンプレート(=テーマ)がすでにたくさんある。とりあえずそれを拝借すれば簡単に早くかっこいいサイトが作れる。いろいろある公式テーマからとりあえず選んだのはHuemanというテーマ(解説はこちら)。レスポンシブ対応で大変機能的で記事中心のコンテンツサイト向けの構成なのだ。

 

早速ダウンロードして各種設定をしていくとひとつ壁に突き当たった。デモページ(こちら)ではちゃんと動いていたスライダーが機能しないのだ。どうやらデフォルトではスライダー機能はついていないらしい(なんでやねん)。

いろいろ調べて同じ問題を解決した人の記事を見つけるも少し古い記事で今とWordPressのバージョンも違うのでそれでもわからなかったが何とか自力で解決した。

 Hueman の公式サイトでその解決方法が書いてあった(こちら/英語です)

1.なにやら子テーマ Childify Me とやらををダウンロードしてWPのプラグインにインストールする。

2.インストールしたらアクティベートする(任意の名前を付けてChildify Meボタンを押す)

3.カスタマイズ設定も必要です。テーマに Hueman を選び、

外観>カスタマイズ>Content>Blog Design and Contentと進みます。

·Featured posts·の項目でSelect a category to featureを選びます。ここで選んだカテゴリーの記事の画像がスライダーに表示されます。Featured Post Countがスライダーされる画像の数。その下のチェック関係はお好みで。

 

これでスライダー設定はOKなのですが、あれれまだ画像が表示されません。仮画像のまま。

というのも、スライダーに表示するには個別記事のほうの設定も必要でした。

記事投稿/編集画面の右サイドメニューの下のほうにある「アイキャッチ画像」これに設定された画像がその記事の画像としてスライダーに表示されるのでした。

 

ここまで小一時間かかった。。。

 

WordPressに興味をもってサーバーにセットしたのが実は6年前。

ずっと放置していたのですがいい機会なので活用です。

 



| いくら | Webライフ | comments(0) | - | 12:05
WEBマーケティング
新しい仕事ではWEBマーケティングをモーレツに頭に叩き込んでいる。
せっかく覚えた&もっと深く知りたいというのもあって、さっそく自身のWEBサイトでもその考え方を導入して実践しようと行動に移しました。
例えば、よくわからないまま中途半端に入れていたGoogleアナリティクス。
実は「タグは全ページに入れなければ意味がない」ということすら知らずトップページにしか仕込んでいなかったので、試しに全ページに入れてみたり。解析の見方をひとつひとつ覚えたり。
解析ができたら、本格アクションはその後だ。
どのページがどれだけ見られているのか、流入経路はどこか、見ているユーザーの性別、年齢、使われているディバイス・・・すべてマーケティングにおいては当たり前の初期段階なんだけど、それをどう分析してどう生かすのかというところまで、今ならなんとなくわってきた。

面白い。



| いくら | Webライフ | comments(0) | - | 10:59
アドセンスの「レスポンシブサイズ」はIEで不具合

 アドセンスに「レスポンシブサイズ」という、配置場所応じて自動的に最適なサイズの広告が配置されるというものが、いつの間にかできていた。

「おおこれは便利」

とばかりに早速、ブログの文章下に挿入してみた。

かねてから、このスペースに合うアドセンス広告サイズがなくて、とりあえず300x250を置いていたがいまいちだと思っていたのだ。

すぐに効果は発揮され、本当に適度なサイズの広告が表示されるようになった。

・・・と思ったのもつかのま。

ファイヤーフォックスではちゃんと表示されるのに、IE(ver11)だと、勝手に横幅がびろーーんと伸びてテキストのBOXが横に引き伸ばされ、同時にテキストの横幅も伸びてとても読みにくい状態。もちろん全体のレイアウトも崩れてしまう。

これがグーグルアドセンスのレスポンシブ広告とIEの相性の悪さのせいだと気付くのに小一時間かかった。

仕方なく、広告をまた300x250にもどした。

残念。






| いくら | Webライフ | comments(0) | - | 12:40
▼Facebookページ「シングルトラベラー」Let'sジョイン→
著者/運営者

運営WEBサイト
レコメンド
レコメンド
レコメンド
■OTHERS
更新カレンダー << January 2020 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>