CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]
カスタマイズはCSSコピペで完了！ それでは今回紹介したデザインのCSSを紹介します。 CSSコード内容 /*================================================================================= カエレバ・ヨメレバ・トマレバ =================================================================================*/ .cstmreba { width:98%; height:auto; margin:36px auto; font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif; line-height: 1.5; word-
![CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]](https://cdn-ak-scissors.b.st-hatena.com/image/square/94759515b4861e4b03672c0fc78240dae7e32689/height=288;version=1;width=512/https%3A%2F%2Frough-log.com%2Fwp-content%2Fuploads%2F2017%2F09%2Fkaereba-yomereba-tomareba0906-1024x653.png)
WordPress ブロックエディター(Gutenberg)カスタマイズあれこれ - Qiita
WordPress 5.0から導入されたブロックエディター(Gutenberg)のカスタマイズ方法や、関連するオプション、新しく導入された設定について見ていきます。オフィシャルの テーマサポート の内容をベースに、独自の情報を追加しています。 更新履歴 2021/06/11 - ブロックフォントサイズの shortName が無くなったので削除。ブロックパターンの削除、カスタム単位、カスタム行間について追加。 2021/01/10 - グラデーション設定を追加。 2020/06/19 - 投稿タイプ別に使えるブロックを制限する方法を追加。 2020/05/24 - ブロックスタイルの削除について追加。 2020/04/22 - 後方互換性についての注意を追加。ダークモードの記載追加。 2020/02/20 - Gutenberg 7.5 でインラインの文字色編集が追加されたので記載。 20
『Luxeritas』の初期設定（外観カスタマイズ）を解説！ - ぱるろぐ
はいこんにちは！ぱる（@palulog）です。 『Luxeritas』の導入・初期設定（内部カスタマイズ）に引き続き、初期設定（外観カスタマイズ）をやっていきたいと思います。 [aside type="warning"]当ブログ『ぱるくら』は有料のWordPressテーマ「STORK（ストーク）」を使用しています。「Luxeritas」を使用したサイトは『ぱるイラスト』です。参考にしてみてください。[/aside] 『Luxeritas』の初期設定（外観カスタマイズ）をしよう！ まずはワードプレスの管理画面から「Luxeritas」→「カスタマイズ（外観）」を選択してください。 この画面が出たらOK！ サイト情報/サイトアイコンで設定したところ 一番上の「サイト情報/サイトアイコン」で設定したところを解説していきます！ サイトのタイトルとキャッチフレーズ サイトのタイトルとキャッチフレーズ
Luxeritas（ルクセリタス）の見た目をオシャレに！ 16のカスタマイズしたことまとめ【WordPressテーマ】 | 第0版
アイキャッチ画像は公式サイトよりお借りました。 高機能なのに 軽くて 無料 メリットいっぱいのWordPressテーマ、Luxeritas（ルクセリタス） 。 デザインはいかにもブログ！ という感じなので（シンプルなのも利点ではあるのですが）、自分好みにするために色々とカスタマイズした備忘録です。 カスタマイザーで設定可能なことは省いてます。カスタマイザーで変更できるのに気づかずCSSで変更してるのもあると思います。笑 CSSの編集は、ダッシュボード画面のLuxeritas → 子テーマの編集 → style.css から編集が可能です。 子テーマの編集が表示されてない方は、子テーマを導入することを強くお勧めします！（Luxeritas公式のダウンロードページからダウンロード可能です） 公式Luxeritas ダウンロード
SimplicityのAMP機能の使い方。カスタマイズ方法など。
Simplicity2.3.1からAMPに対応しました。 以下では、簡単にSimplicityでのAMP機能の使い方を説明します。 とは言っても、そこまで難しいことをする必要はないかと思います。 AMP機能を有効にする まずSimplicityで、AMP機能を利用するには、テーマカスタマイザーで機能を有効にする必要があります。 WordPress管理画面から「外観 → カスタマイズ」を選択してください。 あとは「AMP」項目にある「AMPの有効化」にチェックを入れてください。 Simplicityは、これだけでAMPが利用できるようになります。機能を有効化することによって、投稿ページに対してAMPページが作成されます。固定ページではAMPページは作成されないのでご注意ください。
WordPressのget_postsでアイキャッチがある記事だけのリストをつくる
アイキャッチの設定してある記事だけを、指定数リストに出力する方法をいろいろ試してみました。おまけとして、アイキャッチの「無い」記事だけを取得する方法もあります！ 代替画像のない記事リストを出したい ちょっと前にフッターのレイアウトを変えまして、そこで出している「ピックアップ」という名のランダム記事リンクに、アイキャッチを一緒に表示させることにしました（以前はテキストだけでした）。 このブログをWordPressで始めてからは毎回アイキャッチを設定しているので、新着記事などでは問題ないんですが、WPに移行する前の記事もインポートしてあって、ランダムだとそれも出てきちゃうんですよね。 アイキャッチが設定されてない記事にはnoimageのような代替画像を出す、という手法でももちろんいいんでしょうが、なんというか見栄えがなー、びみょうだなー、と思ってしまいまして。 過去記事のすべてがアイキャッチ無
Simplicityのしくみがわかる超解剖シート作った | ズボラしき世界
Simplicityのカスタマイズの参考になりそうな、IDや、テンプレートの関係がわかるシートを作りました。 single.phpを使って表示させるページ（通常の投稿）の場合の時の物です。バージョンは1.4安定板です。 外観をカスタマイズするときの自分用覚書なので、読み込まれる全てのテンプレートを網羅したわけではないのですが、スタイルシートで使われているセレクタはなるべく落とさずに記入した……と思います。 その時々で調べてもいいんですけど、おんなじこと何回も調べたくなかったんです… でも、軽い気持ちで始めたら結構大変なことになりました…… Simplicityのバージョンが上がるたび、テーマの中のファイルが増えて、慣れていない頃どこから見ればいいの？って思った事を思い出して作りました…。 なんの役に立つかというと… たとえば、 h4が関連記事のタイトルとウィジェットのタイトル部分に使われて
少しのコードで実装可能な20のWordPress小技集
2016年10月27日 Wordpress CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 カスタムメニューの設置 アイキャッチ画像（サムネイル画像）を利用する 検索ワードをハイライト Twitterのユーザー名を自動的にリンクさせる デバイスによってコンテンツ変える 画像を挿入する際、P タグで囲まないようにする 「続きを読む」リンクをカスタマイズ ショートコードを作成 ショートコードをテンプレートファイル内で実行する 古い記事にメッセージを表示する RSSフィードに画像を追加 記事に含まれ
レスポンシブ対応WordPress無料テーマ『Chocolat』が高機能で可愛すぎる！
男子なボクもビビッときた！可愛くて使えるWordPressテーマ『Chocolat』 何気なくテーマ検索をしていてみつけたのがｍ女性にぴったりなWPテーマ『Chocolat』でした。 ブラウンとベージュを基調にしたレスポンシブデザインで、使用するタブレットやスマートフォンにも最適化された表示を自動で行ってくれます。 初めて見た時に「可愛いテーマだなぁ！」と思いつつ、どんな外人さんが制作しているのだろうと作成者Mignon Style（@mignon_style）さんのサイトへ行ってみると、なんと日本の方でした。 ますます興味が出たのでサンプルサイトにインストールし、テーマを見て驚きました！このテーマを使う人のための、色々な機能が追加されており、独自のウィジェットで簡単に設定出来ちゃうんです。 ではでは、その中身を見ていきましょう。 各表示がチェックマークを付けるだけで簡単に設定出来る！
WordPressで投稿記事のサムネイル付き更新リストを表示してみる
MS Office カテゴリ MS Office (107) 関連タグ Access (45) Excel (94) OfficeScripts (2) PowerPoint (8) Python (3) VBA (92) YouTube (6) イラスト (44) 入門 (38) Web カテゴリ Web (85) 関連タグ facebook (4) jQuery (10) linux (3) Photoshop (18) PHP (24) tips (22) twitter (10) WordPress (76) YouTube (6) アプリ (29) イラスト (44) デザイン (15) ブログ (39) 入門 (38) 分析 (20) Adobe カテゴリ Adobe (28) 関連タグ facebook (4) Fresco (2) Illustrator (8) JavaS
イントラネット向け、PHP+MySQLのタイムテーブル型予約システム
イントラネットで使う会議室予約みたいなのが欲しくて、作ってみたものです。WordPressでも（一応）実装は可能です。PHP初心者が唸りながら書いたものなので、どうぞ参考程度にご覧ください。 目指したもの かばの遊べるCGI こちらで紹介されている「会議室予約」のようなシステムがほしくて、仕様やレイアウトを真似して、PHPで作らせていただきました。既にサイトは閉鎖されており、上記リンクは有志の方による復元サイトのようです。この場にて、厚く御礼申し上げます。 前置き 実は当初、WordPressに組み込んで使おうと企てました。現状、非常に優秀で柔軟性の高いツールやグループウェアがいっぱいあるなか、あえてのWP…(;´Д`) そもそもの依頼の前提が「冒頭の既製品に近いもの」だったことと、使用予定のWebサーバにWordPressを入れるつもりだったことから「これWPのDB使えないかな！ 組み込
ページ削除履歴 - Naifix
Naifix で公開していた以下のページは削除されています。 WordPress プラグイン関連 以下の記事で紹介・解説していたプラグインは何年も更新されておらず、最新版の WordPress で検証したところ正常に動作しないことが確認されたため削除しました。 WordPress のちょっとしたカスタマイズに便利な WP Theme Test https://naifix.com/wp-theme-test/ WordPress テーマカスタマイズに便利な「Theme Test Drive」の使い方 https://naifix.com/theme-test-drive/ ツイート数やはてブ数を取得して高速表示できる SNS Count Cache の使い方 https://naifix.com/sns-count-cache/ Facebook の「いいね！」が激増する WordPres
プラグインなしでちょっとカッコいいページネーションを付ける。
随分前に書いたWordPressプラグインなしでページ送り（ナビゲーション）覚書 、沢山読んでいただいてるようでありがとうございます。 ほんとに、覚え書きとか書いておきながら、自分でも忘れてたくらい昔の投稿です。 WordPressプラグインなしでページ送り（ナビゲーション）覚書 プラグインを使わずナビゲーションを実装♪ ステキ！ こちらがわかりやすく CSSもつけてくださってます。 ありがたや～、ありがたや。 こんなかんじ。 search.phpやarchive.phpなどのページナビを入れ more... 当時は、これで十分でしたけど、近頃はちょっと知恵をつけまして、ちょっと違う実装の方法をしています。 せっかく、いらしていただいてるので、是非こちらもご紹介しておこうと思った次第です。 プラグインなしでページ送りを付ける WordPressには、ページ送りを実装する、とてもポピュラーな
ページ送りをおしゃれにカスタマイズできるWordPressプラグイン「WP-PageNavi」と「WP PageNavi Style」 | TechMemo
シェアしてね♪ Tweet ワンコインで広告掲載してみませんか？ Tweet 先日 WP Page Numbers というページ送りをカスタマイズするプラグインを紹介しましたが、アップデートも止まってるし最近は WP-PageNavi の方が人気みたいですね。 ということで、今回はページ送りをおしゃれにカスタマイズできるプラグイン「WP-PageNavi」を紹介したいと思います。機能や使い方は WP Page Numbers とほぼ同じですが、WP PageNavi Style というプラグインを追加インストールすることでさらにおしゃれにカスタマイズすることが可能です。 WP-PageNaviのインストール インストール手順は以下の通りです。 WP-PageNaviをダウンロードします。 ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。 管理画
[WP] Stinger 3のフッターで次の記事がきちんとリンクされない問題を修正する
Stinger 3 のカスタマイズも一段落、と思っていたら、ふとみた時に課題を見つけてしまってバタバタと直した @azur256 です。今回は記事ページのフッタ部分にある前後の記事へのナビゲーションがうまく動作していないというものでした。 前後ページへのリンクがおかしい これに気づいた時のエントリの構成は以下の写真のように recolte Capsule Cutter でタマネギのみじん切りをしてみた の前の記事が パソリリーダ RC-S390 で接続エラーが出た時の対処方法 で、さらに前が Bluetooth 接続のパソリリーダーライター RC-S390 を iPhone から使ってみた となっています。 パソリリーダーのエラー対処のエントリを表示した時のフッタ。NEXT に recolte でのみじん切りのエントリが出て欲しいのに出ていません。 どうも表示されないパターンは予約投稿など
![[WP] Stinger 3のフッターで次の記事がきちんとリンクされない問題を修正する](https://cdn-ak-scissors.b.st-hatena.com/image/square/48f89d3a068ba570916d839752703e53f252d7f6/height=288;version=1;width=512/http%3A%2F%2Fazur256.com%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F10%2F131007-0018.png)
Twenty Thirteen ナビゲーションメニューを固定
ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。 スクリプト 以下のjsファイルを用意して下さい。 nav要素のidは、ソースもしくはheader.phpの<nav id="~">をみて確認して下さい。 // navbarfixedtop.js <script type="text/javascript"> $(function () { var nav = $('#navbar'); // nav要素のidを設定 var objDistance = nav.offset().top; $(window).scroll(function() { var myDistance = $(window).scrollTop(); if (myDistance > objDistance){ nav.addClass('navbar-fixed-top
アイキャッチ画像の設定ボックスに説明文を追加する方法
WordPressは各投稿にアイキャッチ画像（サムネイル）を設定することができます。ドラッグするだけで簡単に設定できるので重宝するのですが、適切なサイズがどのくらいの大きさだったのかを忘れてしまうことがありました。 何か方法がないか調べてみたところ、アイキャッチ画像の設定ボックスに説明文を追加する方法が見つかりました。以下のようにすれば、ここにサムネイルサイズを自動的に表示することができます。 // アイキャッチ画像の設定部分に説明を追加 add_filter( 'admin_post_thumbnail_html', 'my_admin_post_thumbnail_html' ) ; function myadmin_post_thumbnail_html( $content ) { global $_wp_additional_image_sizes; if ( isset( $_w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【レスポンシブ対応】新着情報欄にカスタム投稿の記事を表示する方法 – Shufulife
frasm.net
WordPressブログのデザインや機能を一歩先に進化させるカスタマイズ記事まとめ * prasm（プラズム）
