キャプションの幅を画像の幅に合わせる
Fig 1: Wikipedia のキャプションつき画像の例 ちょっとわかりにくいタイトルになってしまいましたが、つまり Wikipedia のやつ (Fig 1) みたいに、「画像 (またはビデオなどの埋め込みコンテンツ) の下にキャプションをレイアウトするとき、キャプションが複数行にわたる場合は画像の幅に合わせて折り返したい (ただし画像の幅はバラバラ)」というのをシンプルかつ汎用的なかたちで実現する CSS を考えてみました。というか、このブログのレイアウト用にけっこう長いことあれこれ考えてたもののこれといった手が思いつかなくて放置していたんですが、上手い解決を Stack Overflow でみつけた のでパクった、という話です。 <figure> <img src="/img/photo.jpg"> <figcaption>Lorem ipsum dolor sit amet</
知ってると便利なCSSのテクニックのまとめ -CSS Protips
リスト要素で実装したナビゲーションの右端のボーダーを取り除くシンプルな方法、flexboxで実装したカラム間の溝の最後の溝を取り除く方法、天地の中央に配置など、知ってると便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS Protipsのバージョンアップ版の紹介記事はこちら。 CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。 下記のスタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 リスト要素の最後だけボーダーを適用・削除 body要素に「line-height」を加える 天地の中央に配置 ネガティブなnth-childを使用してアイテムを選択
WordPressでNew!を表示するパターン別４つの方法
WordPress（ワードプレス）コミュニティは、オープンソースのブログCMSプラットフォーム「WordPress（ワードプレス）」に関する情報コミュニティサイトです。 株式会社コミュニティコム所属の星野邦敏が制作＆運営しています。 WordPressを、企業サイトの構築として使う場合や、ブログとして使う場合など、時系列に紐付いたカスタマイズをする際に、 トップページの一覧リストや、各記事のタイトルの横に、「New!」などと文字を付けたり、New!画像を表示させる要望があると思います。 その「New!」の付け方も、 （１）時間を基準で付けたいのか、 （２）各カテゴリーリストの最新件数で付けたいのか、 （３）サイト全体の最新件数で付けたいのか、 （４）それらを組み合わせたいのか、 など、「New!」を付けたい要望も様々です。 ここでは、私が、案件によって、今までに経験しました、WordPre
Twitter Cardsの画像を大きくしたい! → 再度申請が必要です
いやー、ちと手こずってしまいましたが、原因がわかれば簡単なことでした。 Twitterにリンクを投稿すると、ツイートを展開することで表示される「Twitter Cards」というのがあります。これに大きな画像が表示されるようにしたいという場合のお話です。 要はこんな感じに表示されるようにしたいわけです。 とりあえず以前にTwitter Cardsへの対応は済ませてあります。 そこで、<head>内に実装してある<meta>をちょちょっと書き換えればいけるだろーと思ってやってみたんですが、何度やってもうまく行かず。 ちょ、どういうことよ･･･。 きちんと<meta>のコードも書き入れました。以下のように。 <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image:src" conten
Panic Blog » Top 20 Secrets of Coda 2 from Cabel
あなたの知らない Coda 2 の機能があるかも知れません。この記事で Coda 2 をより深く知り、これまで以上に使いこなしてください！ 1. 新規ファイルを分割ウインドウで開く 新規分割ウインドウボタン で追加された分割ウインドウに、以下の 3つの方法で任意のファイルを表示させることが可能です: サイドバーかパスバー、もしくはファイルタブで option + ダブルクリックする パスバー上にドラッグ＆ドロップする コンテキストメニューから “分割ウインドウで開く” を選択する ボーナス Tip: “Option” キーを押しながら新規分割ウインドウボタンを押すと、分割方向が切り替わります。デフォルトの設定は Coda 環境設定 ▸ 一般（タブ）▸ 分割ウインドウで変更可能です。 2. HTML + CSS + ライブプレビュー エディタを 3つに分割し HTML ソースコードと CS
single.phpでmoreの前後を別々に表示したい
やりたいことは、<!–more–> の直下、記事続きが始まる前に 全ページ共通のコンテンツをデフォルト挿入したいということです。 MTの場合だと普通に出来るのですが、WPではその概念がなかったようでしたので、 お分かりになる方がいらっしゃいましたらご教示いただけますでしょうか。 よろしくお願いいたします。 sigeoさん、こんにちは。 プラグインにすることも出来ますが、今回はお手軽にユーザー関数での実装でいってみます。 まず、利用しているテーマフォルダ内にある、functions.phpに以下のコードを追加します。（<?php ?>の括りの中にいれてください。） これが呼び出されると、本来一括りにされていたmore前後の記事のhtmlが分けられた状態で 戻されてきます。 function get_the_divided_content( $more_link_text = null, $s
.htaccessでリダイレクト機能を利用する方法
.htaccess活用法（６） .htaccess（拡張子がhtaccessということで、ドットが必要です。ファイル名がないので最初戸惑いますが、こういうものだと思ってください。）が利用可能だと、 アクセス制限（Basic認証）が可能。 特定のホスト（IPアドレス。プロバイダ）からのアクセスを制限することが可能 参照元（Referer）によるアクセス制限が可能（画像の直リンク禁止も可能） 特定のユーザーエージェント（ブラウザ・ロボット）からのアクセス制限が可能 ブラウザ経由でのアクセス（http://～）を拒否することも可能（大切なデータファイルを守る） リダイレクトが可能（ページの移転時などに重宝） 404 File Not Foundページのカスタマイズが可能。 拡張子別に文字コードを設定することが可能。（文字化け対策に必須の場合があります。） index.cgiやindex.phpを
WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ
WordPress をカスタマイズするなら覚えておきたい条件分岐タグと、カスタマイズにとっても便利なカスタム投稿タイプについて、簡単にまとめてみました。 WordPress をカスタマイズするなら、必ずと言っていいほど使うのが条件分岐タグ。ブログとして Webサイトを構築するなら、とってもよく使う … というほどではないかもしれませんが、一般的な Webサイトを WordPress で構築していくとなると、動的な Webサイトであればあるほど、条件分岐タグはよく使います。 また、話は変わっちゃいますけど、WordPress 3.0 から本格的に採用された新機能、カスタム投稿タイプも、WordPress でのサイト構築にはかなり便利です。おなじみの条件分岐タグから、カスタム投稿タイプ、タクソノミーまでを、メモっぽくまとめてみました。 WordPress サイト構築 Tips 目次 WordP
Evernote Blog � Blog Archive � New updates to Web and Windows
에버노트에 뭐가 새로워요?에버노트에서 무슨 일이 일어나고 있는지 궁금하신가요? 아래의 기사들을 확인하여 우리가 작업 중인 흥미로운 것들을 모두 볼 수 있습니다. 새로운 소식레거시 버전 Evernote 앱 사용 중지2024년 3월 26일, 저희는 레거시 버전 Evernote 앱에 작별을 고합니다. v10 이전의 Evernote 경험을 단일화하면 보안 수준을 크게 높이고 더 빠른 개발을 위해 더 많은 자원을 투입할 수 있습니다. 더 읽기 14가지 주요 기능이 이제 모든 사용자에게 제공됩니다이 중요한 Evernote 기능들은 검색, 첨부 관리, 노트 액세스 등 핵심적인 제품 성능을 높여줍니다. 이제 누구나 그 기능을 사용해 Evernote의 잠재성을 최대한 활용할 수 있습니다.
カスタム投稿タイプ ・カスタムフィールド・カスタムタクソノミー : WordPress | FindxFine
履歴 愛知高等学校 東海大学文学部北欧文学科 東北大学大学院経済学研究科(中途退学) 個人サイト »Hiroshi Sawai »Info Town ご質問などありましたら下記アドレス宛へメールをお送りください。 info@findxfine.com テーマ、プラグインを公式テーマディレクトリ、公式プラグインディレクトリで公開しています。 テーマ WordPress › Theme Directory › kanagata プラグイン Category Archives « WordPress Plugins List Calendar « WordPress Plugins Min Calendar « WordPress Plugins Resize Editor « WordPress Plugins concrete5 Infotown Table 簡単な操作でテーブルを作成するア
MovableTypeのエラー解決メモ：/mt-static/html/editor-content.html?cs=UTF-8のIE6 javascriptエラー - めのうら。 "Archive"
MovableTypeのエラー解決メモ：/mt-static/html/editor-content.html?cs=UTF-8のIE6 javascriptエラー 今後、同じ問題で苦戦される方がいるかもしれないのでメモ。 ●問題 症状：新規作成で新しいブログ記事を作成しようとすると本文に書き込めない/保存ボタンが見えない/画面が真っ白…などのエラー MTの管理画面で新しいブログ記事を作成しようとするとIE6で下記のjavascriptエラーが表示される。 /mt-static/html/editor-content.html?cs=UTF-8が書き込めません。 解決策は以下の通り。 ●原因 mt-config.cgiの#StaticWebPathと#CGIPathのパスのURLと管理画面でログインしているURLが違う 例えば、#StaticWebPathと#CGIPath
簡単にできる OGP を組み込むまでの最短手順
OGP 関係でいろいろと整理したので自分用にメモ。もうちょっとしっかり解説した以下の2つの記事がおすすめです。 フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記 SEOの2倍アクセスを稼ぐFacebook活用術 「いいね！」ボタンと「OGP」の設定方法を超解説 – ガジェット通信 OGP 組み込みの際の基本の記述 以下のコードを貼りつけてページによって必要な情報が流し込まれるようにすればそれで完了です。アプリケーションIDはアプリケーションを作成をしてすぐに取得することができます。 <!DOCTYPE html> <html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#"> <head> <title>ページのタイトル
wordpressテーマ内sidebar.phpで条件分岐タグis_home()がきかない | terabenote.net
wp-adminの設定＞表示設定でフロントページを固定ページにして、その固定ページテンプレートのテーマファイル内でquery_posts()を使うなどして特定あるいは複数のカテゴリーを指定していると、テーマファイルheader.phpで条件分岐タグis_home()は使えても、sidebar.phpでis_home()がきかなくなるという現象が起こるようです。 これには非常に困ったのですが、こちらのページなどに解消法がありました。 フロントページ専用に指定している、テンプレート内でsidebar.phpを読み込んでいる箇所 <?php get_sidebar(); ?> の直前にwp_reset_query()を足して <?php wp_reset_query();get_sidebar(); ?> としたら解決しました。このトラブルはバグではなく、query_posts()でカテゴリを指
サイドバーに子ページのリストをカスタマイズして表示したい
初めまして。過去ログを検索したのですが、ぴったりのものがなかったようなので質問させていただきます。 ページA（親） -ページa（子レベル） –ページa1（孫レベル） –ページa2（孫レベル） -ページb（子レベル） –ページb1（孫レベル） –ページb2（孫レベル） ページC（親） -ページc（子レベル） –ページc1（孫レベル） –ページc2（孫レベル） -ページd（子レベル） –ページd1（孫レベル） –ページd2（孫レベル） という構成だったときに、 ・ページA（親）のサイドバーには ページA（親） -ページa（子レベル） –ページa1（孫レベル） –ページa2（孫レベル） -ページb（子レベル） –ページb1（孫レベル） –ページb2（孫レベル） を、 ・ページC（親）のサイドバーには -ページc（子レベル） –ページc1（孫レベル） –ページc2（孫レベル） -ページd（子レベル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ![[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1fd89076a824a2b1b121fa5a6c8839a4338de05/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012701.png)
showjin.me
https://design-spice.com/2012/06/13/responsive-web-design-image/
http://www.kiemo.com/archives/movable_type/searchresults.php
http://www.crystal-creation.com/web-appli/technical-information/programming/javascript/sample/onfocus.htm
ウィジェット領域を２つ以上つくる【WordPressカスタマイズメモ】
