【管理画面から選択できる】WordPressで「デフォルトでコメントに表示するアバター」をオリジナル画像にする方法｜今村だけがよくわかるブログ
WordPressで作ったサイトにコメントを表示している方は、コメントそれぞれに「アバター」を表示している方もいらっしゃると思います。 例えば下の画像のような感じです。コメントしている方のメールアドレスが「gravatar」と紐づいていない場合は「デフォルトアバター」が表示されます。 「デフォルトアバター」は、WordPressの管理画面より「設定」→「ディスカッション」のページにある「デフォルトアバター」の一覧から選ぶことができます。 表示したいアバターを選択 このアバターを一覧にはない「オリジナルの画像にしたい」という事もあると思います。そんな時は「デフォルトアバター」の一覧から選択できるようにアバターを追加すればOKです。 こんな感じでアバターを追加できる 以下に追加する方法を書きましたので、興味がありましたらご参考ください。 デフォルトアバターを追加する方法WordPressのテー
古くなったWordPressサイトを、最新バージョンへリニューアル | スタジオブレーン
会社やお店のホームページがWordPressで作られるようになって随分経ちますが、最近では古くなったWordPressサイトをリニューアルしたいというご相談が非常に多くなっています。中には特殊な作り方をされている場合もあったりして、正直たいへんな案件が増えてはいるものの、基本的にはWordPressで構築されたサイトの良いところは、積み重ねられた投稿をそのまま引き継いでリニューアルができることですから、WordPressのメリットを活かしてたくさんリニューアルしていけたらと思っています。 まずはWordPressの本来の使い方に戻す 古いWordPressサイトに多いのは、当時は実装されていなかった機能を独自のプログラムで実装しているケースですが、最新のWordPressではほとんどがプラグインで実現できるようになっています。また、当時は情報も少なかったため、WordPressの本来の使い
ドラッグアンドドロップも可能な軽量カレンダーピッカー
日付を選択するとき、様々な方法があると思いますけど、カレンダーからダイレクトに選ぶのが最も簡単な方法ですよね。 そんなユーザー体験を実装するのが今回ご紹介するjQueryプラグインです。 日付入力をもっとフレンドリーに カレンダー選ぶ、日付クリックする、日付が入力される。 とっても軽量で、シンプルなプラグインだけど、いい仕事をしてくれます。 ショッピングサイトでも使えますし、日付の指定、開始日、締め日、あらゆるところで需要の高い日付の選択を簡単ピッカーで入力出来ます。 実際は、出力形式を「20 Dec 2015」ってなっているように、日本語にローカライズする必要があるけど、この設置方法がとにかく簡単なので、ローカライズしてまで使いたい人も多いんじゃないだろうか。 ヘッダー部分 <script src="path/to/jquery.js"> </script> <script src="p
【jQuery】緊急案件：Google Feed API が廃止になっているので代替案を紹介します。 - ONZE
昨日、2015年12月2日未明より Google Feed API が403エラーを返すようになり、特にニュースサイトを中心とした各方面で混乱が発生しています。けっこう大変な事態のようですね。 未だ公式サイトでもアナウンスが無く、廃止になったのか否かもわからない状況です。 弊社のクライアント様でも『外部サイトのRSSフィードを読込→表示』しているサイトがいくつかありますが、もともと Google Feed API は使用せず、すべてPHPベースでプログラムを組んでいるので被害は皆無。 しかし困っている方々が大勢いらっしゃるようなので、ここで Google Feed API の代替となるテクニックを紹介していきます。 解決策はいたってシンプル。単にjQueryを利用してRSSの情報を取得して、任意のテンプレートに整形して出力させるだけ。 つまり基本的には Google Feed API のと
jQueryで別ドメインのXMLを読み込んでみる
クロスドメインでのXML取得を、phpを使って実装してみます。 同一ドメインの場合 まずは、同一ドメインの場合のXML取得のサンプルです。 HTML <div id="sample"></div> JavaScript $(function() { $.ajax({ url: 'https://cly7796.net/blog/feed/', dataType: 'xml', success: function(data) { // 取得件数 var getCount = 5; if ($('item', data).length < getCount) { getCount = data.length; }; var insert = ''; insert += '<h1>'; // リンク先の挿入 insert += '<a href="' + $('channel', data).c
WordPressのカスタム投稿タイプとカスタムフィールドを実際に追加してみた！ - マネー報道 MoneyReport
WordPress 新しいWebサイト構築に向けて、現在WordPressを勉強しています。 昨日は「カスタム投稿タイプ」を使う事で、自分好みのメインコンテンツを記事とは別に作れる話を書きました。 で、実際にレンタルサーバーにアップしているWordPressに「カスタム投稿タイプ」を適用してみましたので、その適用方法と実際の適用後の見栄え等をお伝えしたいと思います。 また「カスタムフィールド」と呼ばれるオリジナルの投稿項目についても設定してみましたので、そちらも併せて記載します。 カスタム投稿タイプの適用 カスタム投稿タイプをWordPressに導入するには自分で「function.php」を書き換える事でも実現できますが、PHPソースの改変があり間違うとWordPressが動かなくなったりと弊害が大きいので、今回はプラグインを使ってカスタム投稿タイプを実現します。 カスタム投稿タイプを実
デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6（サンプルあり） - Design Color
レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th
これ１つで驚くほどアクセス数が増えた！誰でも簡単にできる固定ソーシャルボタンの設置方法とは？ - サラリーマン休日副業で月10万円以上目指すページ
すでにお気づきの方も多いと思いますが、最近ブログのデザインを多少修正しています。 はてブやTwitter等のソーシャルボタンは各サービスごとにデザインが異なり、何となく統一感がありません。 今回のデザイン変更はソーシャルボタン周りのデザインを統一化し、よりユーザクリックを誘いやすいようボトム位置に固定化しました。 この効果はてきめん！ ブックマーク率は従来比で2倍以上に。 皆さんにも是非ご紹介したいと思いましたので、記事にしてみます。 設置方法 下記のソース群をあなたのブログに追加するだけです。 ソーシャルボタン画像はのらねこさんのページのものを使用させていただきました。 CSSソース あなたのブログのCSSに下記を追加してください。 .social-button { display:none; width:90%; max-width:900px; height:0; margin:0
【連載】自分のブログと外部サイトでtarget"_blank"を切り分けるブックマークレットカスタマイズ | たらハコ
「ブログ執筆をラクにするブックマークレットカスタマイズ講座」の第4回です！ 前回、自分のブログ名を削除したaタグを取得するブックマークレットに変数を使ってカスタマイズを加えました。 今回はaタグを作るときに属性として付加するtarget"_blank"を自分のブログと外部サイトで自動的に振り分けるようにしていきます！ スポンサードリンク 自分のブログと外部サイトでtarget"_blank"を切り分ける 前回のおさらい 前回は「自分のブログ名を削除したaタグを取得するブックマークレットを変数を使ってスッキリ見やすくカスタマイズ」しました。 【連載】変数を使ってコードをすっきり見やすくするブックマークレットカスタマイズ 作成したコードはこちら↓ //aタグを出力するブックマークレットを変数を使ってカスタマイズ //（見やすく改行してあります。） javascript:(function(){
何を使えばよいか分かった！コーポレートサイトの各ページを制作する前にみておきたいこと
作成：2015/02/9 更新：2016/06/29 Web制作 > 企業サイトはサービスや商品の他、ビジョンやIR情報などで構成されています。今回はWordPressで構築した固定ページを見やすくするために、どういったjQuery・WPプラグインを使えばよいのか、またレスポンシブに対応させるための小技もメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．ギャラリーページ ２．サービス／会社概要ページ ３．各ページの背景画像をクライアントさん側で変更可能に ４．問い合わせページ ５．CRM ６．商品を管理画面から操作 ７．アクセスページ ８．お知らせページ ９．SNS/TEL/GAアカウント変更管理 １０．Q&Aページ １１．ブログページ １．ギャラリーページ 以前、クライアントさんにギャラリーページを「ランダムにしてほしい」と言われたこと
初めてのJavaScript、初めてのAWS Lambda | DevelopersIO
はじめに 佐々木です。開発経験も無くJavaScriptを触ったこともない僕ですが、どうしてもAWS lambdaを触ってみたかったので、四苦八苦しながらやってみました。 すでにバリバリ活用しているブログ記事がたくさん出ていますが、本記事は本当に何もわからない僕がよちよち歩きしている内容ですので、深いところは期待しないでください。そして識者のツッコミをお待ちしております。 AWS lambdaの基本的な使い方は以下の記事をご参照ください。 AWS Lambdaを始めてみる(1).ユーザーアプリケーションからのイベントを扱う AWS Lambdaを始めてみる(2).Amazon S3イベントを扱う やってみる MBAにnode.jsをインストールする とりあえず簡単な構文チェックだけでも手元でやりたいので、MBAにbrewを使ってnode.jsをインストールします。 $ brew insta
アップロードファイルサイズ制限 jQuery(upload file size) | Wordpress & Web Application Note
Wordpress & Web Application Note wordpress構築,プラグイン開発,その他PHP,MySQLによる開発メモ ＋ 日常生活 ＆ 趣味 メニュー コンテンツへ移動 HOME ABOUT WEB-PROGRAM WP-PLUGIN WORDPRESS BOOK MUSIC $(function(){ $(".file1").change(function () { $("label.lblSize1").remove(); $("input.fileover1").remove(); var iSize1 = ($(".file1")[0].files[0].size / 1024); iSize1 = (Math.round(iSize1 * 100) / 100) $(this).parent().append("<label class='lblSiz
Wordpressで会員制サイトを構築してみよう（GianismでSNS連携） - Qiita
"Gianism" というプラグインを利用すると、最近流行りのSNS連携を利用したログインを簡単に実装することができます。今回はFacebookとの連携を試してみます。 元記事 下記エントリの転載になります。 WordPressで会員制サイトを構築してみよう（GianismでSNSログイン） 利用プラグイン Gianism バージョン 2.2.1 で試しています こちらの製作者さんは日本人で、プラグインの更新頻度も高いです。 Facebookの事前設定 Facebookアプリの作成 SNSログインを行うには、事前にFacebook Developersにてアプリの申請が必要になります。 まずDevelopersサイトにログインして、「Add a New App」を選択します。 今回はWebサイトへのログインなので、一番右の「Webサイト」を選択します。 サイト名を記述し、「Create〜」
[Javascript] 非同期設定でレスポンス速度を改善させる | mkoba のお部屋 ： DREAMHIVE Staff Blog
この記事は2年以上前の投稿になります。 記載された情報が古くなっている可能性がございますので十分ご注意ください。 ウェブサイトのレスポンス速度を改善させる手法の1つとして、読み込む JavaScript ファイルの非同期化というものがあります。 通常、外部の JavaScript ファイルを呼び出す場合、特に何も指定しなければ同期設定で読み込まれます。 これを非同期にすることで待ち時間を減らしてレスポンス速度を改善させることができます。 先日ご紹介した「GTmetrix」や「PageSpeed Insights」でも非同期を推奨していますね。 設定の仕方も簡単です。 <script async src="//xxxxxxxxxxxxxxx.js"></script> や、こんな感じで設定します。 (function(){ var elm = document.createElement('
![[Javascript] 非同期設定でレスポンス速度を改善させる | mkoba のお部屋 ： DREAMHIVE Staff Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf9f20a6b7d49de5a75020648483027fb553aa5b/height=288;version=1;width=512/https%3A%2F%2Fblog.dreamhive.co.jp%2Fmkoba%2Fwp-content%2Fuploads%2Femblem-mkoba_200x200.png)
PHPerの為のPython入門 - 超基礎 - Qiita
<?php /** * 時間を指定すると、対応する挨拶を表示するよ！ */ function greet($hour) { if ($hour > 4 && $hour < 12) { echo "Good Morning!" . PHP_EOL; } elseif ($hour > 12 && $hour < 18) { echo "Good Afternoon!" . PHP_EOL; } else { echo "Good Evening!" . PHP_EOL; } } greet(8); // Good Morning! greet(15); // GOod Afternoon! greet(21); // GOod Evening! # coding=utf8 def greet(hour): """時間を指定すると、対応する挨拶を表示するよ！""" if 4 < hour <
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
[JS]スタイルシートではできないテーブルの繋がったセルをハイライトするスクリプト -Wholly
テーブルにマウスでホバーすると、そのセルがハイライトしたり、列や行がハイライトするのはスタイルシートで実装できますが、rowspan, colspanがあるテーブルではうまくいきません。 テーブルのrowspan, colspanのハイライトを実現するjQueryのプラグインを紹介します。 右：rowspan有り、colspan有り Whollyの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/jquery.wholly.js"></script> </head> Step 2: HTML テーブルは通常通りの実装で構いません。 特定のテーブルの
WordPress：body_class()に独自のclassを追加する方法＋代替で独自のidやclassのみをbodyに指定する方法 - NxWorld
body_class()はbody要素に使用するWordPressのテンプレートタグで、これを使うことで表示されるページによって様々なclassがbody要素に付加されて非常に便利なのですが、たまに「このclassもほしい」というときがあるので、そういった際に使えるbody_class()に独自のclassを追加する方法です。 また、いっそのことbody_class()を使用せずに、その代替としてbody要素に完全に独自のidやclassのみを指定するという方法も備忘録を兼ねて併せて紹介します。 body_class()の使い方 Twenty Fourteenなどデフォルトテーマのheader.phpを見ると確認できますが、body_class()の基本的な使い方は下記のように記述するだけで使用できます。 上記を記述して各ページのソースを確認するとbody要素に様々なclassが付加されて
サイドバー表示が終わるまで下にスクロールしたら「おすすめ記事」を追尾させる - 太陽がまぶしかったから
「おすすめ記事」を追尾させたい 長文記事を書くとスクロールしていくうちに、サイドバーががら空きになってしまうので、このスペースを有効利用できないかと考えました。表示機能自体は『はてなブログの「最新記事」サイドバーを魔改造する - 太陽がまぶしかったから』の発展になります。 おすすめエントリ要素より下にスクロールしている場合はスクロールに追尾して、上側にいる場合はスクロールに追尾しません。表示するエントリははてなブックマークの人気エントリからランダムに4つ選択しています。サイドバーが下側に無限に伸びるイメージ。PC版だけで動作します。 スクリプト設置 サイドバーの最後に「HTML」モジュールを作成し、以下のスクリプトの変数部分を編集した上でコピペします。スタイルについては『はてなブログの「最新記事」サイドバーを魔改造する - 太陽がまぶしかったから』と同じ構造なのでそちらをご参考にカスタマイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript難読化読経
