Adobe InDesign

ゆえあってInDesignをいじっているのだが、これがまた難しい。
楽器にしろアプリにしろ、習熟度に比例して身体が覚えていくかんじはきらいではないのだけど、裏を返すとAdobeのアプリは楽器並に難しいということだ。
もうすこし直感的にならないものだろうかと思っていたが、ダイアログは妙に人間らしくて笑ってしまった。

WordPress投稿時、更新時に画面が真っ白になる。投稿画面、アイキャッチ設定でメディアが取得できない。

WordPress投稿時、更新時に画面が真っ白になる。
投稿画面、アイキャッチ設定でメディアが取得できない。

パーミッションを変えても、wp-configに追記しても解決しなかった上記二点が同時に解決したのでメモ。

ロリポップの管理画面>サーバの管理・設定>PHP設定>php.iniの設定で「そのほか」の設定項目「display_errors」を「On」にする。

真っ白な画面にエラーが表示されるようになる。
適用しているtheme/function.php:15があやしいので該当ファイルを開いてみるが、15行目にはなにも記述されていない。?>までの改行を削除したところ復旧した。

原因が判然としないがまあいいか…

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

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

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

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

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

 <video playsinline autoplay class="fillWidth fadeIn wow collapse in" data-wow-delay="0.5s" poster="./assets/bg-top.png" id="video"> このブラウザは動画の再生に対応しておりません。ブラウザのアップデートを推奨いたします。 </video>

動画の再生/停止

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

<a id="play" onclick="vidplay()" class="btn btn-primary btn-xl">Play Video</a>
<script>		
	function vidplay() {
       var video = document.getElementById("video");
       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

    function restart() {
        var video = document.getElementById("video");
        video.currentTime = 0;
    }

    function skip(value) {
        var video = document.getElementById("video");
        video.currentTime += value;
    }
</script>

音声ON/OFF

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

<button class="btn btn-primary">
        <a href="javascript:void(0);" id="sound_button" class="sound_on">SOUND</a>
        </button>
<script>
	$("#sound_button").click(function () {
        if($(this).hasClass("sound_off")) {
            $(this).removeClass("sound_off");
            $(this).addClass("sound_on");
            $(this).text("SOUND ON");
            $("video").prop('muted', true);
        } else {
            $(this).removeClass("sound_on");
            $(this).addClass("sound_off");
            $(this).text("SOUND OFF");
            $("video").prop('muted', false);
        }
	});
	</script>

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

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

動画のランダム表示

https://teratail.com/questions/34499

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

<video id="video" autoplay loop></video>

<script type="text/javascript">
var video = document.getElementById("video");
video.poster = "poster.jpg";

var videolist = new Array(
  "video1.mp4",
  "video2.mp4",
  "video3.mp4",
  "video4.mp4" );
var videonum = Math.floor(Math.random() * videolist.length);    
video.src = videolist[vidoenum] ;

video.load();
</script>

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

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

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

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

HTML




CSS


#gallery li {
	float: left;
}
#gallery li > a {
	list-style: none;
	width: 150px;
	height: 150px;
	overflow: hidden;
	display: block;
}
#gallery li img {
	position: relative;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#gallery li span.title {
	width: 150px;
	display: inline-block;
}

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

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

 

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

 

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

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

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

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

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

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

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

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

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

なんでか急に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

正規表現メモ

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

<td style="-------">
↓
<td .*?>

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

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をインストールする必要があります

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のカスタマイズ

 

<body onload="initialize();">
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="map_custmomize" style="width:100%;height:400px;"></div>

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

function initialize() {
  var latlng = new google.maps.LatLng(35.527866, 139.697227);/*表示したい場所の経度、緯度*/
  var myOptions = {
    zoom: 18, /*拡大比率*/
  scrollwheel: false,/*スクロール禁止*/
    draggable: false, /*ドラッグ禁止*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeControlOptions: { mapTypeIds: ['noText', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
  };
  var map = new google.maps.Map(document.getElementById('map_custmomize'), myOptions);/*マップのID取得*/
 
  /*スタイルのカスタマイズ*/
  var styleOptions =
[
  {
    "stylers": [
      { "visibility": "on" },
      { "color": "#NaN490d" }
    ]
  },{
    "stylers": [
      { "visibility": "on" },
      { "hue": "#ff00f6" },
      { "saturation": -100 }
    ]
  }
];
 
 var styledMapOptions = { name: 'CLUB CHITTA' }
  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('sample', sampleType);
  map.setMapTypeId('sample');
 
/*WEB企画アイコンの取得*/
var icon = new google.maps.MarkerImage('js/marker.png',/*アイコンの場所*/
  new google.maps.Size(50,60),/*アイコンのサイズ*/
  new google.maps.Point(0,0)/*アイコンの位置*/
);

/*マーカーの設置*/
var markerOptions = {
  position: latlng,/*表示場所と同じ位置に設置*/
  map: map,
  icon: icon,
  title: '株式会社WEB企画'/*マーカーのtitle*/
};
var marker = new google.maps.Marker(markerOptions);
 
}

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

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

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

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

<div jg="jTruncSubstr">
文章
</div>

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

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

ロリポップ推奨の「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の管理画面にアクセスすると404にリダイレクトする場合の対処法” の続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

.middle {
position:absolute;
top:50%;
left:50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform:translate(-50%, -50%);
}

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

.entry-content{height:100vh;}

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

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

今どき写真の容量なんて軽く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のバージョンもアップできる。ロリポップべんり。

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

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

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

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


/*
Theme Name: テーマの名前(Twentyfifteen-childとか)
Theme URI: http://example.com/wp-content/themes/twentyfifteen-child/
Description: Twenty Fifteen Child
Author: なまえ
Author URI: http://example.com/
Template: twentyfifteen (親テーマの名前)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

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が動かないときの対処法

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

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

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

.space-betw {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

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

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


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

WordPressを多言語対応するにあたってのメモ “WordPressの多言語対応:プラグイン「mqTranslate」の実装” の続きを読む

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

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

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

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

“LINEアカウントが乗っ取られたときの対応” の続きを読む

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

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

wp01

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

wp02

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