NTT東のギガらくWi-Fiを営業してきた代理店とひかり電話の営業をしてきたコラボレーション事業者のこと

Posted カテゴリー: Memorandum

NTT東の「ギガらくWi-Fi」と「ひかり電話」についてのドタバタを書きます。まず第一に、提供されているサービスの品質に関わることではないです。第二に、契約内容を理解せずに申し込んでしまったこちらの非が(90%くらい)あるので営業してきた企業が悪いわけでもございません。ただ、足をつっこんでしまうと「抜けるのがえらいめんどくさい」です。
以下、紆余曲折をすべて書いています。営業電話にお困りの方は最後の【まとめ】だけ見てください。

(さらに…)

htaccessでロリポップドメインを独自ドメインにリダイレクト

Posted カテゴリー: Memorandum

301リダイレクト対応、すっかりやり方を忘れてたので。

あとはGAとGSCの対応して終了、かな?

html5のvideo要素についての覚書

Posted カテゴリー: Memorandum

いまさらvideo要素を実装してみて気づいたことメモ。
iOSだとautoplayしないとかBASIC認証かけてるとiOSでうまく動かないとかトラップがまだ多い。

動画の再生/停止

video要素、audio要素をJavaScriptから操作する

音声ON/OFF

【jQuery】jQueryを使ってvideoタグで挿入した動画の音声のON・OFFを制御する

シークボタン、オリジナルの再生/停止ボタン

https://liginc.co.jp/web/js/jquery/82904

動画のランダム表示

https://teratail.com/questions/34499

上記を参考に下記のように実装

colorbox.jsなどのモーダルが動かないのはスムーススクロールが邪魔している件

Posted カテゴリー: Memorandum

これ、何度も遭遇してそのたびに調べてるのでメモ。
こちらを参考にsmoothScroll.jsでモーダル部分のidがスムーススクロールの影響を受けないようにして解決いたしました。ありがとうございました。

http://blog.webcreativepark.net/2007/07/12-143406.html

 

WordPressプラグイン newpost chatchで出力したサムネイルを正方形にトリミングする

Posted カテゴリー: JournalMemorandum

記事タイトル、投稿日時、そしてアイキャッチ、または記事の最初の画像をサムネイルとして出力してくれるWordPressプラグイン newpost chatch、ほんとうにお世話になっております。開発者の方ありがとうございます。

わたしの場合、画像がタテ・ヨコまちまちで、サムネイルとして並べようとするとレイアウトが非常にむずかしい。正方形にしてタイル状に並べるのがよいのですが、ショートコードで画像を設定しCSSでwidth、heightを設定しただけだと。
画像がむりやり正方形に圧縮されて美しくありません。

今回はこのCSSでなんとか並べました。本当はヨコ画像は左右きれてもよかったんですけど、なぜかヨコ画像は上下が切れて正しい比率で表示されます。あれー? 

HTML

CSS

WordPressの更新情報を静的ページに表示する

Posted カテゴリー: JournalMemorandum

Google feed APIがどうなるかわかんなくて、どうしたもんかなと思っていたのですがphpにしちゃえばいいじゃんっていうのは目から鱗。こちらを参考にさせていただきました!ありがとうございます!3分くらいで実装できました。

 

PHPのrequireを使って、WordPressの外にある静的トップページに新着記事+投稿タグを表示させてみた

 

Adobe Illustrator CCが起動後すぐに強制終了する

Posted カテゴリー: Memorandum

イラレが突如立ち上がらなくなって泣きそうになりましたが、どうもMacOSのアップデートとの相性のようです。アンインストールして再インストールしたら直りました。

アンインストール後にデスクトップアプリを再起動する、というのがポイントかも。(どっから終了するのかとてもわかりにくいので)

参考
https://helpx.adobe.com/jp/illustrator/kb/cq11192017.html

移動可、クローズ(リムーブ)可のポップアップウィンドウのiQueryプラグイン

Posted カテゴリー: Memorandum

レスポンシブデザインだとfixedで常駐のポップアップって邪魔だしどうしようかな、と思って探していたら、ドラッグできて閉じられるポップアップのJSを配布している方がいらっしゃいました。

ポンクソフトさま
ipop : ドラッグ可能なポップアップウインドウ – jQuery simple plugins

ありがとうございましたー。なんかこう、こういうプラグインを参考にさせていただく時ってGeocitiesでホームページ作ってた頃を思い出しませんか。

iTerm 2で## exec failed ## argpath= error=No such file or directoryと出た場合の対処法

Posted カテゴリー: Memorandum

なんでか急にiTermでShellが新規作成できなくなってしまいまして。
ターミナルは普通に動いてるんだけど、iTermを起動すると
exec failed
## argpath= error=No such file or directory

と出てすぐに画面が落ちちゃうのでちょっと焦った。
メニューバーのiTerm > Preference > Profile > General > Commandの
Login shellのラジオボタンをONにしたら解決しましたのでメモ。

iterm2

ありがとう外国の人。
http://stackoverflow.com/questions/22943676/how-to-export-iterm2-profiles

正規表現メモ

Posted カテゴリー: Memorandum

最近さすがに減ったけど、たまにtableのtdタグにstyle=”color:#000000; ……….”みたいなのがいっぱい入ってて「のおおお」ってなるときありますよね。私はあります。そんなときにタグ内で不要な部分だけ抽出するときの正規表現。基本の基本だけどいつも忘れるのでメモ。?を入れないと行の最後のとじかっこ>まで抽出してしまうので注意。

WordPressのテーマ aThemes MOESIAのインストールとセットアップ

Posted カテゴリー: Memorandum

WordPressの無料かつレスポンシブでパララックス風味のテーマ「MOESIA」のインストールメモ。普通のWPのテンプレートのようにインストールしたらさくっと適用されるものではないので結構面倒です。

1)Moeshaをダウンロードして外観から有効化
http://athemes.com/theme/moesia/

2)この4つのプラグインをインストールして有効化しておく
・Plugin Types – Custom Fields and Custom Post Types Management
※とにもかくにもこのプラグインがないとMOESIAは動かないので注意。
※有効化しようとしたら500エラーが出る場合、MAMPのPHPのバージョンが7になっていないか確認する。

・Page Builder by Site Origin
・Post Types Order
・Regenerate Thumbnails

plugin

3)下記のXMLをとりあえずデスクトップあたりに保存
http://athemes.com/download/settingsv10.xml

4) 管理画面>Types>Settings>ページ下部の「Types tools」から「Import/Export」>(3)で保存しておいたXMLをインポートする
※(2)でTypesをインストールしてないと管理画面にTypesのメニューがそもそも出てこないので注意。

5) 管理画面にそれぞれServices, Employees, Testimonials, Clients, Projectsという項目ができるので、最初にそこに表示したい項目を入れておく。それぞれの指定方法はMOESIA Documentationの動画参照のこと。
※ Clientsはアイキャッチ画像でロゴを指定しておかないと何も表示されないので注意。

6)それからようやくトップの指定。
管理画面>固定ページ>新規追加でトップページをとりあえず作成
ページ属性のテンプレートを「Front Page」に指定
本文画面で入力画面上部の「+ Add Widget」で表示したいボックスを選ぶ。「Moesia FP:〜」というのがMOESIAで用意されているボックスになる。

myfrontpage

7)ブログ系の指定
管理画面>投稿>新規追加でページ属性のテンプレートを「デフォルトページ」に指定

8)管理画面>外観>カスタマイズ>固定フロントページで
さきほど(6)と(7)で作成したページをそれぞれ指定する

koteifront

9)プライマリーカラーの指定は管理画面>外観>カスタマイズ>Front Page Colorsで変更する。
※「色」ではないので注意

10)フロントページ以外はメインビジュアルを大きく表示したくない場合は管理画面>外観>カスタマイズ>Welcome Areaで下記のチェックボックスにチェックを入れる。

check

参考

MOESIA Documentation

 

 

javaコマンドラインツールを使用するには、JDKをインストールする必要があります

Posted カテゴリー: Memorandum

Webカテゴリーでもないのだが備忘録。

Google Chrome ver 46.0.2490.86 (64-bit)を利用しているのだが、El Capitanにアプデしたら表題のようなエラーが頻出するようになってしまった。詳細のページに飛んでプラグインをDLしても解決しない。

We have detected you are using Google Chrome and might be unable to use the Java plugin from this browser. Starting with Version 42 (released April 2015), Chrome has disabled the standard way in which browsers support plugins.

「Google Chromeを使用してる場合、このJavaプラグインを使用することができない可能性があります。 ( 2015年4月発売)バージョン42以降では、 Chromeがサポートプラグインを無効にしています。」とのことで、さらに詳細を見てみるとChromeがVer45以降、NPAPIのサポートをやめたのでFlashとかSilverlightとか動かなくなるかもよ、と。しぶしぶメインブラウザをSafariに変更したものの出続けるのですよね。

で、下記インストールして解決。

Java for OS X 2015-001

Google Mapのカスタマイズ

Posted カテゴリー: Memorandum

 

ここでカスタマイズしてデザインの部分だけ下記 /*スタイルのカスタマイズ*/にペースト。
https://snazzymaps.com/

下記を参考にさせていただきました
ワンランク上のサイトデザインを目指して、Googleマップのカスタマイズに挑戦してみた!

div内の文章を折りたたむ「jTruncsubstr」

Posted カテゴリー: Memorandum

クライアントからめっちゃ長い文章が送られてきたよドラえも~ん…というときにjTruncateっていうのが便利なんじゃ?と思って導入したところ、日本語だと全く使えなかったので「jTruncsubstr」を使わせていただきました。
http://semooh.jp/jglycy/jquery-plugins/jtruncsubstr
まず最初にjGlycyも読み込まないと動かないので要注意。
(いきなりjTruncsubstrのページにランディングしたので最初意味がわからなかった)
http://semooh.jp/jglycy/

下記のように括るだけで動きます。スクリプトを書かなくていいのでソースが綺麗になっていいですね。マウスオーバーで画像を入れ替えるImgHoverも便利でした。

ありがとうございました。

ロリポップでWordPressの管理画面にアクセスすると404にリダイレクトする場合の対処法

Posted カテゴリー: Memorandum

ロリポップ推奨の「SiteGuard WP Plugin」なるプラグインですが、入れた直後はなんともないのに、なにかのきっかけで(クッキーが切れて再ログインしたタイミング?)管理画面のURLを変更しやがりまして。

おかげで管理画面にアクセスしたら404にリダイレクトして、「???」ってなりました。

もし管理画面にアクセスしたら404に飛ばされるって人は、FTPで/wp-content/plugins/siteguard/をリネームするか削除すると、http://hogehoge.com/wp-admin/で管理画面に行けるようになると思いまする。

参考

http://www.jp-secure.com/cont/products/siteguard_wp_plugin/

ちなみに、ロリポップで複数回WordPressをインストールして上書きしたりしていると、初回のhtaccessの記述が残って不具合を起こす可能性もあるようです。
ロリポップのサポートの方が調査してくださったので共有します。

(さらに…)

WordPressでライブ情報を告知・更新するプラグイン(All-in-One Event Calendar by Time.ly)

Posted カテゴリー: Memorandum

音楽をやっている方は、ご自身のウェブサイトライブやイベントの告知・Web運営をどのようにしているのでしょうか。Facebook Pageは便利だけどいまいち浸透してないし、Twitterでは流れてしまうので固定の情報が必要…となるとWordPressで告知をされている方が多いのではないかと思います。とはいえ、通常の投稿だとリンクしたりとか、Google Mapを貼ったりとか、終わったページが残ってしまったりとか、なかなか面倒です。

  • カレンダーで本文に表示したい
  • 本日以降のイベントを表示したい(終わったイベントは消したい)
  • Googleカレンダーと連動できたら便利

このへんがWordPressのプラグイン「All-in-One Event Calendar by Time.ly」で実現しそうだったので、まだあまり運用していないですが、以下にプラグインの紹介と設定方法をメモします。

(さらに…)

Illustrator上にリンク配置した写真をクリッピングマスクにあわせてトリミングする

Posted カテゴリー: Memorandum

Illustratorで写真を配置するとき、クリッピングマスクでトリミングするだけでは許されない場合

新規アートボード(02)を作成
クリッピングマスクのサイズに合わせてアートボード02のサイズを調整
ファイル>書き出し…をクリック
書き出しフォルダ、書き出し形式を選択(カンプを出すときはPNG, 配置する写真を再度トリミングする場合はPSD)
「各アートボード」のチェックボックスにチェック
ラジオボタンの「範囲」に「2」を入力(新規に作成したアートボードが2だったとき)
「書き出し」をクリック
PSDの場合は解像度を300に設定して「OK」をクリック。

でもなんかあとでPhotoshopで開くと1pxの透明な余白ができたりするのでこのやり方よくないかもしれない…

WordPressで子要素を画面垂直中央に配置したい場合の親要素の高さ設定について

Posted カテゴリー: Memorandum

箱を画面中央に持ってきたい時とかありますよね。

中央にもってきたい子要素は

ところがWordPressって結構な入れ子構造になってるので、管理画面のコンテンツエリアを広げようと思って
マージンをリセットしたりしても、なかなかしぶとく高さをとってくれません。

なんかこれで解決しました。
vh, vertical heightですかね。初めて見たよ。

ロリポップでWordPressのアップロードファイル容量の上限を変更する方法

Posted カテゴリー: Memorandum

今どき写真の容量なんて軽く3MB, 4MBはあるこのご時世に
Wordpressって、なぜか2MBまでの写真しかあげられなくて不便ですよね。
で、調べてみたところphp.ini, htaccessを使った変更方法が。

参考
http://www.magical-remix.co.jp/magicalog/archives/2857

しかしながら、php.iniとhtaccessの両方トライしたものの
WordPressの管理画面ではいっこうに反映されず…
ホスティングサービスのロリポップのFAQを調べたところ
管理画面からPHP.iniを編集できるようでした。

ログイン>WEBツール>PHP設定>ドメインを選択し「設定変更へ」をクリック
「■そのほか」の表内にある
====================================
upload_max_filesize
「 post_max_size 」 も同時に変更します
====================================
上記を2Mから20Mに変更することで対応できました。
ちなみにここのPHP設定でPHPのバージョンもアップできる。ロリポップべんり。

iPhoneで水平にしても画像サイズを変更しない方法

Posted カテゴリー: Memorandum

iOSって、画角によってよしなに画像の大きさを
変えてくれるのはいいんですけど、
垂直(ポートレート)だけで確認して組んでたら、
水平(ホリゾンタル)にしたときにボタンが大きくなって
レイアウトが崩れてしまったので。
なんとなくinitial-scale=1を追記して解決…

WordPressで公式テーマをアップデートするとカスタマイズが消えるときの対処法

Posted カテゴリー: Memorandum

子テーマを作ることで解決できました。

たとえばtwentyfifteenを親テーマとし、子テーマ「twentyfifteen-child」を作る、というふうなかんじ。これだとカスタムした部分は別ディレクトリに保存されているので、親テーマにアップデートがかかっても子テーマに記載したカスタマイズは影響を受けません。

まず、カスタマイズ用をディレクトリ(twentyfifteen-child)を作成して、中に白紙のstyle.cssとfunctions.phpを作成して放り込みます。
そして、style.cssのトップに下記を記載

functions.phpに下記を記載

あとは必要に応じてheader.php, footer.phpなんかを放り込んでいくと親テーマを上書きしてくれます。functions.phpだけは上書きされないようです。
そこまで用意ができたら管理画面の外観>テーマから子テーマを有効にします。
わたしは-childという名前にするとサイト運営者がわかりにくいので、サイトのサービス名を子テーマの名前にしています。

参考:
http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

Safariでjustify-content: space-betweenが動かないときの対処法

Posted カテゴリー: Memorandum

対象ブラウザの問題はあれど、もうfloat:leftでハコを並べるのはうんざり!ということで
等間隔に箱を並べたりするときに「justify-content」はとても便利です。
下記を参考にさせていただきました。

参考:
http://www.flapism.jp/html/278/

なんですが、なんでかSafariでは動かなかったので。
下記のベンダープレフィックスを全部追記したらSafariでもちゃんと表示されました。

WordPressの多言語対応:プラグイン「mqTranslate」の実装

Posted カテゴリー: Memorandum

2015/5/1追記
mqTranslateはアップデート止めてしまったらしいので、qTranslate-xに移行しました。


サイトを多言語対応にしたい。日英対照のページを作るのはいいとして、はて、どうやって言語を保持したままのナビゲーションを作ったらいいんだろう、と思って調べたところ、さすがオープンソース。「あったらいいな」というものはたいがいどこかの偉い人が作ってくれているものなのですね。ありがたいことです。

WordPressを多言語対応するにあたってのメモ (さらに…)

LINEアカウントが乗っ取られたときの対応

Posted カテゴリー: Memorandum

先日、わたしのLINEアカウントがのっとられた。
いきなり意味不明なメッセージが行ってしまった方、ご迷惑おかけしました。

原因は、他所で流出したメールアドレスとパスワードの組み合わせを流用してほかのスマートフォンでログインされてしまったとのこと。
「他端末のログイン許可」を無効設定にしていたのだが、機種の買い替えと同じ扱いなのでログインされてパスワードを変えられた瞬間、わたしのLINEアプリはロックアウトされ、にっちもさっちも行かなくなってしまった。

さて、まだまだこの姑息な詐欺ももうしばらく続きそうなので経緯とLINEからの正式回答を載せておくことにする。同じ被害に遭われた方に少しでも参考になれば。。。

(さらに…)

WordPress投稿画面でリンク挿入ができない不具合の解消法

Posted カテゴリー: Memorandum

WordPressの新規投稿画面で、リンクのアイコンを押しても
リンク挿入のモーダル画面が出てこなくなりました。

wp01

こちら色々調べましたが、私の場合は
WP Multibyte Patchというプラグインが悪さをしていたので
プラグイン > インストール済みプラグイン で
「WP Multibyte Patch」を停止したところ治りました。

wp02

同じ症状が出ている方、このプラグインをまっさきに停止すると解決するかもしれませんので
やってみてくださいませ。

WordPressで、カテゴリー別サムネイル一覧を作成する Newpost Catch

Posted カテゴリー: Memorandum

WordPressで、1枚の固定ページの中に、カテゴリーごとにまとめられたサムネイルのブロックを配置したいなあと思ったことはないでしょうか?写真をやっている人はギャラリー、音楽をやっている人ならディスコグラフィ、料理をやっている人ならジャンル別写真一覧など、結構使う場面はありますよね。

わたしは写真をやっているので下記のように運用しています。
・ギャラリーのインデックスを固定ページで用意
・個別の写真は投稿ページで更新

で、新しい投稿をするたびに、ギャラリーのインデックスに個別ページのサムネイルが自動で追加され、かつ、それがカテゴリー別にまとめられたら良いなと思っておりました。
今までは調べまくってindexテンプレートにphpを直書きして実装していたのですが
Newpost Catchという素晴らしいプラグインを見つけたので僭越ながらご紹介します。

 

Newpost Catch

詳細は上記ページをご覧いただくとして


というショートコードを追加するだけで、投稿のサムネイルをひっぱってくることができます。
ウィジェットにも対応しています。CSSで調整するためのid、サムネイルのwidth/height、表示件数などさまざまな調整も簡単に変更できました。

Newpost Catchのショートコードについて
ほんとうに素晴らしいプラグインをありがとうございます!

ちなみにNewpost Catchを利用して組んでいるのが下記のページになります。
私は本文にはimgを挿入していないのですが、アイキャッチ画像に画像を設定するとひっぱってきてくれます。便利ー!(実際の個別投稿ページではアイキャッチ画像はdisplay:noneで消しています)
Gallery | Mai Suzuki Photo Works

 

ロリポップWordPress改ざん サイトの修正方法

Posted 3件のコメントカテゴリー: Memorandum

相変わらずまだ延焼が続いているようですが、ロリポップの大規模攻撃が盛り上がっています。
わたしが友人たちのために作ったサイトでも、3ドメインほど被害にあってしまいました。
最新の情報はこちら
【 最重要 】 当社サービス「ロリポップ!レンタルサーバー」ユーザーサイトへの第三者による大規模攻撃について

こちら公式の修正方法(私の場合はこれでは解決しませんでした)
改ざんされたサイトの復旧方法について

(さらに…)