WEB

矢印つきボタン例

HTML

<a href="" class="maru arrow">ボタン</a>

CSS

.arrow { position: relative; display: inline-block; padding: 0 16px 0 0; color: #000; vertical-align: middle; text-decoration: none; }
.arrow::before, .arrow::after { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; }
.maru::before { width: 12px; height: 12px; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; }
.maru::after { right: 5px; width: 3px; height: 3.2px;/* .2がないとホバー時にずれる */ border-top: 1px solid #4cbbd0; border-right: 1px solid #4cbbd0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.maru:hover::after { border-color: #4cbbd0; }
  • このエントリーをはてなブックマークに追加
0

Google analyticsで2つのアカウントをセットする方法

javascriptの記述メモ

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-●●●●-●']);
  _gaq.push(['_trackPageview']);

  _gaq.push(['second._setAccount', 'UA-▲▲▲▲-▲']);
  _gaq.push(['second._trackPageview']);
  _gaq.push(['second._setDomainName', 'none']);
  _gaq.push(['second._setAllowLinker', true]);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async
= true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
  })();
  • このエントリーをはてなブックマークに追加
0

最近流行りのトランプ氏を真似たスパム

<Secret.ɢoogle.com You are invited! Enter only with this ticket URL. Copy it. Vote for Trump!>ってのからアクセスがあった。
df8a57991774aa4fcfb276684819f1ca

google翻訳先生によると「Secret.ɢoogle.comあなたは招待されています! このチケットのURLだけを入力してください。 それをコピーします。 トランプに投票してください!」だそうで。
なんじゃこりゃと思って調べてみるとリファラースパムのようだ。
増加するリファラースパムVote for Trump!【対策】 – NAVER まとめ

アク禁するのがいいっぽい。

  • このエントリーをはてなブックマークに追加
0

グラデーションのボーダーをCSSでつくる

備忘録Tips

3区切りのボーダー

【表示例】

【CSS】

  /* 3区切りのボーダー */
.greenLine {
    background: #008000; /* Old browsers */
    background: -moz-linear-gradient(-90deg,  #FF0000 0%, #FF0000 33.3%,  #0000FF 33.3%, #0000FF 66.6%, #008000 66.6%,  #008000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#FF0000), color-stop(33.3%,#FF0000), color-stop(33.3%,#0000FF), color-stop(66.6%,#0000FF), color-stop(66.1%,#008000), color-stop(100%,#008000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(0deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* IE10+ */
    background: linear-gradient(90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#008000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding-bottom:3px;
    margin-bottom: 2%; 
}

グラデーションのボーダー

【表示例】

【CSS】

  /* グラデーションのボーダー */
 .blueLine {
    background: #dedede; /* Old browsers */
    background: -moz-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3296c8), color-stop(10%,#0075be), color-stop(50%,#1e9cd7), color-stop(70%,#cce0f4), color-stop(90%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(0deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* IE10+ */
    background: linear-gradient(90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dad45', endColorstr='#dedede',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding-bottom:5px;
    margin-bottom: 2%; 
}
  • このエントリーをはてなブックマークに追加
0

windows7で保存するときの左メニューを増やす

1.スタートメニュー「ファイル名を指定して実行」
2.HKEY_CURRENT_USER
3.Software
4.Microsoft
5.Windows
6.CurrentVersion
7.Policies

「Policies」を右クリックして「新規」-「キー」を選び、「comdlg32」というキーを作成する。
「comdlg32」を右クリックして「新規」-「キー」を選び、「PlacesBar」というキーを作成する。
「PlacesBar」を右クリックして「新規」-「文字列値」を選択し「Place0」という文字列値を作成する。
「Place0」をダブルクリックし「値のデータ」に登録するフォルダをフルパス名(例えば、d:\data)を入力して「OK」ボタンをクリックする。
同様にして、「Place1」、「Place2」、・・・というキーを追加して必要なフォルダを登録できる。
※「コンピューター」を設定する場合は「値のデータ」を空にする。
※「デスクトップ」の登録方法はわかりませんでした。

元の状態に戻すには「PlacesBar」を削除する。

  • このエントリーをはてなブックマークに追加
0

月末・月初を出力する

覚え書き
続きを読む

  • このエントリーをはてなブックマークに追加
0

wordpressの管理画面の表示が崩れた件 [kagoyaサーバー]

管理画面が壊れた?

2016年10月16日、突然管理画面がアイキャッチのような表示になってしまいました。
数日前も確認してたのですが、特に問題なかったので16日の前後に何かやらかしたのかと少し焦りました。

原因を確認

・管理画面の表示が崩れていたものの、クリックなどでページ移動することはできる
・Webページの方は表示に影響はない(クライアントのサイトもあるので不幸中の幸いでした)
・他のkagoyaで使ってるwordpressのサイトも同様に管理画面の表示のみ崩れていた。

解決・対処方法

結論から言うと、ルートディレクトリの.htaccessに
php_value output_handler noneと記述すると直りました。
この場所に記述するのが正しいのかは知識不足なので不明ですが、私のhtaccessの記述例は下記のようにしています。
kagoya_admin02

こちらのサイトを参考にしました。

http://kamadolog.com/kanrigamen-huguai/

このサイトの情報を見ると、2016年7月6日からおかしくなったとのことですが、
私がkagoyaを借りて使い始めたのは7月頃からで、そこからずっと普通にwordpressインストールして使えていました。
3ヶ月間何もなかったのはなんだろう。
サーバー自体は“マネージド専用サーバー 012 Atom”を借りており、phpのバージョンは現在7.0.10。

気になるのは直近の障害情報が10月13日に出てたことかなぁ
kagoya_admin03

  • このエントリーをはてなブックマークに追加
0

sublime text3の設定

自宅だけ、会社だけ、で仕事をする方は一度設定してしまえばそのままってことも多いですが、
色んな会社で仕事をすることが多かった自分の都合上、
だいたい年1くらいで環境設定しているような気がします。
その度に色々調べて…っていうのも面倒なので
主にプラグイン方面での自分メモとして書き記しておこうかと。

続きを読む

  • このエントリーをはてなブックマークに追加
0

jetpackの注意点

Jetpackプラグインは便利で、私も活用しています。
akismetと連動していたり、ソーシャル連携が容易だったり、
wordpress.comのアカウントがあれば色々便利なプラグインです。

Jetpack

ところが一つだけ難点があったので備忘録。
続きを読む

  • このエントリーをはてなブックマークに追加
0

ブログ復旧

サブドメインでテスト等をしていたら、ついこのブログのデータベースを上書きしそうになりまして。
デザインとか画像とか全部吹っ飛んでもた(’ワ’)
なんとか復旧(?)したので記念に記しておきます。

教訓:テスト環境作ったり消したりするときは入念にチェックしよう

  • このエントリーをはてなブックマークに追加
0