ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

タグ別記事一覧で表示中のタグのタグ名とタグIDを取得する方法

以前カテゴリ別記事一覧に関連タグを表示する方法という記事を書いたのですが、タグ別記事一覧(タグアーカイブ)にも関連タグリストを表示させることにしました。 同じようなコードにするには、表示中のタグのタグIDが必要になります。そこでタグ別記事一覧で…

カテゴリによる関連記事リストの下に「もっと読む」リンクを付ける

WordPressで関連記事リストと、「○○(カテゴリ名)に関する記事をもっと読む」というリンクを表示する方法です。プラグインを使わずに表示します。リンクをクリックするとカテゴリ別記事一覧に飛ぶようにします。 下の画像が見本です。 PHPの追加 関連記事を表…

WordPressでランダムに取得した記事をトップページにピックアップ記事として表示する

WordPressでサイトのトップページのデザインをインパクトあるものにしたいなーと思ったときのカスタマイズです。 上の画像のように、マガジンサイトでよく見るようなデザインにしていきます。 ランダムに記事を取得する方法 下記のコードを、ランダム記事を…

カテゴリ別記事一覧に関連タグを表示する方法

カテゴリ別記事一覧(カテゴリーアーカイブ)で、そのカテゴリに属する記事で使われているタグをリスト表示する方法の紹介です。 タグリスト表示方法 archive.phpの修正 archive.phpで、カテゴリーアーカイブの場合にタグリストを表示するようにコードを追記し…

WordPressでカテゴリ毎に違うcssを適用する

WordPressでカテゴリ毎にスタイルを変えたいときのやり方を紹介します。 カテゴリ毎にテーマカラーを決めて見出しの色を変えたり、カテゴリ毎に違う画像を表示したりすることもできます。 カテゴリ毎cssの設定方法 phpファイルの修正 カテゴリ別スタイルを適…

記事ランキングの順位マークをcssのみで実装する

サイドバーによく配置される人気記事ランキング。順位のマークを付けるとわかりやすく、見た目もよくなります。 下記の画像のような順位マークはcssのみで実装できるので、その方法を紹介します。 ランキングマークの実装方法 cssのcounterを使って順位をカ…

Delivery Liteでサイドバーの見出しをh1から変更する

キナリノとかMeryみたいなデザインのサイトが作りたくてWordPressのテーマを探していたところ、Delivery Liteというテーマを見つけました。構造的にはMeryにとっても近い! リンクDelivery Liteデモ 無料でそのまま使っても、ほとんどデモサイトのままのデザ…

ブラウザサイズを基準に高さや幅を指定したいときにはvwやvhが使える!

css

画面いっぱいに画像を表示したいな~とか思ったとき、%で指定する手法がよく使われます。でもこの%は、親要素のサイズに対する割合を指定するものなので、うまく動作してくれないことがあります。 そんなときに使えるのがvwやvhという単位です。 vw/vhとは?…

ウェブページにできる謎の隙間「&#65279」の消し方がやっと判明した

WordPressで作ったウェブページに、覚えのない空きスペースができてました。ソースを確認すると、「」という謎の記号。 BOMを削除すればいいという情報はすぐ出てきたのですが、やってみても解決しない。 原因は、修正する箇所が違っていたから。get_templa…

AndroidStudioでアプリのテーマカラーを変更する方法

AndroidStudioで作ったアプリにデフォルトで設定される、ステータスバーやアクションバーなどの色を変更する方法の紹介です。 アプリのテーマカラー変更方法 アプリの色の設定が記載されているのは「app」-「res」-「value」-「styles.xml」です。styles.xml…

簡単3ステップAndroidStudioでAdMobの広告を表示させる方法

AndroidStudioでAdMobの広告を表示させる方法の紹介です。 この記事内のキャプチャは、日本語化したAndroidStudioを使っています。日本語化されていない方にもわかるよう、英語メニュー名も書くようにしました。 もしも先にAndroidStudioを日本語化したい場…

WordPressコメント入力欄のe-mailやURLを非表示にする方法2つ

WordPressでコメントのメールアドレスやURL入力欄を非表示にする方法を2つ紹介します。 cssで入力欄を隠す方法と、PHPを修正して入力欄を出力させないようにする方法です。WordPress関数の扱い方に慣れていない方はcssで隠す方法をお試しください。 事前にデ…