• 25 Nov
  • 21 Jan
    • アメブロをnoindexにしました

      アメブロにmetaタグを突っ込んでノーインデックス処理しました。アメブロ自体の記事を消したりするつもりはないのですが、検索で引っかかりそうな記事はワードプレスの方に移したいなー思ったのでインデックス消そうと思います。といってもheadにmetaタグを入れられるわけではないので、フリープラグインに入れたため本当にノーインデックスになるのかはわかりませんwだれかがbody内でもクローラーがnoindex読むで!を実験してたので、おそらくインデックスが消えると思われます。サーチコンソールにアメブロは登録してないし、URLを消すのも面倒くさいので、勝手にインデックスが消されるのを待ちたいと思います。アメブロでフリープラグインにノーインデックス入れたら果たしてインデックスは消えるのか!の人柱実験でもあるので経過報告はしますwそもそも当ブログはcssのdisplay:noneで要素を消去しまくってるため、いわゆる隠しコンテンツだらけの状態になってます。Googleさんがどう判断してるのかはわかりませんが、本来表示されるだろう要素のうち半分以上が画面上消えています。要するに怪しいブログなので検索なんかに一切でないわけですね(泣)昔は結構一番上になってた記事もあったんですが、いつごろからか全部消え去りましたw何度も書いていますが、アメブロを消したり完全移行するつもりはありません。余裕で違反してるブログなのでこんなこと言ってても消えるかもしれないですけどねwこれからはアメブロ関係の記事も基本記事はワードプレス側に書くので、新記事みたいよ!って言う奇特な方はワードプレスの方を見てみてください。ワードプレスのURLは当ブログを探してもらえれば、何処かにあります(ここに貼るのはちょっと嫌な感じなので貼りません)インデックス外れたら、アメブロ側の記事を消さずに記事を移行していいと考えていいのかな?

      12
      3
      テーマ:
  • 28 Dec
    • HTTPSとHTTP

      アメブロがHTTPS化するかも!っていう話を結構聞きます。そもそもHTTPSってなんだ?という話ですが、URLは基本的に2種類あるのを見たことがあると思います。http://ameblo.jp/zzdinohttps://ameblo.jp/zzdinoアメブロは上の「S」が現状ついてない方です。「S」がついてるとこと言えば、例えばツイッターのタイムラインとかアメーバオウンドは「S」がついてますね!このSが何なのかですが、「暗号化処理の証明」みたいな感じです。HTTPS=暗号化みたいな感じ。HTTPSないしSSL通信は通信の処理を暗号化して傍受しにくくする通信方法で、どうやっているかとかまで詳しい話はよくわかりませんが、簡単に言うと「安全」の証明です。クレジットカードを登録したり、個人情報を登録したりするページは、HTTPSになっていなかったらかなり危ないということです。そんなサイトは今はほとんど無いので気にしないかもしれないですが、HTTPだと理論上だれでも中身を見れちゃうみたいなので(やり方は知らない)怖いですね!ちょっと前までは、そういう登録ページなどだけHTTPS化して、ほかは普通にHTTPというところが多かったのですが、最近はいろいろ悪いことをする人も悪い事出来ちゃう技術も増えているので、サイトやブログの「全ページHTTPS化」の流れがきています。Googleさんも「HTTPS」を検索で優先しちゃうかもよ!みたいなこと言ってるので、一気に最近話題ですね。正確にはまだ他サイトより優先ということではないようですが。参考:HTTPSページを優先的に検索結果に表示するようにGoogleがインデックスシステムを調整アメブロはマイページもHTTPSじゃないので悲しい限りですが、ブログがHTTPSになるとかならないとか。そして新スキンはHTTPSを意識してるとかしてないとか。アメブロがHTTPSになったとしたら、アメブロがどこまで自動で対応してくれるかですが、それはなってみないとわかりません。画像リンクの書き換えやリンクの書き換えがサーバーレベルで通常では必要になります。今まで書いた記事全部書き換えということですねwタイヘンダその辺自動化してくれるのか(多分してくれると思いますが)、もう1個注意しないといけないことがあって「プラグイン」の対応です。HTTPS化されているサイトはブラウザの表示が「https://~」で始まっており、「カギ」のマークが出ています。ブラウザによって絵柄は違いますが全てのブラウザでHTTPS対応ページは鍵マークがついてます。ようするにこのページは「安全」だということです。ただアメーバオウンドなんか見てみるとこういうサイトが多いです。鍵マークにビックリマークがついてます。これは「せっかくHTTPSしてるのに、プラグインとかに邪魔されて暗号化出来ない」の合図です。いろんなオウンド見てみましたが、こういうサイト多くて笑いますwこのマークがあると基本的にはSSL通信はできないので通常のHTTPの通信になるようです。オウンドが何であんなに重いのか、とかは置いておいてせっかくHTTPS化してくれてるのに、何してんだwって感じです。このマークどうして付くのかといえば前述の「プラグインがHTTPS対応してない」からです。世の中に出回ってる無料のプラグインは大抵HTTPS対応はしてないので適当にプラグインをいれると大体こういう感じになります。勿体無いですね。プラグインがHTTPSに対応すればそれで良いのですが、プラグインをHTTPSに対応するには普通お金がかかります。月々いくらとかかかります。なので普通の無料プラグインはHTTPSに対応することは基本ないと思っていたほうがいいです。無料で配ってあげた挙句、お金取られるとか馬鹿くさいですからね、配ってる側からすれば当然です。ただでさえサーバー代とかもかかってるわけで。オウンドがせっかくHTTPSなのにあんな現状なので、アメブロのHTTPS化はまだ先の話なんじゃないかなーと思ってますが、もしアメブロがHTTPS化したら、中途半端にサーバー借りて配ってるようなプラグインは全部使えない(使ってもいいけどHTTPS化されない)、うちで配ってるのはアメブロがHTTPS化してくれれば勝手にHTTPSになるはずのコード(なってみないと現状わかりませんがw)なので自分は気にしてないですが、人のコード借りてる人は気にしときましょう。オウンドの鍵マークが「ビックリマーク」になっている人は早急に対処しましょー

      9
      4
      テーマ:
  • 14 Dec
    • 続:プロフィール画像表示プラグインについて

      落ち着いてからいじると言いつつ検証してました。いろいろ検証してみた結果、プロフィール画面からプロフィール画像を入手していたのですが、そのために利用していたYQL(Yahoo!のサービス)が落ちてる?ようです。アメブロのせいだとばかり思っていたのですが、どうやらYahooさんの仕業みたい。https://developer.yahoo.com/yql/このページが落ちているということではなく、画像貼りましたが、上のURLの中の右の方にこんな感じの部分があると思うのですが、「TEST」と押した時「コードぽいもの」が普通なら出ます。なぜか「LOADING Data..」からすすみません。これが動かないとここで配っているプラグインは動きません(泣)全然情報もなく英語も頑張って探してみましたがないので、なにか違うものに変わるのかもしれないです。誰か知っている人がいれば教えて下さいませ。雰囲気的にはYQLが認証か何かを設けそうな雰囲気を醸し出してるので、もし設けてしまった場合別の対策を考えます。

      8
      17
      テーマ:
  • 13 Dec
    • プロフィール画像表示プラグインについて

      気がついていたのですが放置スミマセン(泣)アメブロ側の仕様変更があり現在表示されていないようです。実は1週間ぐらい前から表示されたりされなかったりを繰り返していたので、アメブロ側が何かやってるなというのは気がついていたのですが、放っておくと治ったりもするので放置してました。今日は表示されていないようですが、サイバーエージェントも今日は休みなはずなのでw明日になったら治るかもしれません。おそらく新スキン導入に伴うプロフィール画面の変更等も計画されているのではないかと予想しています。プロフィール画像はプロフィール画面から取得してますのでプロフィール画面が変更されると動かなくなります。ですので緊急に対策をこうじてもいいのですが、いかんせん仕様変更がどうなるか謎ですのでアメブロ側の仕様が安定してプラグインが動かなかった場合のみ、修正を加えたいと思います。使用してくださる方には大変ご迷惑をお掛けしますが、直した瞬間仕様変更されたりすると凹むのでお待ち下さい。

      8
      4
      テーマ:
  • 01 Nov
    • 日本語Googleフォントを使う

      いつの間にかGoogle fontsに日本語フォント増えてました(去年の話ですが)本家GoogleFonts出始めのころ結構使ってる人いましたが、今はアメブロではほとんど見なくなったグーグルフォント。誰でも使えて簡単に使えて人によっては便利だと思うんですが、何にせよ英語のフォントしか無かったので日本ではそんなに普及しなかった感があります。ただ去年、日本語フォントが入ったらしく調べてみたらほんとに入ってました。このページだけ案の定そのフォントを対応させました。フォント名は「Noto Sans Japanese」綺麗に見えるかなーフォントの話はどこかで書いた気もしますが、使ってるOS(ウィンドウズとMacとか)によって全然違う表示になります。パソコン自体に何のフォントが入ってるかに依存するので、ウィンドウズでこう見えてるからMacでも同じく見えてると思うのは間違い。MacでもWindowsでも同じく見える(はずの)日本語フォントは今のとこ1種類しかないし、フォントが変われば文字幅も変わるのでフォントが変わるせいで表示崩れはCSSの組み方が雑なら結構起きます。ただこの「Google fonts」を使えば理論上WindowsでもMacでもiPhoneでもアンドロイドでも(リナックスでも)同じ見た目のフォントが適用できるって事。便利ですね!ただフォントをダウンロードして適用させるので時間がかかります。4.5Mもあるみたいなのでしょうがないですね。英語とくらべて日本語は文字の種類が多いですので当たり前です。そんな事もあって結局全くあまり流行らなそうなグーグルフォントですがアメブロで使う場合はこんな感じで簡単に使えます。フリープラグイン<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">Googleにホスティングされてるのを使います。さすがGoogleCSSbody, input, button, select, textarea {font-family: 'Noto Sans Japanese', serif;}結構きれいなフォントなので見やすいですけど、どうかなー。やっぱりラグがあれですね。参考サイト様http://on-ze.com/archives/2629@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

      8
      2
      テーマ:
  • 30 Oct
    • ≡ から × にヌルッと CSSで

      上の「≡」にマウス乗せるとぬるぬる動きます。最近アンドロイドアプリにこういう動きするのが多くて、これが「マテリアルデザイン」なのかな?物質的って言われればそんな気もする動き。どうやってやってるんだろう思いながらCSSいじってたらそれっぽくなったので使ってみた。CSSのtransitionとtransform-originの使いかたが肝っぽい。ぬるぬる「≡」と「×」が入れ替わるのでちょっと面白い。右上のメニューボタンに使ってみましたー。ヌルット動きまーすHTML<div id="mbutton"> <div></div> <div></div> <div></div></div>CSS#mbutton {cursor: pointer;height: 35px;width: 35px;}/*棒ぽく見せるCSSとトランジション*/#mbutton div {background-color: #999;height: 3px;margin: 5px 5px 0;width: 25px;transition:transform 0.2s linear 0s;-webkit-transition:-webkit-transform 0.2s linear 0s;}/*トランジションの原点を左上に*/#mbutton div:nth-child(1) {transform-origin: left top 0;-webkit-transform-origin: left top 0;}/*マウスが乗ると45度回転*/#mbutton:hover div:nth-child(1) {transform: rotate(45deg);-webkit-transform: rotate(45deg);}/*トランジションの原点を左下に*/#mbutton div:nth-child(3) {transform-origin: left bottom 0;-webkit-transform-origin: left bottom 0;}/*マウスが乗ると-45度回転*/#mbutton:hover div:nth-child(3) {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}/*真ん中の棒はマウス乗ったら消す*/#mbutton:hover div:nth-child(2) {visibility:hidden;}

      8
      テーマ:
    • 右上にメニュー付けた

      右上にメニュー付けました。昨日付けたフォローボタンがどうしても記事下にあるのが微妙過ぎて消したくなって、どこかに隠そうとした結果メニューになりました。そんなに邪魔じゃないですね!右上のメニューボタンが見えない方は更新してみてください。普通のメニューだけど、もう少しいじりつつ何入れるか考えます。フォローボタンしか今んとこ入ってないしね!さみしい!さようなら記事下フォローボタン

      9
      5
      テーマ:
  • 28 Oct
    • たてブロ

       日本人ならやっぱり縦書きでしょ! こんなのもいちょう実装できたりします。しかも今の時代ならCSSだけでほぼ出来ちゃう感じ。使えるのか使えないのか微妙なラインのあれですけども・・・w インターネットって海外から入ってきたものだから、横書きが基本ですけど、日本人ならやっぱり縦書き!和風なブログとかサイトならいい感じかも。 でもブラウザの実装状況が微妙でIEは5.5時代から使えるというすごい機能ですが、Safariがもしかしたらダメかも。わからないけど。Operaさんは表示がなんか微妙。Firefoxは最近導入されたのか、アップデート状況によっては上手くいかない模様。 プラグイン的なのでも出来ない事はないですがCSSだけで出来ちゃうなら、それに越したことはないですね!ただすべてのブラウザで同じく見えるわけではないので、利用される奇特な方がいれば、色んなブラウザでしっかり縦書きになってるか確認してから使いましょー。 自分ちの環境ではIE OK、FF OK、GC OK、OP 微妙でした。あとアルファベットや数字が縦書きにならないですが、出来ない事はないんだけどFirefoxの表示がやばい事になったのでアルファベットを縦にするのは見送り。 フォントとか和風な感じにしたら雰囲気出るかもしれないですね!CSS(コピペしにくそう).articleText {overflow-x: scroll;width:670px;/*ご自分のブログに合わせて調整*/height: 540px;/*ご自分のブログに合わせて調整*/writing-mode: vertical-rl;-webkit-writing-mode: vertical-rl;writing-mode: tb-rl} スクロールしにくかったり色々問題があるCSSではあるので、今後の進化に期待しつつ、こんなことも出来ちゃいますという報告でしたー。もし縦書きになってないよ!という方がいれば使用ブラウザとか書いてコメントしてくれると喜びます。 読みづらい!!!!

      10
      12
      テーマ:
  • 27 Oct
    • 現在の総記事数

      需要がなさそうな上に、過去記事焼き増し(何度目)ブログの記事が全部で何記事あって、それを計算して出してくれる感じのコード。 現在の総記事数はです!!といった感じで表示してくれます。(↑計算したものを実際表示してます)少し頑張って作ったので、フリースペースにもフリープラグインでもメッセージボードでもどこでも表示できるようにしました。チョイ技な割にはコードが長いですが、バグ回避のためしょうがない。フリースペース、フリープラグイン、メッセージボードのどこか1か所現在の総記事数は<span id="aCount"></span>です!!!周りの「現在の総記事数は」と「です!!!」は自由に変えられます。総記事数<span id="aCount"></span>件とか 今全部で<span id="aCount"></span>個記事があるよ♪とかの感じでご自由に。<span id="aCount"></span>の部分は消しちゃダメです。フリープラグイン<script>document.addEventListener('DOMContentLoaded', function() {var doc = document;var i;var count = 0;var aCo;if(aCo = doc.getElementById("aCount")){var side = doc.querySelectorAll(".themeMenu li a");var sideL = side.length;for(i=0;i<sideL;i++){count += ~~side[i].textContent.match(/\(\s\d+\s\)/)[0].slice(1,-1);}aCo.textContent=count;}})</script>ちょっと長いですけどこれでも頑張りました。追記上のだと長いという方用、コンパクト版作りました。<script>document.addEventListener('DOMContentLoaded',function(){var a=document;var i;var b=0;var c;if(c=a.getElementById("aCount")){var d=a.querySelectorAll(".themeMenu li a");var e=d.length;for(i=0;i<e;i++){b+=~~d[i].textContent.match(/\(\s\d+\s\)/)[0].slice(1,-1)};c.textContent=b}})</script>CSSで数字の部分をいじれます。CSS#aCount{color:#ff0000;/*文字色*/font-size:30px;/*文字サイズ*/}※サイドバーから「テーマ一覧」を外している場合は使えません。※テーマ一覧は大体の人が表示してるので多分大丈夫※サイドバーにテーマ一覧がなくても大丈夫バージョンも作った。※でもきっと需要無いからここの記事だけそれで動かす! <script>(function(){var i;var count = 0;var http = new XMLHttpRequest();http.onreadystatechange = function(){if ((http.readyState == 4) && (http.status == 200)){var dummy = doc.createElement('body');dummy.innerHTML=http.responseText;var side = dummy.querySelectorAll(".themeList a");var sideL = side.length;for(i=0;i<sideL;i++){count += ~~side[i].textContent.match(/\d+/)[0];}doc.getElementById("aCount").textContent=count;}};http.open("GET","http://ameblo.jp/zzdino/themeentrylist-10018249846.html",true);http.send(null);})()</script>

      8
      8
      テーマ:
  • 24 Oct
    • 游ゴシック

      Windowsだと8.1から、MacだとOS X10.9から「游ゴシック」「游明朝」っていうフォントが追加されました。いままでWindowsとMacに同じ日本語フォントが入るってことはなかったんですが、やっと!おんなじフォントが入りましたパチパチっていってもWin8にする人が少なくてWin10にWin7からあげました!って人が結構多いような気がして(自分も)あまり見る機会がなかったんですが、自分もWin10に上げたので結構色んなとこで見るようになりました。Windowsだとなんだか若干かすれて見えるような気もしなくもないフォントなんですが「メイリオ」みたいに丸っこくなくて大人の文字って感じがします。メイリオは可愛い感じになりやすいけど、こっちは紳士的。折角なのでこのページの記事だけ「游ゴシック」にしてみましたーうちみたいなブログでは若干に合わないですねw使ってるブログ様があるので紹介Pasha+Pin1-pixelどっちも完全によくコメントくれる方のブログですがwきれい系ブログには合うなーって思うフォントです。ただ注意なのはWin7の方にはこのフォントは見えませんので、こういう風には見えてません。Win7が今どれぐらいいるのか、移行期間なのでどんなもんなのかわからないですが、そこだけ注意です。アメブロでの設定CSS Win7以下にはメイリオが適用されますbody, button, input, select, textarea{font-family:"游ゴシック","YuGothic","Yu Gothic","メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",sans-serif;font-weight:normal;}游明朝ってフォントもあるので気になる方は下記サイトで↓参考サイト様http://qiita.com/llsmrsll/items/f019b8daadf798066001http://qiita.com/shinnn/items/5be7e8106189311559c1

      9
      テーマ:
    • ぽいぽいpocketが便利

      この記事あとから読みそうだなー、とかこの記事あとで使えそうだからとっとこ!とかにはpocketが便利ですね!日本語化したのはそれなりに最近みたいだけど、ネット検索すればものすごく記事が出てくるぐらい普及した感じ。もともとread it laterって名前でなんか暗い感じのツールでしたが、名前を変えて明るくなってアプリなんかもいい出来!PCでも「この記事保存したいなー」と思ったら1クリック(本当にワンクリック)で保存できるし、スマホでも2タップでぽいっと保存できちゃう。スマホなら【あとで読む】pocketの使い方|2タップで簡単に保存する方法PCクロームならhttps://chrome.google.com/webstore/detail/save-to-pocket/niloccemoadcdkdjlinkgdfekeahmflj?hl=jaクラウドにたまってくのでスマホでもPCでも保存したのはどちらでも見れるし、PCで保存したページがスマホで後から読めるのはいいですね!寝ながら読める!なのでうちのブログもpocketに対応すべく、下のソーシャルアイコンにpocketを作ります。イメージはこんな感じ ※これは画像です。これの真似をして、CSSだけでこのアイコンを頑張って作成します。画像使わない主義なので、気合で頑張る。出来る気はする。この下に作りました。見えない方はF5を押して更新!※これはCSSです。イマイチ角が丸くならないけど、ソーシャルボタンだからちっさくなるし、これぐらいでいいね!afterとかbeforeとか頑張ってCSSだけで、かつdiv1つだけで作りましたー画像じゃないぞーHTML<div id="#pocket"></div>CSS#pocket::before {    background-color: #fff;    border-radius: 10% 10% 50% 50%;    content: "";    display: block;    height: 5.5em;    left: 50%;    margin-left: -3em;    margin-top: -3em;    position: absolute;    top: 56%;    width: 6em;}#pocket::after {    background-color: transparent;    border-bottom: 0.75em solid #f04055;    border-radius: 0 15% 10%;    border-right: 0.75em solid #f04055;    content: "";    display: block;    height: 2.5em;    left: 47%;    margin-left: -1.25em;    margin-top: -1.25em;    position: absolute;    top: 42%;    transform: rotate(45deg);    -webkit-transform: rotate(45deg);    width: 2.5em;}#pocket {    background-color: #f04055;    border-radius: 50%;    font-size: 20px;/*大きさを変えるにはココを変更する*/    height: 10em;    position: relative;    width: 10em;}#pocketだけ!pocketのアイコンならぎりぎりCSSだけで作れちゃうって事ですねwfontsizeとemの合わせ技で大きさもfont-sizeを変えるだけで変更できる便利バージョン。あとでソーシャルボタンに付けたそ#pocket2::before {background-color: #fff;border-radius: 10% 10% 50% 50%;content: "";display: block;height: 5.5em;left: 50%;margin-left: -3em;margin-top: -3em;position: absolute;top: 56%;width: 6em;}#pocket2::after {background-color: transparent;border-bottom: 0.75em solid #f04055;border-radius: 0 15% 10%;border-right: 0.75em solid #f04055;content: "";display: block;height: 2.5em;left: 47%;margin-left: -1.25em;margin-top: -1.25em;position: absolute;top: 42%;transform: rotate(45deg);-webkit-transform: rotate(45deg);width: 2.5em;}#pocket2 {background-color: #f04055;border-radius: 50%;font-size: 20px;height: 10em;position: relative;width: 10em;}

      7
      2
      テーマ:
  • 23 Oct
    • こちらのプラグインを使っている方へ

      ちょっとうまくリクエストが届かないことが結構あるみたいです。うちのプラグインのダウンロードがうまくいかないっぽいです。コメントのURLをリンクに ついでに画像をフリープラグイン 新スキンはこちら<script src="https://dl.dropboxusercontent.com/u/30854176/CommentURL.js"></script>旧スキンはこちら(動作確認済)<script>window.addEventListener("load",function(){var d=document;var a=d.createElement("script");a.src="https://dl.dropboxusercontent.com/u/30854176/CommentURL.js";d.body.appendChild(a)},false)</script>赤字が付け足した部分です。自分でつけたしていただいてもいいですし、元々あるものをけしてこれに変えていただいても大丈夫です。またうちのブログのプラグインでURLの中にdl.dropboxusercontent.comが入っているもの(ドロップボックス経由のもの)が今回の対象です。他のドロップボックス経由のものもいくつかあるのですが、もしそれを使っている場合もお願いいたします。プロフ画像のプラグインはドロップボックス経由ではないので大丈夫です。https関連のドロップボックスサーバー側の反応が変わったのかどうなのかよくわからないですが、https付け足すだけで治るので直してください。ご迷惑おかけしますがお願いいたします。

      7
      テーマ:
    • 公開 ブログBOMB

      押すなよ!絶対押すなよ!フリープラグイン<img id="bomb" src="//stat.ameba.jp/user_images/20151022/19/zzdino/f0/d1/p/t02000180_0200018013461867937.png"><script src="https://dl.dropboxusercontent.com/u/30854176/bomb.js"></script>画像をオリジナルにしたい方、任天堂に怒られたくない方はこちらフリープラグイン<img id="bomb" src="画像のURL"><script src="https://dl.dropboxusercontent.com/u/30854176/bomb.js"></script><script>(function(){var doc = document;doc.getElementsByClassName("bomb")[0].addEventListener("click",function(){  var wild = doc.body.getElementsByTagName("*");  var wildL = wild.length;  for(i=0;i<wildL;i++){    var wildS = wild[i].style;    wildS.transition = "1s";    wildS.webkitTransition = "1s";    var X = Math.random()*600-300+"px";    var Y = Math.random()*600-300+"px";    var R = Math.random()*360-180+"deg";    wildS.transform = "translate("+X+","+Y+") rotate("+R+")";    wildS.webkitTransform = "translate("+X+","+Y+") rotate("+R+")";    wildS.transitionTimingFunction = "ease-out";    wildS.webkitTransitionTimingFunction = "ease-out";    wildS.position = "relative";    wildS.overflow = "visible";  }},false);})()</script>

      10
      24
      テーマ:
  • 21 Oct
    • 出来た コメの「無題」をいじる

      昔の記事の焼き増しですが昔の記事→コメの「無題」をいじるjQuery使わずに書いてみた。「無題」寂しいですね(無題でコメント書くなとは言ってない)「Re:無題」も寂しいですね(無題でコメント書くなとは言ってない)変えちゃいましょー①「無題」は「○○さんのコメント」にする②「Re:無題」は本文中の「>○○さん」をそのままタイトルにする。本文中の「>○○さん」はカット③「Re:Re:Re:無題」とRe:が何個あっても②と同じ動き。④「Re:無題」なのに本文中に「>○○さん」がない場合、「○○さんの返信」にする。こんな感じ。出来た!多分大丈夫。タイトル部分の正規表現は雑だけど記事部分は精密です。<script>  (function() {    var b = document;    var c = b.getElementsByClassName('commentBody');    var d = c.length;    var e = b.getElementsByClassName("commentHeader");    var f = b.getElementsByClassName("commentAuthor");    for (i = 0; i < d; i++) {      e[i].innerHTML = e[i].innerHTML.replace(/(Re:)+無題\s?$/, function() {        var a;        if (a = c[i].innerHTML.match(/^\s*>[^<]+さん<br>/)) {          c[i].innerHTML = c[i].innerHTML.replace(a, "");          return a        } else {          return f[i].textContent + "さんの返信"        }      });      e[i].innerHTML = e[i].innerHTML.replace(/無題\s?$/, f[i].textContent + "さんのコメント")    }  })()</script>変数名がダサいから/packer/かけたら余計わかりずらい!無題でコメントしてみてください!(無題でコメント書けと言ってる)上のだと長いという方、圧縮版。<script>(function(){var b=document;var c=b.getElementsByClassName('commentBody');var d=c.length;var e=b.getElementsByClassName("commentHeader");var f=b.getElementsByClassName("commentAuthor");for(i=0;i<d;i++){e[i].innerHTML=e[i].innerHTML.replace(/(Re:)+無題\s?$/,function(){var a;if(a=c[i].innerHTML.match(/^\s*>[^<]+さん<br>/)){c[i].innerHTML=c[i].innerHTML.replace(a,"");return a}else{return f[i].textContent+"さんの返信"}});e[i].innerHTML=e[i].innerHTML.replace(/無題\s?$/,f[i].textContent+"さんのコメント")}})()</script>

      9
      7
      テーマ:
  • 20 Oct
    • マニアックそうなブラウザ使ってみる

      WidowsからSafariが脱落して大手ブラウザが3つしかなくなっちゃったWindowsですが探してみると結構マニアックなブラウザありますね。スマホのブラウザなんかに進出してそっちの方が有名になっやってるようなブラウザもありますが、いくつかブラウザダウンロードして使用してみた使用感とか感想とか書いてみる。①Operaなんかマーク変わってる・・・!妙な立体感!スマホのブラウザとして結構有名になったおかげで知らない人はいないブラウザになりましたが、それまでは結構マニアックなブラウザでした。「オペラ最強伝説」ってずっといじられるような、使い心地の悪いブラウザでしたが、レンダリングエンジンをBlinkに変えたあたりからかなり使いやすいです。クロームなんかとほぼ変わらない感じ。ただBlinkに変えたせいで事件が起きてるんですが(後述)しかもオペラのくせにクロームの拡張が使えちゃいます。Opera(Blink版)にGoogle Chromeの拡張機能をインストールできるようにするすごいですねw白系統でまとめられてるのもオシャレです。回線が細くて遅い人用の「ターボモード」とかもついてて(使っても実感わくほど速くならないですが)、昔からついてる変態機能たくさん使えます。その上クロームの拡張。すごいですね!ロゴが何かに似てます。ここでネタにされてる。吸引力の変わらないただ一つのブラウザです。ゲームしながらニコニコとか見たい時に選ぶメモリ軽量ブラウザはVivaldiで決まりじゃね?オペラのダウンロードはこちらからhttp://www.opera.com/ja②Vivaldi上のリンクのネタ帳さんでも良いよ!って言われてるVivaldiです。オペラの初期製作者かつ元社長である人が作ったブラウザです。オペラにBlinkが入ることが決まって社長気に食わなかったみたいで、社長やめちゃったんです。「今のオペラはオペラであってオペラでない」そんなこと言ってやめました。そしてオペラに代わる新しいブラウザVivaldiを作った感じ。Opera、Presto、Vivaldi使われてる言葉が音楽用語(ヴィヴァルディは人名だけど)でオシャレですね。とくにPrestoっていう名前の付け方は秀逸だったなーって思います。無くなっちゃったけど。機能としては卒なく入ってるって感じです。上の方がオレンジ色ですが見てるページによってなんか色が変わります。アメブロだと緑です。ファビコンに合わせて変えてる感じ。上のネタ帳さんのリンクでも言われてるFlash問題は今は解決したっぽいので特に問題なくフラッシュゲームもできます。ただイマイチ特徴がない感じがする。メモリ使用が少ないのは古いパソコン使ってる人にはいいかもです。Vivaldiダウンロードはこちらからhttps://vivaldi.com/よくこのドメイン残ってたなーって思う。買ったんかな?③Sleipnirスレ,イ,プニルですね!カタカナでそのまま書くと残念なことに禁止ワードに引っかかってアメブロに消されちゃうかもなので間に点入れます。本当はないよ。Theタブブラウザ!って感じのひたすら「タブ」にこだわったブラウザです。こんな感じで上の方にタブがかなり豪華に表示されます。「タブを100個開いていても目的のタブが見つかる」っていう謳い文句だそうです。これもスマホブラウザでは結構有名?なのかなそのおかげで知ってる人もいるのかな?って感じになってきたブラウザ。いろいろ調べると面白くて、最初は個人開発のブラウザだったんですね!しかも日本人!日本人が作ったブラウザでは一番有名なブラウザになりました。ブラウザ界では「純国産」がいい!みたいのは聞かないので残念です。タブが見やすいってことの他に文字が変わります。Safariの文字ですね。(フォント名は知らない)見やすい感じではあるけど、指定無視されるのはちょっとムカってきますねwタブを占有してるスペースがでっかいこともあって画面が大きいパソコン向けですね。ノートパソコンとかではちょっと邪魔すぎる。不謹慎ワードのこともあって「ぷにる」って呼ばれることが多いブラウザ。可愛い感じ。ぷにるのダウンロードはこちらからhttp://www.fenrir-inc.com/jp/sleipnir/④Lunascape最後はルナ助!ルナスケープの特徴は何といっても「IE」にも「Firefox」にも「Safari」にもなれる謎の機能です!詳しく言うと「Trident」「Gecko」「Webkit」それぞれのエンジンをその場で変えられるブラウザです。WindowsはWebkitのブラウザが無くなってしまったので、(上の3つは全部Blinkです)唯一って言っていいWebkitブラウザ。上の3つと比べるとかなり汚い感じのするブラウザでした。あまりにも見た目がグチャグチャすぎて色々消した後の画像なんですが、ニュースが流れてきたりRSSRSSうるさかったりするブラウザ。消せるからいいですけど、最近の流行りじゃないなーって感じ。ブラウザで使われてるフォントもMSPゴシックだし古い。肝心の切り替え機能はまあまあかもですがWebkitが古い!ウィンドウズで開発終わっちゃってるからしょうがないんでしょうけど、webkit4なのかな?調べたけど分からなかったんだけど最新版のでは明らかにないです。Webkit調べられる!ってウキウキして入れましたが役に立たなかった・・・ルナ助。あえて使う意味はなさそうなブラウザです。ルナスケープのダウンロードはこちらからhttp://www.lunascape.jp/名前は断トツでかっこいいと思うまだまだマニアックなのも入ってるんですが、紹介する意味があるのかレベルなのでやめときます。ぷにるとかは結構使いやすいし、オペラも「オペラ最強伝説」が嘘じゃない感じに進化してます。いろいろ使ってみるのもまた面白い感じです。結局Firefox使うんですけどねwマスコットまでいますからね!フォクすけかわいいそしてフォクすけ専用サイトもある。フォクすけ専用サイトhttp://foxkeh.jp/頑張ってほしいけどなFirefox。応援してます。

      12
      5
      テーマ:
  • 19 Oct
    • ピグスタッフブログから「返信する」が消える

      「返信する」が【コメントをする】になってました。いつからだかわかりませんが、この前コメント書き込み窓が変わった時からかもですが文字が変わってる・・・押してみるとタイトルの「Re:ほにゃらら」とコメント内の「>ほにゃららさん」が出ません。つまり返信できない!!他のスタッフブログもそうなってんかなーって思って回ってみましたが、ピグライフとかピグ釣りブログは「コメントする」になってました。ピグカフェとかアイランドはなってなかった(え)これは「芸能人ブログ」もなってるフラグだ!と思って、市川海老蔵ブログ調べる。なってない。なってるのはピグ関係の、ちゃんと生きてるピグ関連のブログだけみたいです。いろいろ考えてみた結果、よくピグのスタッフブログとかって意味の分かんない2人が意味の分からない言い合いしたりしてますもんね。なんでここで喧嘩すんの的な。荒れ防止の目的。返信できなきゃ荒れないだろう的な。人のブログで他人同士が喧嘩するとか狂気の沙汰ですもんね。ピグ運営はコメントに「返信する」を放棄することになりますがwしてるの見たことないけど。でもそれなら「返信する」を消すだけでいいはずなんだけど、なぜか「コメントをする」に書き換え。なんで消さなかったんですかねーコメントするが並んでるの見るとちょっと気持ち悪い。芸能人ブログぐらいまでは波及する気がする変更ですが、おそらく一般のブログまでは来ない変更じゃないかと思います。変更する意味ないし。変更してもAPIの取り分を減らせるぐらい?あれ結構運営にはよさげな変更。一般も変わったりしてピグスタッフブログ

      11
      2
      テーマ:
    • 【追追記・公開】コメントのURLをリンクに ついでに画像を

      コードを大幅に書き換えたところ全部の問題が解決しました!?でもURLがリンクになります(泣)replaceって第2因数に関数取れるんですね!ベッドの中でスマホ見てたら発見して思わず全部書き換えましたw●機能・コメントのURLを自動的にリンク処理します。・コメントに貼られた画像リンクを自動で画像にします。・href="http://ameblo.jp" のように”(ダブルコーテーション)もしくは’(シングルコーテーション)で囲まれたURLはリンク処理しません。・詳しくは下のコメント欄を参照●注意・日本語URLには対応できません。予期せぬ場所でリンク処理が切れます。・URLの最後がjpg、png、gifなら画像と認識して画像になります。以下をフリープラグインフリープラグイン 新スキンはこちら<script src="https://dl.dropboxusercontent.com/u/30854176/CommentURL.js"></script>上のプラグインで上手くいかない場合コメント関係のプラグインと衝突することが多いですが、これならば大丈夫版上ので上手くいく場合は上のを使ってください。<script>window.addEventListener("load",function(){var d=document;var a=d.createElement("script");a.src="https://dl.dropboxusercontent.com/u/30854176/CommentURL.js";d.body.appendChild(a)},false)</script>●追加機能画像には横幅の最大値が事前に設定されています。その横幅の最大値が小さすぎる、大きすぎるという場合はCSSにこちらを足して調整してください。フリープラグインではなくCSSです。そのままでいいという場合は特にCSSの追記は要りません。CSS.commImg{max-width:230px !important;}・230を好きな大きさに変えてください。・最大でもコメント欄の横幅ぐらいがいいんじゃないかと思います。・人によって違いますが600px程度・!importantの部分は必須なので消さないようにしてください。・pxと!の間の半角スペースも大事です。・あくまでも横幅の最大値なので最大値よりもともと小さい画像は元の大きさで表示されます。以下コードの話。興味ある方だけ。第二因数function使ったら楽勝でした。追記:旧スキンの一文字目解釈の相違のためinnerHTML→outerHTMLに変更 (function() {      var doc = document;      var commBody = doc.querySelectorAll(".commentBody,.comment_body");      var commBodyL = commBody.length;      for (i = 0; i < commBodyL; i++) {          commBody[i].outerHTML = commBody[i].outerHTML.replace(/[^"']https?:\/\/[\w\/\.\-#=%&_!\?;\+]+/g, function(url) {              var cutUrl = url.slice(1, url.length);              if (cutUrl.match(/(jpe?g|png|gif)\/?$/)) {                  return url[0] + "<img class='commImg' style='display:block;margin:10px auto;max-width:230px;' src='" + cutUrl + "'>"              } else {                  return url[0] + "<a target='_blank' rel='nofollow' href='" + cutUrl + "'>" + cutUrl + "</a>"              }          })      }  })()

      12
      60
      テーマ:
  • 18 Oct
    • コメントのURLをリンクに 画像もついでに

      実験中配ってる人結構いますが、コメントにURLが2個以上あると最初の1個しかリンク処理してくれないのが多いですねwみんな同じ考えで作ったんだなーすごいなー、考えることはみんな一緒なんだね!機能・2個以上あってもあっても全部リンク処理・コードっぽいやつ href="http://~~~"とかには反応しない (完全にうちみたいなブログ専用コード) (これのせいで配布してる割に入れてない人多いです。)・画像のURLは勝手に画像にしちゃう(おせっかい機能の可能性)・日本語URLはバグる(どう頑張っても厳しい)・なんかたまに処理してくれない(調査中)・同じURLを2個書くとバグる(書かないでください;;)暫く実験して問題起きなければコード書きます。処理が煩雑なので大変だった。これでコメント欄に画像載せられる感じですね

      9
      26
      テーマ:
  • 16 Oct
    • IEのみバグ?仕様?iframe上のhover

      「いいね」ボタンにマウスをホバーした際、jsで制御してもいいんですが、折角だからCSSで制御しようと、iframeを含むいいねボタンをつつむのdivにhoverしたら、下の感じで出るはずなのですが、IEだけなんか出ない・・・マウス乗せてるのにいいねボタンがアメブロはiframeになります。その周りに対してhoverをかけたので、その中にあるiframeも当然hoverの対象になるものだろうと思っていました。色々調べた結果iframe を含む div の hover が効かない @ IEhttps://teratail.com/questions/11799おんなじアクシデントの方いました。対処自体は大した事ないので、どうでもいいんですが、これ仕様?バグ?iframeはクロスドメインの場合、CSSもjavascriptでもどうしよもない不可侵領域みたいになるのですがその影響かなあ。仕様といわれれば仕様なきもする感じ。CSSのhoverは効かないんですけど、javascriptのmouseoverとかは効くのでやっぱりバグかなあ。ガバガバだよなーIEもEdgeもそうだったので、そういう状況になったときメンドイあれですね。治らない気がする仕様。http://www.sohovillage.com/market/helpwanted/142270573760/このバグ(仕様)解決したら1万円もらえるそうですイイナア

      10
      4
      テーマ:
AD
AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。