pixeLOG
  • 18Jul
    • YouTubeで動画の周りを暗くして見やすくするブックマークレット

      YouTubeで動画の周りを暗くして見やすくするブックマークレットを作りました。Google Chromeの拡張機能「Turn Off the Lights」のブックマークレット版だと思っていただれければいいと思います。ブックマークレットは動作が重くならないので拡張機能より快適だと思います。ソースイジる用javascript:(function(){var filter = document.getElementById('filter');var player_container = document.getElementById('player-container');if(!filter) { var filter = document.createElement('div'); filter.setAttribute('id','filter'); filter.setAttribute('style','position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:9998;tansition'); document.body.appendChild(filter); player_container.style.zIndex='9999';}else { document.body.removeChild(filter); player_container.style.zIndex='';}})()8行目のbackgroundのところをイジると、周りのフィルターを好きな色に変えられます。今回は半透明にしたいのでrgba表記にしてあります。0.85の数値をイジれば透明度を変更できます。(1で真っ暗)使う用javascript:(function(){var filter=document.getElementById('filter');var player_container=document.getElementById('player-container');if(!filter){var filter=document.createElement('div');filter.setAttribute('id','filter');filter.setAttribute('style','position:fixed;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:9998;');document.body.appendChild(filter);player_container.style.zIndex='9999';}else{document.body.removeChild(filter);player_container.style.zIndex='';}})()上のコードをブックマークのURL欄にコピペして登録してください。あとはYouTubeの再生画面を開いている状態でブックマークを押せば、あなたを快適なYouTubeライフに誘います。説明とか当方、JavaScriptに関してはトーシローのため、とりあえず動けばいいという信念の元で作成しております。このブックマークレットの使用については自己責任でお願いします。てへぺろ(・ω<)

      4
      テーマ:
  • 12Jul
    • YouTubeのサムネイルをオリジナルサイズで新しいタブに開くブックマークレット

      YouTubeの動画を見ているときに、サムネイルをもっと大きな画像で見たいなと思うことがあったので、サムネイル画像をオリジナルサイズで新しいタブに開くブックマークレットを作ってみました。javascript:window.open('http://i.ytimg.com/vi/' + location.href.replace(/https:\/\/www.youtube.com\/watch\?v=/,"").replace(/[&|?|#].*/,"") + '/maxresdefault.jpg');上のコードをブックマークのURLに入力して保存し、YouTubeの再生画面が開いている状態で、ブックマークをクリクリしてください。きっと幸せになれます。(?)

      4
      テーマ:
  • 31Jan
    • 皆既月食2018

      肝心の赤くなった月は暗すぎて撮れませんでした。 :;(∩´﹏`∩);:

      5
      テーマ:
  • 15Aug
    • CSSで記事下に定型文を挿入する

      アメブロカスタマイズではJavaScriptで定型文をいれる方法が普通でしたが、もうすぐscriptが使えなくなるのでその代替案。CSSだけで定型文を入れます。ただしHTMLを使うことができないので、リンクは貼れません。文字を挿入.skin-entryBody:after { display: block; content: "ここに文字 \a ここに文字"; margin: 20px 0; /* 上下の距離 */ white-space: pre;}疑似要素を使ってテキストを挿入します。\aで改行できます。文字を装飾文字を装飾することで箱みたいなのも作れます。サンプル1ここに文字ここに文字.skin-entryBody:after { display: block; content: "ここに文字 \a ここに文字"; margin: 20px 0; /* 上下の距離 */ padding: 20px; /* 内側の余白 */ border: 2px solid #24B4C0; /* 線の太さ 種類 色 */ border-radius: 4px; /* 角の丸み */ white-space: pre;}サンプル2ここに文字ここに文字.skin-entryBody:after { display: block; content: "ここに文字 \a ここに文字"; margin: 20px 0; padding: 20px; background:#eee; box-shadow:4px 4px 0 #ccc; white-space: pre;}画像を挿入.skin-entryBody:after { display: block; content: ""; width: 100%; height: 147px; /* 画像の縦幅 */ background: url(画像URL) no-repeat; background-size: contain; white-space: pre;}画像を挿入すれば、かなり凝ったデザインも作れます。画像を挿入する方法は、contentに画像URLを指定する方法とbackgroundに画像€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€を適用する方法がありますが、後者の方がデザインしやすいのでオススメです。

      7
      6
      テーマ:
  • 22Apr
    • コメントボタンの吹き出し部分がクリックできない問題を直す

      アメブロのコメントボタンは、吹き出しアイコンとコメント数の部分がクリックできません。それを直します。CSS[data-uranus-component="entryButton"] .commentWinOpenBtn { position: relative;}[data-uranus-component="entryButton"] .commentWinOpenBtn::after { content: ""; display: block; position: absolute; width: 138px; height: 48px; top: 0; left: 0; z-index: 10;}aタグの疑似要素はちゃんとリンクとして機能するので、疑似要素を上に被せます。応用すればコメントボタンのクローンも作れます。(このブログではサムネイル画像の下にある赤いボタンがクローンコメントボタンです)ちなみに、当ブログのようにクローンボタンを絶対配置している人は注意が必要です。絶対配置の起点を子要素ごとに選べたらいいのに...いつか出来るようにならないかな。

      10
      2
      テーマ:
  • 16Apr
    • CSSのみでクリックで画像を拡大する(Lightboxもどき)

      CSSだけでLightboxっぽいものを作ってみました。画像をクリックすると画像がその場で拡大します。デモ画像拡大下の画像をクリックしてみてください。 テキストにも拡大リンクを貼れます。→スイセンの写真を見る応用 - YouTubeの動画を拡大YouTubeを拡大して再生することもできます。LOVER / AAA弱点とか説明とか 記事に表示する画像と、拡大に使用する画像の2つを読み込む必要があります。(SEO的によろしくないかも?) アンカーリンクを利用するので、拡大すると履歴に残り、ブラウザで戻るのが大変になりますww スマホで見ると画像が二枚になるので、スマホにもCSSを読み込んでください。 右上の閉じるボタンはお飾りです。実際はどこを押しても記事に戻ります。実装方法CSS.lb { display: flex; position: fixed; width: 100%; height: 100%; top: 0; left: 0; justify-content: center; align-items: center; background: rgba(0,0,0,.7); opacity: 0; transition: .3s opacity ease; z-index: -1;}.lb img { width: auto !important; max-height: 100%!important; transform: scale(.7); transition: .4s transform ease; pointer-events: none;}.lb:target { opacity: 1; z-index: 103;}.lb:target img { transform: scale(1);}/* なんちゃって閉じるボタン(いらない場合は消す) */.lb::before,.lb::after { display: block; position: fixed; content: ""; width: 24px; height:3px; top: 24px; right: 12px; background: #fff; border-radius: 4px;}.lb::before { transform: rotate(-315deg);}.lb::after { transform: rotate(315deg);}HTML<a href="#sample01"><img src="記事の画像URL"></a><a id="sample01" href="#close" class="lb"><img src="拡大する画像URL"></a>赤文字の箇所は、画像毎に文字列を変えてください。また、同じページで文字列が被らないようにしてください。(トップページやカテゴリーページに注意!)YouTubeは以下のように記述することで拡大できます。<a href="#youtube">ここに文字</a><a id="youtube" href="#close" class="lb">YouTubeで発行する埋め込みコード</a>

      8
      テーマ:
    • WalkmanSシリーズ用の手帳型ケース / AVS-S16WDTBK

      以前から探していたWalkmanSの手帳型ケースを見つけたので、衝動買いしてしまいました( ゚∀゚ ) WalkmanA用の手帳型ケースは以前からあったのですが、S用は無かったんですよね。付け方付け方は簡単で、下の粘着テープのフィルムを剥がして、パッケージのプラケースに戻してWalkmanを上からはめるだけです。粘着テープは特殊な素材でできていて、濡れた布で拭うと粘着力が復活するらしいです。5回くらい貼り直しましたが、粘着力は落ちませんでした。見た目見た目はまさに一昔前の電卓ですね。嫌いじゃないですww色はAmazonのレビューにもありますが、公式の写真より少し明るいグレーで、カラーバリエーションは今のところ黒しかないみたいです。Walkmanの色が黒かシルバーだと合いやすいかもしれません。余談ですが、今使っているWalkmanは2013年モデルで、3年以上使っていますが本当に丈夫ですね。あと10年は使えそうな勢いです。8GBなので容量が厳しくなってきましたが、曲を厳選して使っています。

      6
      テーマ:
  • 15Apr
    • 満開の桜

      近所の公園で桜の写真を撮ってきました。桜が開花したのはいいけど、ここ数日天気が悪かったり忙しかったりで、お花見できませんでした。気づいたらもう萎れて散ろうとしてます(´・ω・`)今年は開花が遅かったので、長持ちしている方かもしれません。

      8
      テーマ:
  • 08Apr
    • 昔のブログデザインを発掘した

      昨日はヘッダーとカテゴリーページのカスタマイズをしていました。カテゴリーページはまだ未完成ですが...よかったら見てみてください。ちょっと違う感じになっています。あと記事のサムネイルに使っているpictureというタグがAMPエラーに引っかかって、Google先生に怒られてしまいましたww以前WordPressでブログをしていたときは、PHPで分岐させて自力でAMPに対応させていたので、Google先生にしょっちゅう怒られていたんですが、先日久しぶりにGoogle先生からお怒りのメールが来て、何事かと思ったら、アメブロだったという。早く直さないと記事数が増えて大変なことになるな...でもやる気が出ない。昔のブログデザイン以前アメブロをやっていたときのCSSは、バックアップは取っていたんですが、PCのHDDが壊れたりして消えちゃったんです (´・ω・`)でもサブアカにもバックアップしていたみたいで、そのブログを発見しました。以前書いた、ブログの歴史の記事にもちょっと画像がありますが。懐かしい!!http://ameblo.jp/jupiter0426-02/http://ameblo.jp/jupiter0426-03/当時は最高にかっこいいと思って使っていたんですが、今見るとすごくダサい。記事の幅もすごく狭いし。よくこんなので記事を書いていたな...。ブログのデザインはこまめにバックアップを取っておいた方がいいですね。将来の自分が楽しむために( ゚∀゚ )

      テーマ:
  • 06Apr
    • アメブロがSSL化しました!! ※ただし

      アメブロのSSL化がとうとう来ました!!!( ゚∀゚ ) URLをhttpsにしてアクセスしたら、URLバーに鍵マークが表示されます!!されますけど...思ってたのと違う僕はてっきり、普通のURLはhttpsの方へリダイレクトされると思っていたのですが、どうやらそうではないらしい。 4/6(木)のアメブロHTTPS化に伴い、アメブロには http://ameblo.jp/ブロガー様のID/ https://ameblo.jp/ブロガー様のID/ http://gamp.ameblo.jp/ブロガー様のID/ https://gamp.ameblo.jp/ブロガー様のID/ の4種類が存在することになります。 http://ameblo.jp/ca-seo/entry-12263054146.htmlえ?どういうこと?普通のURLも残るの?これSSL化した意味ある?SEO的に大丈夫なの?っていうか、SEO情報ブログの方じゃなくて普通のスタッフブログで告知しろよwwフリープラグインはどうなった?フリープラグインで読み込んだjsは、普通のURLでアクセスすると認識していますが、httpsでアクセスすると、scriptタグが全て排除されています。jsは別アカのCSSなら読み込めるんじゃないか、と密かに企んでいたんですがダメでした。残念!!フリープラグインの編集は今まで通りできるのでjsも書けます。まさか2つが共存するとは...見事に予想の斜め上をいきましたね。httpsに一本化しないアメーバに心の底からがっかりしました。追記)自分でリダイレクト実験的ではありますが、SSL化されたページに自分でリダイレクトさせてみました。jsでやっても何の意味もないですが。jsは下記のサイトを参考にしました。https://blog.noldor.info/location-replace/

      テーマ:
  • 05Apr
    • 【テンプレート】最新版エディタを書きやすくするCSS

      先日の仕様変更を受けて、最新版エディタを書きやすくするCSSを自分用に作り直したのですが、いい感じになったのでテンプレートとして公開したいと思います。適用イメージ適用前適用後記事内の装飾は例です。注意 CSSはブラウザの拡張機能「Stylish」等で適用してください。 ”記事幅を確認しながら記事をかける機能”は削除しています。 通常表示の記事は前に.cke_editableというセレクタをつけることにより、カスタマイズできます。 今後、仕様変更でテンプレートが使用できなくなった場合、サポートは一切いたしません。ご了承ください。CSS#globalHeader, .p-header__linkTop__item, .p-warning--copylight, #globalFooter { display: none;}.l-header__inner { width: 100%; padding: 0 2%; box-sizing: border-box;}.l-form { width: 100%; padding: 0 2%; box-sizing: border-box;}.p-title { width: 100%;}#cke_amebloeditor { width: 100%!important;}.cke_editable { width: 100%!important;}.l-main { display: flex;}.l-editor { float: none; width: auto; flex: 1;}.l-sideModule { float: none; margin: 0 0 0 auto;}.l-header--fixed { position: relative;}.l-container--fixed { margin-top: 0;}.p-header, .p-header__tab { height: auto; overflow: hidden;}.p-header__tab__item { font-size: 13px; width: 140px; height: 60px; line-height: 30px;}.c-textbox, .cke_contents, .l-sideModule__content, .l-hashtag, .p-postTime, .c-select { border-radius: 0!important;}.l-container { padding: 30px 0; min-width: auto; background: rgba(240, 240, 240, 0.7);}.c-textbox { box-shadow: 1px 1px 2px #eee inset;}#cke_1_top { background: #f5f5f5; margin: 0; padding: 10px 16px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}.cke_contents, .CodeMirror-scroll { height: 650px!important; padding: 0;}.cke_contents>.cke_wysiwyg_frame, .CodeMirror { height: 100%!important;}.cke_editable { min-height: 648px!important; box-shadow: 1px 1px 3px #eee inset;}.l-sideModule__content, .p-images-imageList--photo, .p-sideModule__inner--pictograph, .p-sideModule__inner--emoticon, .p-sideModule__inner--video, .p-sideModule__inner--twitter, .p-sideModule__inner--affiliate-rakuten, .p-sideModule__inner--affiliate-amazon { height: auto!important; min-height: 698px!important; max-height: 698px!important; overflow: scroll;}適用するURLは下記のとおりです。 http://blog.ameba.jp/ucs/entry/srventryinsertinput.do(新規作成) http://blog.ameba.jp/ucs/entry/srventryupdateinput.do(記事編集)

      6
      テーマ:
  • 04Apr
    • 【勝利】管理者コメントのセレクタが修正されました

      3月30日の夕方から、管理者コメントのセレクタがなくなる仕様変更(?)があり、この件についてAmebaに問い合わせをしていました。その件について進展がありましたので報告します。タイトルにもある通り、先ほどAmeba運営から、修正の報告と謝罪のメールがありました。現在は旧スキン、新スキン共に修正されています。( ゚∀゚ ) < 大勝利!自分から動かなきゃダメということで、僕はこの不具合を発見してすぐ問い合わせをした訳ですが、もし問い合わせをしていなければ、修正されていたのかどうか...。けど、Amebaの対応は見直しました。どうせコピペのような返事しか書いてこないと思っていたのでww Amebaさんありがとうございました。ということで、一連のコメントセレクタ事件は解決です。仕様変更じゃなくてよかった。めでたしめでたし。

      テーマ:
  • 03Apr
    • スマホ版のデザイン完成

      アメブロのスマホ版の見た目はごちゃごちゃしていて、お世辞にも良いとは言えない...。ということで前から仕込んでいたスマホ版のデザインがようやく完成しました!スマホ版はトップページがカスタマイズできないので中途半端ですが、それは仕方がない:;(∩´﹏`∩);: いつかスマホ版カスタマイズも正式に対応してくれないかな...。とりあえずこれで、PC版と大体同じ見た目になったと思います。ちなみにアレとかはアレしているので、もしアレされたらそうするしかないですね。とりあえず、アレはしないでください。(?)見どころハンバーガーメニュー詐欺スマホ版にもハンバーガーメニューがある!と思いきや、ただのトップページへのリンクです。見た目だけをお楽しみください。上へ戻るボタンフッターにある上へ戻るボタンは、元あった素材を活かしているので、ボタンをタップしたらちゃんとスムーズにスクロールします!残りは...あとカスタマイズできていないのは、ハンバーガーメニューの中身と記事一覧ページとタブレット版の表示ですね。ハンバーガーメニューって何を置けば便利なのかよく分からない。そもそもこのブログは2カラムなので、ハンバーガーメニューはいらない気が。何かいいアイデアがあったら教えてください。タブレット版表示は、ちょっと手をつけてあるけどまだ崩れているところが...。難しい (ノ_・。)

      7
      4
      テーマ:
  • 02Apr
    • 【新旧対応】管理人コメントのカスタマイズを復活させる

      現在この不具合は修正されているため、当記事のカスタマイズは必要ありません。→【勝利】管理者コメントのセレクタが修正されました3月30日の夕方の仕様変更か何かで、管理人のコメントのセレクタがなくなってしまい、管理人のコメントと一般コメントの区別をつけるカスタマイズが出来なくなりました。この件については、現在仕様変更なのかバグなのか問い合わせ中です。進展があれば報告します。今回はそれらのカスタマイズを復活させるjsを書きました。みんなでこのスクリプトを使ってアメーバに対抗しようじゃないか!! ( ゚∀゚ )ハァーハッハッ!!SSL化後はこのカスタマイズは使えなくなります。了承できる方のみお使いください。JavaScript(フリープラグイン)新スキン用<script>var link = document.querySelectorAll('[amb-component="commentAuthor"] a[href*="アメーバID"]');for (var i=0, l=link.length; i<l; i++) { var linkparent = link[i].parentNode.parentNode.parentNode; linkparent.classList.add('is-owner','skin-bgQuiet');}</script>追記)[.skin-bgQuiet]を追加しました。旧スキン用<script>var link = document.querySelectorAll('.commentAuthor[href*="アメーバID"]');for (var i=0, l=link.length; i<l; i++) { var linkparent = link[i].parentNode.parentNode; linkparent.classList.add('ownerComment','skinStrongBgColor')}</script>アメーバIDのところに、自分のIDを入力してフリープラグインに貼り付けちゃってください。

      6
      4
      テーマ:
    • 春をさがしに

      東京の方ではもう桜が満開らしいですね。関西より関東のほうが桜の開花が早いというのは不思議な気がしますが (;^ω^)春休みずっと家にいて暇なので、近所を散歩して写真を撮ってきました。開花にはもう少し時間がかかりそう...。別の公園に一本だけ咲いている桜があった!地元ではさくら公園と呼ばれている公園にも足をのばしてみました。空き地にスイセンが生えてたのでついでに撮ってみた

      3
      2
      テーマ:
  • 01Apr
    • 今までのブログの変遷 ~ PIXELOGの歴史 ~

      2月から始めたこのPIXELOGですが、実は僕はこれまで、数々のブログを転々としてきました。僕が今までどういう道筋を辿って今に至っているのか、その歴史を紹介したいと思います (・∀・)ブログが削除済みでWeb Archiveに残っているものについては、そちらのリンクを貼ってあります。1.Yahoo!ブログ(2010年10月~2011年9月)小学生のときに更新していたブログで、Yahoo!ブログで書いていました。一番最初のブログです。Yahoo!ブログだった理由は、Yahoo!のアカウントを持っていて始めるのが楽だったからだと思います。今となっては読み返すのも恥ずかしく消してしまいたいのですが、当時の小学生の自分にしか書けない文章で貴重だと思うので、そのまま記念に残してあります。今となっては黒歴史なのでURLは非公開とさせてくださいww2.Jupiter Diary Blog(2011年9月~2013年3月)当時、ブログパーツ(死語)というものが流行っていたんですが、Yahoo!ブログは規制が厳しくてそれが貼れませんでした。ということで、ブログパーツ貼りたさにアメブロに移転しました。その後”CSSでブログをカスタマイズする”という世界を知り、他のブログで公開されているCSSを訳も分からずコピペして、ブログのデザインを少しイジるようになりました。当時アメブロでは素材屋風スキンという、スクロールバーだらけのデザインが流行っていて、僕もその流行に乗っかっておりました。記事は全部削除したので今は見れません。(一部はバックアップが残っていますが)現在はPIXELOGのデザインテストブログとして活用してます( ゚∀゚; )3.Jupiter’s Diary Blog ~日々の出来事~(2013年4月~2014年3月)変なことは何一つ書いていないのに、何故かアメブロのプロフィールページだけがBANされてアクセスできなくなったり(今もできない)、もう少し記事の質を上げて書きたい、など様々な要因でアメブロのアカウントを取得し直しました。CSSは特に勉強した覚えはないのですが、他の人のブログに掲載されているCSSをコピペしているうちに自然に分かるようになり、ブログデザインをカスタマイズしていました。スクショの中の、記事の画像は前項のブログで適用していたデザインですね。現在はPIXELOGのデザインテストブログ&ピグのアカウントとして使っています。4.LIFE GEAR(2014年4月~8月)その後、アメブロで仲良くしていた人たちや、アメブロを改造していた人たちの移転ラッシュ、アメブロの度重なる仕様変更と不自由さに不満を覚えたりして、自由度の高いFC2ブログへ移転しました。FC2ブログはHTMLまで編集でき、HTMLからホームページを作るのは初めてで勉強になったのですが、FC2ブログの独特の雰囲気に馴染めず、結局12回しか更新しませんでした。5.LIFE GEAR(WordPress)(2014年10月~11月)その後システムまで管理できるWordPressに憧れ、ドメインとレンタルサーバーを借りて、WordPressでブログを始めました。WordPressでオリジナルのブログを作るには、HTMLやCSSとは違う知識が必要で大変でした。また、Googleアドセンスで収入を得て生活をしている人がいると知り、自分もいつかそうなりたいなーという軽率な考えで、日記ブログを卒業し人の役に立つ記事を書こうと頑張っていました。ですが、そのことで結局ブログを書くのが苦痛になってしまい、やめてしまいました。6.Jupiter-exp.net(2014年12月~2015年5月)ということで、やっぱり自分の好きなことを自由に書こうということで、WordPressで普通のブログを始めてみました。時々Web系のことも書いていました。ですが、あまりブログを更新する気が起きず、放置している期間のほうが長かったです。現在はこのドメインを手放したのでもうアクセスできません。7.1 pixel(2015年6月~2017年1月)突然ブログ名を変えたくなったので、また新しいドメインを取得して再スタートしました。前ブログの記事は全て移行しました。途中で、WordPressでデザインをイジるのが楽しくなり、「ブログデザインがコロコロ変わるのに、ブログの更新が半年ない」という訳の分からないブログが誕生してしまいました。゚(゚^∀^゚)゚。さらに、何について書くブログなのか決めなさすぎて、更新する意欲も失せてしまい、消してしまいました。このブログのドメインは、現在メアドとして使っており、そのうち構想を練ってからまたWordPressでブログを再開したいな、とも思っているので、まだ契約しています。今はNextcloudをインストールして、自分だけのクラウドストレージにして使ってます。8.PIXELOG(2017年2月~)そして現在のブログに至ります。もうブログはしばらくいいかな、と思っていたんですが、ふとアメブロを見てみると何か面白そうだったので、アメブロに帰ってきました。WordPressはコメント欄を設けていても全くコメントが来ず寂しかったのですが、アメブロは人の繋がりがあるので面白いですね。久しぶりにアメブロを使ってみて、アメブロの良さも再認識しています。ということで、これからもPIXELOGをよろしくお願いします m(_ _)m

      7
      4
      テーマ:
  • 31Mar
    • 【最後の晩餐】JavaScriptを解禁してみた

      昨日の夕方に、アメブロのHTMLに一部仕様変更がありました。ブログ内リンクの「http:」が省略された形に書き換えられたり、オーナーコメントのセレクタがなくなったり(これはSSL化と関係がないw)昨日アメブロに何があったのか、ということは前回の記事のコメント欄が熱いので、よかったら見てみてください!実験も兼ねてということで、アメブロSSL化の実験&最後の晩餐を兼ねて、前からやりたかったJavaScriptでのカスタマイズを解禁してみました(・∀・)解禁するならもっと早くやっとけやwwって感じですが、あまりぬか喜びしたくなかったので...。もう気づいた方もいるかもしれませんが、ページを下にスクロールしているときは、上の固定ヘッダーが引っ込んで、上にスクロールしているときにヘッダーが現れます。なんか挙動が変なところもありますが、SSL化までのご愛嬌ということで。(直すだけ無駄)このままSSL化?アメーバはこのまま何の告知もなくSSL化するような気がします。"詳細な日時に関しましては、追って本記事にてご報告いたします"と書いておきながら、もう3月が終わろうとしているなんて変ですよね...。デフォルトのスキンで健全に利用している利用者さんが多いアメブロでは、SSL化の影響を受けるユーザー数は少ないのかもしれないですが、もう少し運営体制をしっかりしてほしいですね。

      テーマ:
  • 30Mar
    • CSSで最新の記事一覧にサムネイルを表示する方法

      2017-03-10 19:40公開したその日の夕方の仕様変更でブックマークレットが使えなくなってしまったので修正しました。泣きたいです(/TДT)/前回の記事『静的CSSで最新の記事一覧にサムネイルを表示してみた』で紹介したカスタマイズを、皆さんに紹介できる形まで持っていくことができたので、ご紹介します。アメブロのサイドバーの”最新の記事”に、CSSで記事のサムネイルを表示させる方法です。下準備ブログのCSSまずサムネイル画像を表示できるように、最新の記事一覧のリストを軽く整えます。下のCSSは一例です。適宜デザインに合わせて調整してください。#recentEntries li { margin: 16px 0;}#recentEntries a { min-height: 64px; padding: 0 0 0 80px; text-align: justify; background-repeat: no-repeat !important;}ブックマークレット次にブックマークレットを準備します。ブックマークレットとは、ブラウザにブックマークとして登録することによって動かすことができるJavaScriptです。今回はこれを使って、サムネイル画像のCSSを生成します。下のコードを、ブラウザのお気に入りのURL欄にコピペして保存してください。名前は自分の分かりやすい名前をつけてください。ブックマークレットについてはこちらのサイトが参考になります!javascript:var url = window.location.href.replace(/(http|https):/,"");var img = document.querySelector('.skin-entryBody img').getAttribute('src').replace(/(http|https):/,"").replace(/caw=800/,"cpd=64");prompt('サムネイル表示CSS','#recentEntries a[href*="'+url+'"]{background:url('+img+');}')();実際の手順①普通にブログを更新します。②記事ページを開き、先程登録したブックマークレットを起動します。すると、上のようなウインドウが開きCSSが表示されるので、それをアメブロのCSS編集ページに貼り付けてください。③完成最初の何件かは、上記の手順でまとめて設定してください。記事を更新して、最新の記事に表示されなくなった記事のCSSは剥がしてください。まとめ動的にCSSを生成するやり方とは違い、レンタルサーバーも特別な知識も必要ないので手軽にできると思います。記事を更新する度に毎回一手間かかりますが、慣れれば20秒くらいで出来るので、皆さんも是非挑戦してみてください。

      テーマ:
    • 静的CSSで最新の記事一覧にサムネイルを表示してみた

      わざめーばさんが、外部のサーバーで動的にCSSを生成して、サイドバーの最新の記事一覧にサムネイルを表示したり、コメント欄のプロフィール画像を表示していたので、このブログもCSSだけでサムネイルを表示してみました。当ブログのサイドバーをご覧ください。CSSだけでサムネイル表示僕はjsやphpなどの知識がなく、動的CSSを作るのは難しい...ので静的CSSで対応してみました( ゚∀゚ ) 気合があれば何でもできる!!!記事を更新するたびに、サムネイルを表示するCSSを設定する必要がありますww めんどくせーwwwとりあえず、これからサムネイルを表示するCSSを素早く作れるように練習したいと思います。面倒くさくなったら表示をやめます(適当)それより、jsやphpを勉強するほうがいいか ( ˙-˙ )(追記)静的CSSを作成するブックマークレットを作れば、ワンクリックでCSSを作れるかもしれない...今度時間があるときに作ってみます。

      4
      6
      テーマ:
  • 29Mar
    • かっこいい記事フッターを作ってみた

      アメブロは記事フッターに、広告とかいいねボタンとかコメントボタンとか、とにかく色々な物が入り乱れていてダサい...ということで、ようやく重い腰を上げてカスタマイズをしてみました。やったこと いいねボタンの見た目を無理やりカスタマイズ(IE非対応) 日付と記事タイトルのクローン作成 それぞれのパーツを無理やり絶対配置日付と記事タイトルをフッターにもってくるというアイデアは、他のサイトを参考にしました。記事フッターを一箇所に凝縮して色をつけたので、大分すっきりして見えるのではないでしょうか。パーツの配置の仕方が強引なので、少しでも仕様変更があると崩れてしまうと思います。あと、いいねした人一覧のリンクは、デザインの関係上、犠牲になっていただきました。そういえば、余談ですがアメブロのSSL化って結局いつなんだろう。もう3月終わるけど...。やる気あるのかね ( ゚∀゚; )

      テーマ:

Ameba人気のブログ

Amebaトピックス