mateaのブックマーク - はてなブックマーク

[WordPress]AMPプラグインを使ったAMP対応の際に設定しておきたいこと8個[functions.php]

こんにちは！みぞれ(@xxmiz0rexx)です！先日とあるWordPressサイトをAMP対応した時に利用した AMPのプラグインについての設定で覚えておきたいことがあったので記事にします。 AMPってなあに最近スマートフォンで検索をすると検索結果にいつもとは違う表示がされることがあります。例えば、スマートフォン版のGoogleで「オリコン」と検索してみてください。ページ上部に左右に動く「カルーセル」が表示されると思います（2017年1月現在）。ここに表示されている記事がいわゆるAMP対応ページなのですが、内容としては無駄なものを排除し記事本文にフォーカスされた、とっても読み込みの早い専用ページになっています。読み方は「アンプ」と読むみたいですよ。 AMPについてもうすこし詳しく知りたい方は以下の参考サイトを読んでみてください。参考：AMP（Accelerated Mob

matea 2017/02/02

リンク

誰にでも起こりうる…サイトをリアルタイムでミラーリングされて検索上位を奪われたお話［不正コピー、ダメ。ゼッタイ］

こんにちは！みぞれ（@xxmiz0rexx）です。たまに見かける「記事の内容を丸ごとコピーされた！」という嘆き。「大変だなぁ…」なんて眺めていた私ですが、今回なんと記事の文章どころか、サイトが丸ごと不正コピーされる(URL以外で判別がつかない)というとんでもない被害に遭いましたので、私が行った対処法をまとめておきます。経緯事の始まりは10/21。 Googleの検索結果を見ていたら、わたしの運営するフリー写真素材サイト『GIRLY DROP』のタイトルの下に見知らぬURLがついてました。「むむ…？」と思いクリックしてみると、そこにはうちのサイトがありました。「？？？？」さらに、表示されている写真をクリックして詳細ページを確認してみようと思いました。カチッ思いっきりイケナイ大人のWEBサイトが表示されたんですがこれは( ﾟдﾟ)ﾎﾟｶｰﾝトップページ、写真のダウンロードペ

matea 2015/10/26

web制作

リンク

備忘録：WordPressでRSSフィードをカスタマイズする方法

画像：http://girlydrop.com/girls/1315 こんにちは！みぞれ(@xxmiz0rexx)です。 WordPressが吐き出すデフォルトのRSSではSmart Newsなどのサービスできちんと表示できない場合があるようで、自分で少しカスタマイズする必要があったので具体的に何をしたのかメモを残しておきます。 Smart Newsに限らず、WordPressのRSSをカスタマイズしたい人には参考になると思います。やることテーマディレクトリにRSSテンプレートを作る functions.phpでRSSテンプレートを指定する RSSの中身をカスタマイズする rss要素の開始タグに追記コピーライト・ロゴURLの設定記事サムネイル表記フィードの確認(SmartFormat Validator) 1.テーマディレクトリにRSSテンプレートを作るまずはRSSのテンプレ

matea 2015/10/01

WordPress

リンク

[WordPress]ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10

ログイン画面のロゴ変更まずはおなじみのカスタマイズから。 WordPressロゴをサイトのロゴに変更します。複数のメディアを運営している時などに判別しやすいです。 functions.php内 //ログイン画面のロゴ変更 function login_logo() { echo '<style type="text/css"> #login h1 a { background: url('.get_template_directory_uri().'/images/login_logo.png) no-repeat; width: 320px; height: 70px; background-size:100% auto; } </style>'; } add_action('login_head', 'login_logo');

matea 2015/01/27

wordpress

リンク

アニメーションで矢印がクルっと回転するナウでシンプルなドロップダウンメニューの作り方

Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、サブメニューがあることがひと目で分かると便利ですよね。さらに、そのサブメニューを表示している時は、アイコンの向きを上向き(▲)に変えたほうが矛盾がないので、今回はそれをCSS3のアニメーションと回転を使ってクルッとさせる方法を試してみましたφ(*’д’* )ﾒﾓﾒﾓ。矢印の向きが切り替わるドロップダウンメニューの作り方まずはデモ画面です。こんな感じになりました。地味だし今更だけど、このクルンとした動きがやりたかったんです。今回は勉強がてらアイコンをSVGコードで表示してみましたが、ふつうの画像でもOKです。記述法 html <ul class="dropdown"><li>DropDown <svg id="arrow" width="16" height="16" viewBox

matea 2014/12/24

css3

リンク

備忘録：Google Chromeリモートデスクトップの使い方（Mac編）

こんにちは。霙(@xxmiz0rexx)です。自宅に置き去りにしてきたMBPが恋しくなったので、「そうだ！リモートしよう♡」と思ったら、まだ設定をしていなかったことを思い出して詰んでます(白目)。とりあえず先にChromeリモートの接続方法を調べていたので記事にまとめます。必要なもの Chromeリモート接続を利用するには以下の3つが必要になります。 Google アカウント Chrome ブラウザ Chrome リモートデスクトップ(Chrome 拡張機能) すべて揃ったら次にいきましょう。設定・使い方リモート接続を行うには、前述のとおり接続したいパソコン側で設定が必要です。とはいえ、ただ使うだけならそんなに難しいことはありません。以下に簡単に説明していきます。 PCをリモート接続できるようにするには 1.拡張機能でリモート接続を有効にまずは、リモートデスクトップのページ（chr

matea 2014/08/22

google

リンク

Sublime Text初心者向け：覚えておけばとりあえずラクできるおすすめショートカットキーまとめ

こんにちは、霙(@xxmiz0rexx)です。立て続けに記事を書いてしまうほど愛してやまない魅力的なエディタ『Sublime Text』。便利な機能は星の数ほどありますが、今回はこれだけ覚えておけばSublime Textの恩恵にあずかれるはず！！という、私のオススメショートカットキーたちをご紹介したいと思います:) ※Mac版です覚えておきたいショートカットキーとりあえず一番オススメの3つをご紹介。とっておきの便利な子たちがいます。私がSublime Textを使う理由の最たるものがこれで、もっと言うとこれがあるから使っていますｗみぞれが選ぶ最も便利なショートカットキー3個入力コマンド結果

matea 2014/04/16

webデザイン

リンク

Google Analytics APIを使って、プラグインに頼らずに記事のアクセスランキングを表示しよう［ wordpress］

こんにちは、霙（@xxmiz0rexx）です。サイトにGoogle Analyticsを導入していることが条件ですが、APIを利用すればプラグインに頼らなくても記事のアクセスランキングが表示できることを最近知りました！色々カスタマイズもしてみましたので、以下に手順とサンプルコードをメモしていきます。 1：GAPI（GAPI – Google Analytics API PHP Interface）をダウンロードまずは下記のサイトからライブラリが入っているzipファイルをダウンロードします。 gapi-google-analytics-php-interface 2：example.report.phpの中身を編集次に、ダウンロードしたzipファイルを解凍し、中に入っているexample.report.phpを編集していきます。下記のサンプルは結構盛りだくさんなので要らない部分は外し

matea 2012/08/23

google analytics

リンク

特定のカテゴリを指定または除外したサムネイル付きの関連記事を表示するphp

関連記事は表示したい。プラグインだとページごとに細かい使い分けができない。じゃあphpで書くしかないじゃないか！！ということで色々調べたのでメモします。今回やりたかったこと前回の記事が完全に無駄になってしまったような気がしないでもないですが、わたしが今回やりたかったのは以下の3項目なんです。複数タグを取得した関連記事の表示ただしイケm特定のカテゴリに限るサムネイルの表示一番上に関してはみんな大好きWEBクリエイターボックスさんのこの記事に書いてあるphpでバッチリだったので使わせて頂きました。参考：プラグインを使わずWordPressに9の機能をつける | Webクリエイターボックスこんな感じのphpを書いたら動いた！マナさんのphpを参考に、2つくらい記述を足しただけです。 <?php $original_post = $post; $tags = wp_get_

matea 2012/02/21

リンク

管理画面のデザインをクライアント向けにカスタマイズする方法[プラグイン編]

ウィジェットの登録やテーマの編集など、制作者側の私とってはすごくすごく便利で大好きな管理画面ですが、一般ユーザさんからすると「?!」な部分が多いのも事実。今回のお仕事で、ブログなどまったく触ったことのないスーパー初心者の方が使うための管理画面を作成する事になり、血眼で探しまわった方法その１のご紹介です。（その２：function.phpでカスタマイズする方法）公開されたばかりのWordPressプラグインCawaii Admin 2011年9月11日に開催されたWordCamp神戸にて『WordPressの管理画面を徹底カスタマイズ！』というライトニングトークがあったみたいなんです。そしてその登壇者の方が開発されたプラグインがなんとタイムリーなことに、先日の9/22に公開されました！参考：Cawaii Admin【WordPress管理画面をかわいくカスタマイズするプラ

matea 2012/02/21

wordpress

リンク

記事の投稿日を取得して好きな日数だけnewアイコンを表示しておく方法

ブログを訪れた方に、新しくアップした記事・もしくは更新した記事をどのようにしてアピールするかを考えた時、「new!アイコンをつける」という結論に達する方も少なくないと思います。そんな時、ループ内に数行コードを加えるだけで、カンタンに実装することが出来ました。 ※追記あり記述例わたしの場合は（他サイトですが）更新日順に記事を並べているので newをつけるのも更新日を取得していましたが、普通のブログの場合は作成日順に並んでいると思うので二種類掲載しておきます。 ※追記 WordPress界の神様@jim0912さまから、時差の件で以下のリプライを頂いたのと、自分で試してみて$days=1;だとうまく行かなかったので、ちょっと修正しました。 [blackbirdpie url=”http://twitter.com/jim0912/status/133707844091523072″]

matea 2012/02/21

リンク

思ったよりカンタンでした！アプリで作るfacebookページ+参考デザインの紹介

ついに、当ブログもFacebookページを作ってみました・・！小難しそうだなぁと敬遠していたのですが、よいアプリを見つけ、htmlを書かずに、画像を用意するだけでウェルカムページまで作ることが出来ました！！「なんか面倒そうで用意してない・・」というブロガーさんは是非、このアプリを使って作ってみてはいかがでしょうか？Facebookページは作ったけどウェルカムページがない！という方にもおすすめです！以下の記事に、ブロガーさんがFacebookページを作ったほうが良い理由が熱く語られていました！ブログをお持ちの方で、まだFacebookページを作っていない方は一度目を通してみてください( b･`∀･´) 参考：ブログを書いている人は Facebook ページ（ファンページ）を作るべき: Facebookのここが好き–その2 | iPhone 研究室（iPadもね）アプリを使ったFa

matea 2012/02/21

facebook

リンク

jQueryを使ったスムースなタブメニュー

素晴らしく気持ちのいい動きをするタブメニューに出会ったので光の速さで実装してみました。これは個人的にかなりオススメです！！2008年産みたいなのでもしかして知っている方も多いかも。前々からサイドバーで記事をランダムピックアップする事に憧れを抱いていたのですが、これ以上サイドバーが長ったらしくなるのが嫌でなかなか実装せずにおりました。ですが今回WEBクリエイターボックスさんのリニューアルで使われていたタブメニューを触って惚れ込んでしまいまして、当サイトにも実装してみました :) 配布サイト様 yensdesign 海外サイトなので英語ですが、わりと読みやすいと感じました。記事の上の方に「Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.」との表記があるので、なんと近々死ぬであろうIE6,7(※)で

matea 2012/02/21

jquery

リンク

Illustrator備忘録:放射状ストライプの簡単な作り方とそれをPhotoshopのカスタムシェイプに登録する方法

前回のIllustrator備忘録を喜んでくれた方がいらっしゃったので第二弾を書いてみます。今回は放射状ストライプ（別名サンバースト）の簡単な作り方と、作った放射状ストライプをPhotoshopのカスタムシェイプに登録する方法です。またもやイラレ使いさんには当たり前の技かと思われます。放射状ストライプはよく見ると三角形がまるく並んでるだけのものですので、めちゃめちゃ簡単に作ることができます。それをカスタムシェイプに登録しておけば、使いたいときにすぐ使えるのでとても便利です♪ ①Illustratorを開き、長方形ツールを選択 ②アートボード上でクリックし、今から作る長方形の幅と高さを指定します ③ペンツールを選択します ④ペンツールで長方形の底辺の中心をクリックし、アンカーポイントを追加するペンツールがパス上に来ると＋のマークが出るので、そのタイミングでクリックするとパス上にアン

matea 2012/02/21

illustrator

リンク

WordPress管理画面にオリジナルメニューを追加した時の手順メモ

前回もちらっとメモしたんですが、もっと具体的な内容も覚えておきたいので改めて実際のコードとともに手順をメモしたいと思います。オリジナルの管理画面を用意しておくと、クライアントさんがサイトの更新を行う場合に安心して更新をお任せできますｗゴールはこれ。不要なダッシュボードウィジェット、左メニューなどをすべて非表示にし、オリジナルで用意したヘッダー＆メニューを差し込みます。デフォルトの管理画面は高機能な分、メニューがずらーーーっと並んでおり WEBに詳しくない方にとっては何が何だか分からないものですからね。ここは一思いにばっさりと切り捨て、クライアント専用にやさしいシンプルな見た目の管理画面を用意してあげることで大幅に間違いが減りますし、説明の時間も短縮できると考えてます。ちなみに、上記キャプチャに表示されているメモは『Headache With Pictures』というプラグ

matea 2012/02/21

wordpress

リンク

良質なワイヤーフレームを超簡単に製作できるFireworks拡張機能『Placeholder』がめちゃめちゃ便利!!

フリーランスでWEB製作をされている@sou_labさんからドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ワイヤーフレームとはデザインにとりかかる前にサイトの骨組みを視覚化し、要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。実はわたしは今まで作ったことがなかったのですが、しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとはそんなワイヤーフレームですが、自分用ならともかくクライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方

matea 2012/01/12

Fireworks

リンク

ウェビメモ

こんにちは！みぞれ(@xxmiz0rexx)です。すごいニッチかもしれないんだけど、WordPressでカテゴリ一覧を表示している時に、さらに記事を絞り込むためにタグ一覧を表示することってありますよね？そんな時はWordPress Codexにも載っている以下の方法を参考にする人が多いと思うんですが、実はこれだと下書きなどに設定しているタグも出力されてしまいます。 PHP <?php if ( is_category() ) { // 現在のカテゴリーのIDを取得 $cat_id = get_query_var( 'cat' ); // 表示中のカテゴリーに属する投稿のIDを配列で取得 $current_posts = get_objects_in_term( $cat_id, 'category' ); // 表示中のカテゴリーに属する投稿に付けられたタグの情報をまとめて取得 $cu

matea 2011/11/17

Webデザインブログ

リンク

はてなブックマーク

タグ

ブックマーク / webimemo.com (17)

お知らせ

今週のはてなブックマーク数ランキング（2024年10月第1週）

月間はてなブックマーク数ランキング（2024年9月）

今週のはてなブックマーク数ランキング（2024年9月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス