はてなブックマーク

この記事の要諦 ロリポップでWordPressを運営 サーバ契約から10年間放置していたPHPのバージョンをアップしたら、｢データベース接続確立エラー｣。 データベースのパスワード更新するだけでは解決しなかった PHP5.3じゃなく5.2からアップデートしたせいっぽい こちとらデータベースまわりは素人なので、この問題の解消に半日かかりました。 2020年になってPHP5.2使っている人がどれだけいるのか疑問ですが、記録として留めておきます。 解決方法だけ知りたい方はこちらから。 ロリポップ管理画面からPHPバージョンアップ テーマやプラグインの互換性は事前にチェックしていたので｢後はやるだけだ｣とアップデートを実施 さっそく自分のサイトをチェック。 そう来ましたか。 管理画面もこう。 事前調査で｢データベースのパスワードも変える必要あるかもよ｣という情報を得ていたので、落ち着き払って対処す

タイトル通り、cssの疑似要素でアイコンを表示したい時に、background-imageで画像表示するのもイマドキじゃないかなぁと思って調べたら、ちゃんとやり方があった。 CSSで文字コードを指定する XXXXX:before { content:'\E89E'; font-family: "Material Icons"; } こうすればよい。 contentには文字コードを入力する。 文字コードの調べ方(旧バージョン) 表示したいアイコンの文字コードはすぐ分かるので、”&#x”を”\”にしてcontentに入れる。以上。 文字コードの調べ方(2018年版) Material Design ツールキットが一斉更新された際に文字コード表示が無くなって困っていたが、 ここのコードそのまま入れても大丈夫。 XXXXX:before { content:'3d_rotation'; font-

バリバリの武闘派(?)インフォメーションアーキテクト(IA)としてキャリアを積んできましたが、最近、肩書が変わりました。私が見るチームがIA以外の領域にも広がった事で、一応リーダーとしてIAより広いっぽい名前の方が良いかなぁと思ったからです。 で、1年前まであれだけ嫌いだった「UXなんちゃら」という肩書にジョブチェンジしてしまいました。なぜ嫌いだったかというと、理系出身からすると言葉が一意に定義されずに議論される事に強い抵抗があったからです。が、今はどうでもよくなってます。「議論されているうちが華」という側面もあるかと考え直したからです。 とうとう自分の肩書にUXと付いてしまったので、UXデザインという言葉にも一言なくてはならんであろうという勝手な使命感から、払拭されない疑問をここで呈しておきます。 なお、今回は私の主戦場であるウェブサイトやアプリデザイン領域を対象にしています。サービスデ

最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section

久しぶりのサイト制作ネタです。 ちょくちょくプライベートでサイト制作をすることがありますが、スマホ対応方法はもうレスポンシブ1択でやらせてもらってます。 だいたいバンド用のウェブサイトを作ることが多いのですが、メンテナンスにコストをかけれないし、CMSを入れるにも、お客さんが扱えないことが多いこともあって、運用考えるとレスポンシブでええわな、という感じです。 あと、俺がめんどくさがりというのも大きいです。 jsっていうと昔は演出作るのがめんどくさくて手を付けてなかったのですが、最近は色気が出てきてちょっとずつ勉強してます。 で、レスポンシブのサイトだと、デバイスごとにjsを書き分けるとか読み込み分けたくなります。cssはブラウザ幅で簡単に記述を変えられますが、jsはいろいろとやり方がある。 たぶん一長一短あるんでしょうが、今のところの私なりの方法をメモしておきます。 更新. documen

案件でこういうのが必要になって、コーダーから「出来ない」と報告を受けたけども「できるんちゃう」と思って実験したらできたのでメモ。 よくあるtable-cellを使うんやけども、縦並びなのはドンピシャな例が見つからなかったんで書いておきます。 デモ » こちらから コーポレートサイトの左右ナビに使いそうなやつです。 作り方 マークアップ方法です。display:table-cellを使います。 html レイアウトのためとはいえ、(文書構造上)無意味なspanが入ってるのが気に食わんけど、どうしても外せんかったので無念。 <ul> <li><a href="#"><span>1行のパターン</span></a></li> <li><a href="#"><span>1行のパターン</span></a></li> <li><a href="#"><span>2行のパターン2行のパターン2行のパ

グローバルナビのアクティブ表示を実装する方法はいくらでもありますが、最も簡単に(というか最小力で)やる方法は何かしら、というのがこの記事の趣旨です。 何を以って簡単と言うかですが、自分の場合可能な限りhtmlをシンプルにというのが信条なので、そこをポイントとしています。 結論から言うと、javascriptを1個追加するだけで完了します。htmlの編集も不要です(javascript読む1行追加するくらい)。 あ、ちなみにナビのデザインにbackgroundで画像を利用してない場合です。あしからず。 自分が在籍してるバンド、Dynamite Satan plusのサイトの場合ですと、グローバルナビはこんな風にコーディングしてました。 <nav> <ul> <li><a href="/live/">live info.</a></li> <li><a href="/member/">memb

GAのデフォルト設定では参照URLが 「参照元」：ドメインまで 「参照URL」：ディレクトリ以降 と、2つに分割してレポートされます。 これをフルパス表示してくれる方法ないかなーと思ってると、やっぱりあるみたいです。 ただしフィルタ機能を使うので、設定後のデータのみ反映可能です。過去のデータには反映されません。 設定方法 フィルタ設定画面に行きます。GAのサマリー画面から ①右下の「フィルタマネージャー」→「フィルタの追加」から行くもよし ②プロファイルの「編集」→「フィルタの追加」から行くもよし フィルタ設定内容 フィルタ名：識別に使うだけなので内容が分かればなんでもいいです フィルタの種類：「カスタムフィルタ」を選択 「詳細」の選択 フィールドA：プルダウンから「参照」を選択、右のフィールドに「(.*)」を入力 フィールドB：放置(何も入力・選択しない) 出力：プルダウンから「ユーザー

初めに言っておくと、どちらかといえば私はmixi応援派です。 盛者必衰とは申しますが、こういうニュースを見るとwebサービスの儚さについ涙しそうになるわけです。 mixiのオワコン化が止まらない！広告収入激減で収益が6割減！ webサービスではこういう落ち目なブランドが一旦付いてしまうと、何をどうテコ入れしても過去のポジションを取り戻すのは不可能な気がします。greeみたいにサービスそのものをガラリと鞍替えしてしまわない限り。個人的にはmixiは頑張ってもらいたいとは思っていますが。 しかし5,6年くらい前?までは隆盛の一途を極めていたのに、もうこのボロクソな言われようを見るとweb従事者としてハタから見てても「空しい」しか感想が出てこないわけです。 で、これを機会に「SNSが終わるとき」について考えてみました。「mixiの利用者はなんで減ってきたのか」ということです。 SNSというのはど

こいつのことです。 投稿エリアにurlが入ってると自動で取得されるサムネイルですが、これの制御方法をメモしておきます。他にも方法があると思いますが、結構手軽に実現できたので自分のやりかたを。 WP-OGPっていうプラグインを使います 自動でオープングラフ系のコードを入れてくれる便利なプラグインです。 WP-OGP こんな感じでタグを生成してくれます。 <!-- BEGIN: WP-OGP by http://www.millerswebsite.co.uk Version: 1.0.5 --> <meta property="og:title" content="[WordPress] facebookやgoogle+でリンク貼られた時の自動サムネイル表示方法" /> <meta property="og:type" content="article" /> <meta property=

以前、dew playerを使ってgoogle bloggerにmp3プレイヤーを貼りつける方法を紹介しました。が、どうやら知らない間にSoundCloudというmp3共有サービスが出来ていたようで、このサービス使った方が全然簡単やんけ…ということで紹介します。 こんなプレイヤーです ついでに大昔にmidiで打ち込んだオリジナル曲を恥ずかしげも無く披露。 SoundCloudプレーヤーの貼り付け方 手順を紹介します。 1. アカウントを取得しましょう まずはSoundCloudでアカウントをとります。Facebookアカウントでもログインできるようです。 英語サイトなんで分かりづらいかもしれませんが、まぁ何となくそれっぽいところをクリックするとアカウントとれます。というか英語がからっきしダメな自分でも難なく完了。 インターフェースはMySpaceよりはるかに分かりやすいです。 2. mp3

トップページだけサイドカラムの出し分けをしようとしてif(is_home())を試したんですが、全く反映されずに困っていたら原因が至極単純だった。 トップページの最新記事をquery_posts()を使って吐き出していたんですが、 これを使うと同じページでもそれ以降はarchiveと判定されるようです。 つまりサイトのソース構造がこうなっていると、 こう判定されるらしい。 なので、不必要になったらqueryをキャンセルすればオッケーぽいぞ、と。 ということで最新記事表示箇所の最後に <?php wp_reset_query(); ?> を挿入して無事解決しました。 めでたし。

注1:google bloggerでブログを書いていた時期の記事です。 注2:2011年3月30日追記：SoundCloudを使った方法を紹介しました。 前回のエントリで、「ブログに録音ファイルを貼る」という長年の夢をあっさり実現してしまいました。 google bloggerにはデフォルトで音声ファイルのアップロード機能が無く(他のブログサービスはできるんかな)、その設置方法で少々てこずりました。 調べてみると、さすが世の中は広く、どうやら同様の悩みをお持ちの方もいらっしゃるようでした。この私もちょっとは社会貢献する年頃かなと思い立ち、その方法をメモする次第です。 手順 ということで、google blogger にmp3を貼りつける手順です。 大体の流れはこんな感じになるかと思います。 mp3をどこかにアップする プレイヤーを用意する ブログにタグを貼りつける リストにするのがバカらし