ブログ

テキスト+CSSでamazon・楽天・yahooのアイコン風丸囲み文字

カエレバなどの商品紹介用のブログパーツでは、amazon・楽天・yahooなどのオンラインモールへのリンクの頭につけるアイコンはimgタグで表現されています。でも、サイトの表示を高速化するなら、imgタグを使わずにテキスト+CSSで表現したほうがいいのでやってみました。 (さらに…)

2012年12月18日
荷量の圧縮は引越料金節約の王道です

いざ引越しとなると、何とか費用を抑えたいと考えるのは当然のこと。ただ、多くの人は、相見積もりなど業者との駆け引きで費用を抑えることばかり考えてしまいます。しかし、荷量の圧縮こそ引越料金節約の王道なのです。 (さらに…)

2012年12月14日
WordPressのアップグレード時は、バックアップを確実に!

WordPressは管理画面からお手軽に最新バージョンにアップグレードできるようになっています。しかし、これは本来とても慎重に行わなければなりません。万一不具合が生じたときに備えてバックアップを取っておきましょう。 (さらに…)

2012年12月13日
関連記事をサムネイルつきで表示！similar postsをカスタマイズ

ウェブシュフでは、創設以来、similar postsプラグインを使って、投稿の後ろに関連記事リストを表示してきました。先日ふと思い立って、これをサムネイルつきリストにカスタマイズしたのでメモ。 (さらに…)

2012年12月12日
スマホでのmenu表示を改造～WordPress Twenty Twelveカスタマイズ
スマホでTwentyTwelveを閲覧している場合、デフォルトではmenuボタンを押すことでmenuがプルダウン表示されます。これを、menuボタンを押すことで予めページ下部に作っておいたメニューリストに飛んでいくように改造しました。

サイドバーにカスタムメニュー作成

管理画面で「外観」→「メニュー」と進んで「+」タブをクリックしてカスタムメニューを作成します。これについては以下のページがよくまとまっています。
[img-link url=”http://www.koikikukan.com/archives/2012/02/16-015555.php” title=”WordPress カスタムメニューの使い方（その1：基本）: 小粋空間”]
最後まで読んで、カスタムメニューをサイドバーに表示させるところまでやってください。するとスマホで閲覧時にページ下部にカスタムメニューが表示されるようになります。

デフォルトのmenuボタンを撤去

次に、classとしてmenu-toggleがあてられている以下のようなデフォルトのボタンをheader.phpから削除します。
```
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
```
サイドバーのメニューへのページ内リンクを作る

次に、先ほど作ったカスタムメニューを実際に表示させてHTMLソースを見ます。

すると、カスタムメニューを囲むaside要素にidがつけられています。ウェブシュフの場合こんな感じになりました。
```
<aside id="nav_menu-3" class="widget widget_nav_menu">
<h3 class="widget-title">カテゴリー</h3>
<div class="menu-sidebar-container">
<ul id="menu-sidebar" class="menu">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
</aside>
```
aside要素のidを確認したら、先ほどボタンを撤去した跡地に、カスタムメニューへのページ内リンクを作ります。ウェブシュフは以下のようなリンクを作りました。
```
<a class="menu-mobile" href="#nav_menu-3">Menu</a>
```
これで、「Menu」というアンカーテキストで、カスタムメニューの場所まですっ飛んでいく、ページ内リンクが出来ました。

ページ内リンクにスタイルをあててボタン化する

このままでは、見た目はMenuというただのリンクテキストです。

そこで、styleをあてていきます。このリンクは、main-navigationというclassが当てられたボックスの中の、menu-mobileというclassが当てられたa要素なので、
```
.main-navigation a.menu-mobile
```
に対して、スタイルをあてていきます。スタイルはお好みにカスタマイズすればいいのですが、ウェブシュフは以下のようにしてみました。
```
.main-navigation a.menu-mobile{
    display: block;
    text-decoration:none;
    padding: 7px 10px;
    padding: 0.5rem 0.714285714rem;
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.7142857;
    font-weight: bold;
    color: #ffffff;
    background-color: #000000;
    background-repeat: repeat-x;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    -khtml-border-radius:7px;
    border-radius:7px;
    -moz-border-radius:0.5rem;
    -webkit-border-radius:0.5rem;
    -khtml-border-radius:0.5rem;
    border-radius:0.5rem;
    box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
```
これを、style.cssの/* Navigation Menu */のところに書き込めば、冒頭の画像のようにポチっと押すとメニューリストまですっ飛んでいくようなボタンが出来ます。

しかし、このままだとスマホ以外の画面の幅が広いデバイスでも、MENUボタンが表示されてしまうので、/* Minimum width of 600 pixels. */のところに、以下のような記述を入れます。
```
.main-navigation a.menu-mobile{
display:none;
}
```
これで完成。
2012年12月10日
WordPressカスタム投稿タイプの導入

先日友人のサイトの制作を手伝ったときに、カスタム投稿タイプを設定しました。個人でブログサイトを運営している上ではほとんど使わない感じですが、商業向けのサイトをワードプレスで構築するにはとても便利です。その導入方法の備忘録です。 (さらに…)

2012年12月7日
サラリーマンはトマトを喰え！うつ・心臓病・前立腺癌・肥満の防止に効果

By: epSos .de

最近トマトにうつ病を撃退する効果があるとのニュースが飛び込んできました。また、かねてから・心臓病・前立腺癌・肥満に対する効果があるとされています。ウェブシュフは医学者ではないので、事の真偽を正確に言うことはできませんが、これはもう「トマト喰うしかないだろ」と思ったので、効能をまとめてみました。 (さらに…)

2012年12月5日
WordPressでyoutube動画を途中から再生する設定で埋め込む

久しぶりにyoutube動画を途中から再生する設定で埋め込もうとしたら、やり方を忘れていました。自分のためにメモを残します。 (さらに…)

2012年12月4日
10ヶ月で23kgの劇的ダイエット、不妊治療用hCGホルモンで

別に、ダイエット業者の片棒を担ぐつもりはないウェブシュフです。しかし、ちょっとびっくりする手法だったので紹介します。なんと不妊治療用のhCGホルモンを投与すると、女性のみならず男性にまで、顕著な減量効果が現れるというものなのです。 (さらに…)

2012年12月4日
get_template_part( ‘content’, get_post_format() );はcontent.phpをincludeする

Twenty Twelveのループ内では、get_template_partとget_post_formatを組み合わせた、get_template_part( ‘content’, get_post_format() );がcontent.phpを呼び出すようになっています。最初はよくわからなかったのでそのメカニズムをメモ。 (さらに…)

2012年12月4日