divで囲ったようなコンテンツにマウスが乗ったとき、枠線の太さを変更するとコンテンツが大きくなったような動きになります。
こうした挙動が意図したものではない時に使える方法をメモしておきます。
作業手順
1.太くなった枠線の画像を作成
png等、透過が使える画像で、枠線だけの画像を準備します。
2.CSS
CSSでimgのopacity: 0;に設定し、:hoverでopacity: 1;に設定すればオンマウスで枠線の太さを変更することができる。
divで囲ったようなコンテンツにマウスが乗ったとき、枠線の太さを変更するとコンテンツが大きくなったような動きになります。
こうした挙動が意図したものではない時に使える方法をメモしておきます。
png等、透過が使える画像で、枠線だけの画像を準備します。
CSSでimgのopacity: 0;に設定し、:hoverでopacity: 1;に設定すればオンマウスで枠線の太さを変更することができる。
Yoast WordPress Seoを使用して、サイトのタイトルにsitenameが2重に表示されてしまっていた時の対処法のメモです。
Google検索すると「Yoast sitename twice」という英語の検索キーワードがサジェッションされていましたので、色々と見てみると、「Titles & Metas」の「General」→「Title settings」の「Force rewrite titles」にチェックを入れると解決できるようです。
テーマによって異なるようですが、当サイトもチェックを入れる事で解決でした。
日本語のページがなかったのでメモしておきます。
タイトルの文字数制限を設ける
高さを決めてはみ出した部分をoverflow: hidden;で非表示にする。
はみ出てても体裁が良い様に行間を調整しておく。
カテゴリーを統合したり、削除したり出来るプラグイン「Term Management Tools」
タグを簡単に管理できるプラグイン「Simple Tags」
PuSHPressは、WordPressに記事を投稿すると、Googleの検索エンジンに瞬時にインデックスさせることができるプラグイン.
「Broken Link Checker」はリンク切れテキストを打ち消し線にしてくれるプラグイン。
リンク切れノ詳細もチェックできる。
WP Image Size Selection追加した画像サイズを投稿に挿入できる様にするプラグインです。
WordPress Popular Postと並んで人気のプラグイン「Popular Post」。
カスタマイズ完全マニュアルと銘打ちましたので、カスタマイズ系の情報を全て網羅できたらと思っています。
現在執筆中ですので備忘録的な要素が強いですが、参考にしてください。
一長一短ですが、Wordpress Popular Postの方が更新頻度も多く扱いやすいですが、カスタマイズ性は「Popular Post」の方が高いです。
例えば、人気の記事ランキングに記事のカテゴリを表示させ、カテゴリに応じて背景色を変えたいといったことは「Wordpress Popular Post」ではできません。細かな設定をしたいという場合はPopular Postがお勧めです。
Popular Postのインストールに「Post-Plugin Library」というプラグインが別途必要になります。
こちらも公式プラグインですので、プラグインの検索からインストールし有効化しましょう。
{php: echo get_the_post_thumbnail( {postid}, array(190,160), array('title' => ' {title}' )); }
phpを使って順位を表示することができる。
http://www.347memorandum.com/cms/wordpress/2011/12/0000130/
| Available Tags | 日本語 |
| {author} | 作者を表示 |
| {authorurl} | 作者をurl付きで表示 |
| {categoryid} | カテゴリーidを表示 |
| {categorylinks} | カテゴリーをリンク付きで全て表示 |
| {categorynames} | カテゴリーをりんくなしで全て表示 |
| {commentcount} | コメント数を表示 |
| {custom} | |
| {date} | 投稿日を表示 |
| {dateedited} | |
| {excerpt} | 抜粋を表示 |
| {fullpost} | 記事全部 |
| {gravatar} | アバターを表示 |
| {if} | |
| {image} | 記事内の最初の画像を表示 |
| {imagealt} | 記事内の最初の画像のaltを表示 |
| {imagesrc} | 記事内の最初の画像のurlだけを表示 |
| {link} | タイトルをリンク付きで表示 |
| {php} | phpコードを記述する際に使用。サムネイルもこのタグで表示できる。 |
| {postid} | 記事のidを表示 |
| {postviews} | 記事の閲覧数を表示 |
| {snippet} | |
| {tags} | 記事のタグを表示 |
| {taglinks} | 記事のタグをリンク付きで表示 |
| {title} | 記事のタイトルを表示 |
| {time} | 記事の投稿時間を表示 |
| {timeedited} | |
| {totalpages} | |
| {totalposts} | |
| {url} | 記事のurlを表示 |
[Googlead]
ノンプログラマがWordpressで人気の記事を表示させるのに欠かせないのがWordPress Popular Postというプラグイン。
基本的な機能を使うだけであればものの5分で設定可能だ。
しかし、このプラグインには様々なオプション機能があり
カスタマイズのオプションも多岐にわたる。
この記事は「Wordpress Popular Postカスタマイズ完全マニュアル」と銘打って
このプラグインのカスタマイズの全てを網羅していこうと思う。
現在記事は執筆中のため、備忘録的な体裁になるが少しでも参考になればと思い公開しながら更新していく。
[Googlead]
「インストール済みプラグイン」から「Wordpress Popular Posts」の下の「編集」をクリックし、
プラグインを直接編集していく。
※プラグインのアップデートに伴ってコードの位置は異なることになる。
wordpress-popular-posts/wordpress-popular-posts.phpファイル内から該当するコードを削除。
下のコードをファイル内から検索し、全てを削除。
. __('under', 'wordpress-popular-posts')
下のコードをファイル内から検索し、全てを削除、またはposted onの文字列を任意の文字列に変更。
. __('posted on', 'wordpress-popular-posts')
該当する位置の | をファイル内から検索し、削除。
こちらも「インストール済みプラグイン」から「Wordpress Popular Posts」の下の「編集」をクリックして、プラグインを直接編集。
wordpress-popular-posts/wordpress-popular-posts.phpファイル内から該当するコードを編集。
$views_text = sprintf(
_n('1 view', '%s views', intval($pageviews), 'wordpress-popular-posts'),
上の「views」の箇所を任意のテキストに変更。削除する事ももちろん可能だ。
ulではなくolでマークアップし、番号を装飾する方法。下のサイトが分かり易く解説しているので参考にすると良い。
http://ateitexe.com/ol-ranking-styling/
Meteor SlidesというWordpressプラグインはレスポンシブデザインにも対応した大変手軽なプラグインです。
このプラグインで画像スライドショーに画像のタイトルを表示させる方法の備忘録です。
詳しい解説は作者のホームページで確認できる。(英語)
http://jleuze.com/plugins/meteor-slides/customizing-the-slideshow-template/
meteor-slideshow.phpファイルの
</div><!-- .mslide -->
というコードの上に下のコードを貼付けます。
<p><?php the_title(); ?></p>
そのままでは表示されないので、CSSに下記を追加で完了です。
.meteor-slides p {
background: rgba(0,0,0,0.2);
bottom: 0;
color: #000;
left: 0;
line-height: 20px;
margin: 0;
padding: 2%;
position: absolute;
text-align: center;
width: 96%;
}