サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
www.magical-remix.co.jp
画像全体が暗い・明るい場合は、レベル補正・トーンカーブなどで簡単に調整できます。 しかし、「下半分だけが暗いんだけど…」など一部だけを補正したい場合は「クイックマスクモード」が便利です。 手順 元の画像です。左下が暗いですね。せっかくの果物と花がちょっと暗い印象になっています。 「選択範囲」メニューから「クイックマスクモードで編集」を選択します。 グラデーションツールで、補正したい部分を選択するようにグラデーションをかけます。 補正しない部分に色が付いています。(着色表示:マスク範囲に色を付ける) 「着色表示:選択範囲に色をつける」に設定されている場合は、補正する部分に色が付きます。 「選択範囲」メニューから「クイックマスクモードで編集」のチェックを外します。 選択範囲が表示されます。 「レイヤー」メニューから「新規調整レイヤー」から、今回は「トーンカーブ」を選びます。 (明るさ・コントラ
WordPressでは、パーマリンク設定を行うと.htaccessが自動生成されます。 この時.htaccessに新たに別のことを書き込み、保存したとします。 しかし、何度やってもその記述が消えてしまします。.htaccessが勝手に上書きされてるのかと思い、いろいろ調べましたが原因不明でした。 しかし、原因は新たな記述を行った場所にあるようでした。 あらかじめ仕様を知っておけ、という話なんでしょうけれども、しばらくハマってしまいました。 自動生成された.htaccess内の記述 # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /business/wp/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f Rewr
「1つのカスタム投稿タイプにカスタムフィールドを表示する」のは簡単なんですが、「複数のカスタム投稿にそれぞれでしか使用しないカスタムフィールドを表示する」のがなかなかうまくいかず、手こずったので備忘録として。 前提条件 カスタム投稿タイプ「news」「topics」の2つ 「news」で使用しているカスタムフィールドは「StartData」 「topics」で使用しているカスタムフィールドは「EndData」 やりたいこと 管理画面において 「news」の記事一覧には「StartData」のカラムを表示し、 「topics」の記事一覧には「EndData」のカラムを表示したい まず「news」の場合 1つだけでしたら簡単です。 function add_column($column_name, $post_id) { if( $column_name == 'StartData' ) {
ホームWordPressWordpressでGoogleMapを簡単に挿入できるプラグイン「Comprehensive Google Map Plugin」 普通にGoogleMapを挿入するだけでしたらGoogleMap上でピンを打って「地図を埋め込む」からiframeを使用したコードを取得したらいいのですが、例えば ピンを何ヶ所にも打ちたい ピンの種類を変えたい ピンをクリックした時に出てくる文字を変えたい となった場合、通常は長々とjsを書かなければなりません。 そういった手間を省いてくれるプラグインです。 しかしなにぶん、全て英語なものでして…かいつまんでわかるところだけをご紹介。 インストール 管理画面の[プラグイン] → [新規追加]より「Comprehensive Google Map Plugin」で検索しインストール、有効化します。 サイドバーに「Google Map」メ
WordPressで会員制サイトを作る場合、多くはプラグインのWP-Membersを使うと思います。しかし、そこまで大げさなものでもない場合、 ログインしているかどうかの判断 ログインフォームの設置 ログインした権限 で動作を振り分け、設定して、ちゃちゃっとやっちゃいたいと思います。 行いたい動作 会員のみ閲覧できるコンテンツを用意 非会員にはログインフォームを表示する 会員IDでログインした場合、任意のページにリダイレクトする ログインしているかどうかの判断 <?php if (is_user_logged_in()) : ?> ログインしている時に表示されるコンテンツ <?php else : ?> ログインしていない時に表示されるコンテンツ <?php endif; ?> 会員にだけ見せたい部分を「ログインしている時に表示されるコンテンツ」に記述します。 こうすることにより、その部分
ホームWordPressWordPressでcontact form 7のメールフォームに郵便番号から住所を自動入力するjavascriptライブラリを入れる 郵便番号から住所を自動で入力できるようにしたい場合、「ajaxzip3」というJavaScriptライブラリを使用するとラクチンです。 このライブラリは、jQueryプラグインではないのでjqueryやprototype.jsが不要です。 また、外部ファイルとして読み込んでいるためメンテナンスも必要ありません。 普通のHTMLに導入する分には最高にラクチンなんですが、WordPressで、しかも「contact form 7」のメールフォームに導入するにはちょっとめんどうなのでその手法をご紹介します。 ajaxzip3の導入方法 ajaxzip3ライブラリを読み込む head内でライブラリファイルを読み込みます。 <script s
WordPressで新着記事を「カテゴリー名表示+色分け」で表示したいという記事を投稿しましたが、カスタム投稿の場合、またちょっと記述が変わるのでカスタム投稿バージョンをご紹介します。 カスタム投稿タイプで記事を投稿しており、タームをカテゴリーのように使用している場合に有効です。 テンプレートの記述 カスタム投稿(custom)の新着記事を5件表示 <?php query_posts("post_type=custom&showposts=5&paged=".$paged); ?> <?php if(have_posts()): ?> <ul> <?php while(have_posts()): the_post(); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="ymd"
WordPressでは通常、URLは「絶対パス」で書き出されます。 そのためSSL対応したとしても、そのままではプラグインが自動で書き出すリンクやコンテンツ内のリンクはhttpsになってくれません。 自動でhttpsにするためには「WordPress HTTPS」などのプラグインを使用する方法がありますが、URL表記を”http”から始まる「絶対パス」から、”/”から始まる「相対パス」にすることで、より簡単にSSL対応する方法をご紹介します。 記述方法 functions.phpに記述します。 class relative_URI { function relative_URI() { add_action('get_header', array(&$this, 'get_header'), 1); add_action('wp_footer', array(&$this, 'wp_foo
ホームWordPressGoogleMapのマイプレイス(マイマップ)でラインを引いた地図や複数マーカーのある地図を作成し、WordPress上にプラグインを使って簡単に表示する方法 Googleアカウントがある方は、GoogleMapよりマイプレイス(昔の呼び名ではマイマップ)を作成することができます。このマイプレイスを利用すると、Googlemapの情報を持ったデータファイル(.kml)を作成、ダウンロードすることができます。 「Comprehensive Google Map Plugin」プラグインを使うと、このkmlファイルを読み込むだけでラインを引いた地図や複数マーカーのある地図など、細かい設定の地図をWordPress上で表示することができます。 プラグイン「Comprehensive Google Map Plugin」の説明はこちらの記事からご確認ください。 kmlファイ
Jimdoでは「ナビゲーションの編集」より新規ページを追加します。 この時、通常は作成したページにしかリンクを設定できませんが、ちょっとした小技で外部やページ内部の該当ポイントにリンクすることができます。 外部リンクを設定する方法 参考サイト ナビゲーションに外部リンクを設定する方法 グローバルナビから外部ブログやSNSへのリンクしたい場合に使えます。 設定方法 ナビゲーションメニューから新規ページを作成 項目名に「リンク先タイトル::_::URL」と記述 例 ブログ::_::https://www.magical-remix.co.jpmagicalog/ 注意 ただし、新規ページヘは別窓で開かず、同一画面で遷移です。 _blankで別窓遷移はシステム仕様上まだ実装されていないようです。早期実装されるといいですね。 応用 この手法は外部リンクの場合以外にも内部リンクにも使えます。 そのた
WordPressで画像を挿入する時、「添付ファイルの表示設定」より画像の配置位置を選ぶことができます。 この時選んだ配置位置により、画像には以下のclassが付加されます。 配置位置 左:alignleft 例:<img src="example.gif" alt="ex" class="alignleft" /> 配置位置 中央:aligncenter 例:<img src="example.gif" alt="ex" class="aligncenter" /> 配置位置 右:alignright 例:<img src="example.gif" alt="ex" class="alignright" /> 配置位置 なし:alignnone 例:<img src="example.gif" alt="ex" class="alignnone" /> WordPressのテーマを自作
大人数でWordPressを更新していく際には、投稿された記事のチェックが必須になってくるかと思います。現時点(ver.3.8)ではそうした公開承認機能は標準搭載されていません。 しかし、さすがはWordPress。プラグインを入れることによって公開承認機能を追加することができます。 流れとしては以下のとおり。 寄稿者が投稿する 投稿記事はすべてレビュー待ち(承認待ち)状態になる 管理者にメール送信 管理者が公開承認する 記事公開 公開承認機能を追加する プラグイン「Peter’s Collaboration E-mails」を使用します。 管理画面の[プラグイン] → [新規追加]より「Peter’s Collaboration E-mails」で検索しインストール、有効化 [設定] → [公開承認ワークフロー]を開く 何も設定しない状態では、承認者はWordPress設置時の管理者にな
WordPressでアップロードできるファイルの容量上限は、サーバーの設定に依存しています。大体が2MBや3MBでしょうか。 この程度の上限では、PDFファイルや大きめの写真などが制限に引っかかってしまい、アップロードできません。そのため、容量上限を変更したいと思います。 この時、大体は「php.ini」を使用しますが、サーバーによってはphp.iniの設定が反映されないことがあります。その場合は「.htaccess」を編集することでアップロードファイルの容量上限を上げることができます。 また、サーバーによっては、コントロールパネルより設定できるらしいので、まずはじめにサーバーが提供するマニュアルをご確認ください メモ帳などのテキストエディタで「php.ini」というファイルを作成します。 php.iniとは、PHPの全体的な動作や環境を設定するファイルのことです。WordPressはPH
何かと便利なイラストカット。でも、人物や動物など、ちょっと凝ったものを自作するとなると時間も手間もかかりますよね。そんな時に便利なのがイラスト素材配布サイト。仕事でつかえる商用利用無料のイラスト素材サイトを集めてみました。 ※規約や利用条件、配布形式は変更される場合がありますので、ご利用の前に各サイトでご確認ください。 イラストAC 多種多様なイラスト。ユーザー投稿型。データはjpgとeps(epsデータがないイラストもあり)。要・ユーザー登録。 http://www.ac-illust.com/ シルエットAC シルエットイラスト。データはjpg・png・eps。3種類のデータをまとめてダウンロードすることもできる。要・ユーザー登録(上記「イラストAC」と共通アカウントでログイン可能)。 http://www.silhouette-ac.com/ Canva オンラインデザインツールの「
WordPressで企業サイトを作成するときに、トップページに新着記事を表示することはよくあることかと思います。 この時に、ただ新着記事をズラ~と表示するのではなく、記事のカテゴリー名も併せて表示、さらにカテゴリーごとに色分けして表示したいと思います。 テンプレートの記述 新着記事を5件表示 <?php query_posts("post_type=post&posts_per_page=5"); ?> <?php if(have_posts()): ?> <ul> <?php while(have_posts()): the_post(); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="ymd">(<?php the_time('Y年m月d日'); ?>)</span></
更新したはずのサイトがお客さんのパソコンブラウザからは更新されてない…ということはよくある話です。そのたび、「キャッシュが原因ですのでキャッシュをクリアしてください。」と言ってきました。 大体最近は「原因はキャッシュです。Ctrl+F5してください。」と言ってますが、ブラウザによってはそれでは更新されないらしいので、メニューやツールからキャッシュをクリアする方法と、そもそもブラウザにキャッシュさせない方法を。 キャッシュとは? 表示したウェブページのデータを一時的にコンピューターに保存しておく機能です。 毎回ファイルをサーバーからダウンロードしないため、表示までの時間を短縮することができます。しかし、ページが更新されているのに、古いページを表示してしまうこともあります。 各ブラウザでキャッシュをクリアする方法 Internet Explorer 8・9・10 メニューバーより「ツール」→「
フラットなデザインのタブを実装するjQueryコードとCSSを紹介します。 例によって簡単にタブを作れるjQueryライブラリがありますので、めんどうな方はそちらを使用するとラクチンだと思います。 jQueryライブラリ jQueryUI 仮にjquery.tab.jsと名前をつけて保存 $(function(){ $('.tabbox:first').show(); $('#tab li:first').addClass('active'); $('#tab li').click(function() { $('#tab li').removeClass('active'); $(this).addClass('active'); $('.tabbox').hide(); $($(this).find('a').attr('href')).fadeIn(); return false;
リンク要素<a href="◯◯◯.html">のURL「◯◯◯.html」の後ろに#contentを追加したいとします。 この場合は、要素に属性を設定するjQueryのattrを使用します。 HTML <ul class="page-link"> <li><a href="page-link01.html">リンク01</a></li> <li><a href="page-link02.html">リンク02</a></li> <li><a href="page-link03.html">リンク03</a></li> </ul> jQuery(function(){ jQuery(".page-link a").each(function() { var obj = jQuery(this); var link = obj.attr("href"); obj.attr("href",li
よく「紙」媒体が畑の人にさらっと「ここ両端揃えにして」と言われます。たしかに見栄えが全然違います。両端揃えのほうがキレイで整って見えます。 しかし、Webにおいて「両端揃え」はなかなか実現できません。 当然できるでしょ?みたいな感じで指示されてしまった場合に、ちょっとした裏ワザで切り抜ける手法を。 「text-align:justify;」を使う手法 table th { text-align:justify; text-justify:inter-ideograph; } 1行目で行揃えを均等割り付けにします。しかし、この記述だけでは「英単語間」や「文章間」だけで調節が行われるため、日本語の文章には効果がありません。 そのため2行目で均等割付の方法を指定します。「inter-ideograph」は「漢字・ひらがな・カタカナ」の指定です。 Firefoxは1行目だけで日本語も両端揃えになり
大量の記事を一つ一つ編集するのは大変な手間です。このプラグインを使用することで、全記事に含まれる文字列を一発で検索置換することができます。 ただし、使用前にバックアップをとっておくことをおすすめします。置換後に文字列をもとに戻そうと思っても、置換したくない文字列が含まれてしまい、もとに戻せないことがあるからです。 インストール Search Regexからダウンロードするか、管理画面のインストールより「Search Regex」で検索してインストール、有効化をします。 使い方 [ツール]から[Search Regex]を選択します。 「Search pattern」に検索したい文字列を、「Replace pattern」に置換したい文字列を入力します。 「Search pattern」の上の部分は検索対象や検索件数を変更できますが、特に必要なければそのままで問題ありません。 ※「Regex
商用利用可能で無料のシルエット素材やアイコンを50個紹介します。 ご利用の際は、リンク先で詳細をご確認ください。 1.シルエットAC 食べ物や楽器から昆虫など様々な素材が無料で配布されています。(無料の会員登録が必要) 2.アイコン配布中! 美容系や医療系なども用意されているバラエティ豊かなサイト。 3.SILHOUETTE DESIGN クオリティの高い素材ばかり。種類も豊富。 4.エムエムジークリエイティブネット リアルなシルエット素材を配布。武将など変り種も。 5.108 MONOICONS 108つのモノグラムアイコンを配布。 6.All-Sihouettes.com 素材やアイコンなど数えきれないほど配布している。 7.iconmonstr よく利用させていただいているサイト。使いやすいアイコンばかり。 8.METEOCONS お天気関連のアイコンを配布。 9.40 Apple
不可視ファイルとは、ファイル名が”.”(ドット)で始まるファイル。Macで不可視ファイルと不可視フォルダを表示、非表示する方法を紹介します。 不可視ファイルと不可視フォルダを表示する方法 「起動ディスク(Macintosh HDやSystemなど)」→「アプリケーション」→「ユーティリティー」から「ターミナル.app」を起動します。 「ターミナル.app」のアイコン 開かれた「ターミナル」のウィンドウへ以下を入力します。 defaults write com.apple.finder AppleShowAllFiles true その後「return」キーを押し、以下を以下を記入します。 killall Finder 記入後 もう一度「return」を押します。 記入後のウィンドウ 「Finder」が再起動され、不可視ファイルと不可視フォルダが表示されます。 不可視ファイルと不可視フォルダ
1.写真素材足成 人物写真のモデルは老若男女。さまざまなシュチュエーション写真や動物写真、雑貨写真など幅広いニーズに対応するオススメのサイト。 2.PAKUTASO 人物写真から動物写真、交通機関の写真などさまざまなニーズに対応。 3.プロカメラマン撮影のフリー写真素材・無料画像素材のプロ・フォト プロのカメラマンが撮影した写真を専門に提供。クオリティーの高い写真がいっぱい。 4.女性モデルのフリー画像 無料人物写真素材のモデル・フォト プロのカメラマンが撮影した女性モデル写真を専門に提供。女性の動作や、アイテムを使っている様子など細かなニーズに対応。 5.食材・料理のフリー写真素材 無料画像のフード・フォト プロのカメラマンが撮影した食に関する写真を専門に提供。食材の写真が多数。 6.無料CGイメージ画像素材のCG.フォト プロのグラフィックデザイナーがCG加工した画像を専門に提供。コー
Illustratorを使って文字を四角や円で囲む場合、一般的には矩形ツールや楕円ツールを使用します。でも、これだと文字数が増えた場合に、その都度修正しないといけないのが面倒なんですよね。 文字数が変わっても図形が自動的に変わるようにするには、Illustratorのアピアランスと効果を使用します。 自動的にサイズの変わる長方形で文字を囲む方法 バリエーション 塗りの長方形で文字を囲む方法 角丸長方形で文字を囲む方法 一文字を円で囲む方法 自動的にサイズの変わる四角で文字を囲む方法 文字を入力します。 アピアランスパレットで「新規線を追加」を選択します。 アピアランスパレットで、追加した線を選択した状態で効果メニューから「形状に変換」の「長方形」を選択します。 今回は「値を追加」を選択して、任意の数値を入れます。今回は1mmにしました。 ちなみに「値を指定」する場合は、見出しなどをデザイン
Twitter Bootstrapで作成したサイトを印刷しようとすると、リンクの後ろに勝手にリンク先URLが表示されました。 ユーザビリティ的なもので表示されるようにしているのかもしれませんが、今回は「見た目そのまま」のサイトを印刷したいという要望だったので、とっちゃいます。 原因 bootstrap.cssもしくは、bootstrap.min.cssに記述されている以下のCSS bootstrap.cssの場合は183行目あたり @media print { /* 省略 */ a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* 省略 */ } 印刷時に、a要素でhref属性がある場合は要素の後ろにリンク先URLが挿入される、という指定
WordPressでプラグインなしに表示するパンくずリストから特定のカテゴリーの除外する方法 階層が深くなればなるほど、特定のカテゴリーをパンくずリストに出したくない、という場面が出てくるはず。 探しても探しても発見できなかったので、次困ったときのために。 まず、パンくずリストを表示させる方法から。 functions.phpに下記コードを追加します。 <?php function get_breadcrumbs(){ global $wp_query; if ( !is_home() ){ // Start the UL echo '<div id="breadcrumbs"><ul>'; // Add the Home link echo '<li><a href="'. get_settings('home') .'">ホーム</a></li>'; if ( is_catego
つまり、こういうことです。 普通にテーブルがあって、マウスが乗っかった行の背景色が変わります。 今どこ見てるのかっていうのがわかりやすくていいです。 んで、こういう動作的なものは、ajaxとかjavascriptとかそういう小難しいプログラムを使ってやってるんだと思ってましたが、実はCSSの:hoverでやっているらしく。 HTMLでは普通にテーブルを作ります。何の工夫もいりません。 ほいで、CSSで1行追加するだけ。 table tr:hover { background: #e9e4da; } これでマウスの乗っかった行の背景色が変わります。 ただし、問題ひとつ。 IE6で動作しません。(えー) IE6では、<a>タグ以外に:hoverが使えないらしいです。IEってばほんっとにもう…。 という訳で使えないと思ってたんですが、webcreators7月号付録小冊子に解決策が載ってました。
フィードをサクっと表示できるものを探していたら、「Google AJAX Feed API」なるものを提供しているという記事を発見。 備忘録も兼ねて、メモ。 dlで表示してみる アメブロのフィードを「PR:」なしで表示する dlで表示してみる jsの内容 参考:Google AJAX Feed APIでRSSを読み込もう こちら、汎用性の高い「dl」で表示されるように作成されていました。ほとんどそのまま使えて大助かり。 とりあえずファイル名を「feed.js」として、以下を記述します。 google.load("feeds", "1"); // 読込処理 function initialize() { // 読み込むRSSのURLを設定する。 var feed = new google.feeds.Feed("ここに表示したいフィードのurl"); // 取得件数を引数に設定。 feed.
次のページ
このページを最初にブックマークしてみませんか?
『TOPページ | マジカルリミックス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く