Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

テーマ

スマホ用に最適化してくれるプラグインWPtouch

最近というかもう結構前からレスポンシブデザインなんてのが流行っていますが、個人的にはデバイスとかブラウザのサイズによって見た目が変わるのはちょっと気持ち悪いと思っているので今回のオリジナルテーマ作りでは手をだしませんでした。 なのでイメージ…

jQueryによるカテゴリのアコーディオン表示

前回に続き今回もjQueryネタ。ちょっとしたアニメーションネタです。 本ブログではサイドバーにあるカテゴリーにマウスカーソルを持っていくと下にびよーんと伸びます。これの実装方法について。 まずカテゴリ部分は以下のように実装してsidebar.phpからで呼…

jQueryによる記事のフォーカス処理

行いたい処理はこれ。 マウスカーソルがタイトルや「続きを読む」にのったとき背景色をかえることです。 単純にタグやclassの値を拾ってjQueryで処理させると、フォーカスしている記事以外の背景もすべて色が変わってしまいます。 これは以下のようにして解…

Googleの検索ボックスを実装

また公開前のちょっとしたおまけの内容です。 本ブログでは検索ボックスにWordPressのget_search_form()関数を利用しておらず、Google AdSenseの「検索向けAdSense」というものを利用しています。 これを利用すると検索結果が以下画面のようになります。 よ…

サイドバーにamazonのウィジェットを表示

テーマづくりもほぼ終わり、バックアップもとったのでほぼ完成!という状態ですがおまけ程度にamazonウィジェットについて。 amazonアソシエイトに登録してウィジェットを見てみるとたくさんのウィジェットがあります。 くるくるウィジェットのように面白い…

WordPressのテーマにパンくずリストを実装する

以前パンくずリストをHTML化したのでそれをWordPressのテーマ化します。 これ実は結構苦労しました。 WordPressのカテゴリは階層化できる(親御関係を持たせられる)し、一つの記事に複数のカテゴリを付けられるから。 単にとするだけだと場合によっては以下…

ランダム記事の表示

今回はプラグインを使用しないでランダムな記事を表示する方法について。 サイドバーのこの部分のことです。 これは以下サイトを参照して実装しました(ランダム以外にもいろいろと参考になります)。 プラグインを使わずWordPressに9の機能をつける ただし…

関連記事を表示するYARPPプラグイン

今回は関連記事を表示してくれるプラグインYARPPについて。 以下のようなやつを自動的にブログに挿入してくれます。 インストール方法 WordPressの管理画面で「プラグイン」→「新規追加」→「プラグインの検索」で「Yet Another Related Posts Plugin」と検索…

コメント投稿後の画面遷移不具合解消

不具合第2弾です。 前回の対応でコメント投稿後画面が真っ白になることはなくなりましたが、次はコメント投稿後、投稿したコメントよりも上にスクロールできなくなっていました。 この原因はcssにありました。 不適切な場所にoverflow:hiddenが設定されてい…

WordPressで投稿・コメント後に画面が真っ白になる問題

オリジナルのテーマもそこそこ形になってきて、新規投稿やコメントをしてみるとなぜか画面が真っ白。こんな状況になりました。 対処した方法は以下に記載の通りですが、この問題はローカル環境でしか起こらず、本番環境では起こっていないので深追いはしてい…

WP Popular Postsのデザイン調整

今回は人気記事の表示ができるプラグインWordPress Popular Postsについて。 こんなやつ。 cssで調整しないと見た目があまりよろしくないので画像サイズは80pxにして、以下のようなcssにしました。 style.css .popular-posts{ overflow:hidden; margin:0px 5…

カテゴリーのレイアウト調整

WordPressの標準のカテゴリー表示ってちょっと物足りないですよね。(ですよね?!) なので少し手を入れて以下のような表示にしました(この段階ではjQuery適用前なので、子カテゴリーもすべて表示されています)。 階層表示されており、親カテゴリだけカラ…

サイドバー実装の補足

前回記事のサイドバーの実装について少し補足があります。 前回はわかりやすくするためsidebar.phpを少し簡略化しましたが、実際は以下のようになっています。 sidebar.php ポイントはif (is_single())の部分。 ブログに広告を貼る場合「トップページにはサ…

サイドバー部品のオリジナルモジュール実装

今回はサイドバーへのオリジナルモジュールの実装方法について。 サイドバーの実装については以前ご紹介したこちらのサイトを参照すれば基本的なことはできます。 基本を踏まえた上で本ブログでは少し手を入れた実装にしています。 本ブログのsidebar.phpの…

SNSのカウント数表示

タイトルだけだとよくわからないかもしれませんが、株式会社LIGのサイト(のまさに以下の記事)を見たときにビビビッときました。 かわえぇ このFacebookとかTwitterとかのカウント数をトップページに表示したい。 誰かができていることをできないはずがない…

Social Bookmarking Plugin Lightを自由な位置に配置する方法

今回はSocial Bookmarking Plugin Lightプラグインについて。 このプラグインをつかうとFacebookのいいね!ボタンやツイッターのボタンをブログに簡単に追加できるのでとても便利です。 ただ、WordPressの設定画面からの操作だと表示位置をTop, Bottom, Both…

ナビゲーション(次の記事、前の記事)の実装

今回はページ下によくあるナビゲーション(次の記事、前の記事)について。 どのサイトにもだいたいあるごく普通のものですがWordPressのテーマとして実装するにはそれなりに苦労しました。 実装したものは以下のようになっています。 まず一番上が通常の状…

HTMLのオリジナルテーマ化

今回は作成したHTMLのテーマ化について。 正直今回テーマを作るまで何をしていいのかよくわかっていませんでしたが「はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)」のサイトを参考に順に進めて…

画像を使ったパンくずリストの実装

今回はパンくずリストのHTML化について。 「パンくずリスト」とはよくサイトの上の方にあり、いまどこにいるのかを示すリンクのことです。 こんなやつ 童話「ヘンゼルとグレーテル」で森で迷子にならないように通り道にパンくずを置いていったというのが語源…

オリジナルテーマ化・各記事ページのデザイン検討

今回は各記事のページのデザイン検討について。 トップページのデザインは済んでいるので、だいたいの場合はそれを流用したデザインになると思います。なので今回新たに考える部分は、文章を装飾する各タグを使ったときにどのように見せるかというところがポ…

オリジナルテーマ化・ロゴの検討

本日は軽めの内容としてロゴについて。 軽めの内容とはいっても、毎回目に入る部分なので結構重要だと思います。 とはいってもここはもうそれぞれ好みで作ればいいと思うので、対して説明する必要はないという感じです。 ちなみに、このブログのロゴはこれ。…

オリジナルテーマ・HTML化作業

デザインを考えたら、次はHTML化作業です。 WordPressのテーマはPHPを利用して作りますが、PHPを利用しても結局のところ最終的なアウトプットはHTMLになります。(PHPを利用して「こういうHTMLを出力してください」とお願いする感じ) HTML化作業をしてしま…

オリジナルテーマ化・デザイン検討

これからしばらくWordPressのテーマをオリジナル化するためにたどった道のりを細かく補足していこうと思います。 流れは基本的にここに書いているものに沿っていく予定です。 まず1回目はブログのデザインについて。 最近は無料で使える優秀なテーマも探せ…

WordPressオリジナルテーマへの道

WordPressのオリジナルテーマを作る過程を以下にまとめてみました。改めてまとめてみると結構なボリュームになりました。リンクが張ってある部分はその工程の詳細について書いているので興味のある方はご覧ください。 1日目 ブログトップページのデザイン検…

祝い!WordPressのオリジナルテーマ

少し前から取り掛かっていたWordPressのテーマのオリジナル化が概ね終わりました。 テーマを作るのは初めてだったので結構苦労しました。こだわりポイントなどは別途まとめるとしてまだ不完全なので、今後修正したいところをまずは記載。 要修正その1 トッ…

新テーマ投稿テスト

pタグ リンク strongタグ emタグ h3タグ h3タグ ul > li タグ ul > li タグ ul > li タグ ol > li class="ol_01" ol > li class="ol_02" ol > li class="ol_03" ol > li classなし div class="complement" div class="quotation"

WordPressのオリジナルテーマ絶賛作成中

テーマづくりに夢中でブログを書かないとかどうかと・・・ 完成まではまだもう少しかかりそうなもののとりあえず動く状態まではもう少しで持っていけそう。 なので、テーマ以外にもいろいろと手を入れたいと思いとりあえず以下をメモ。 サーバーのファイルと…

ブログのデザインで参考にしたサイト

現在WordPressのテーマを自力で作ろうと試行錯誤中。 で、何をやるにしてもまず調査をすることって大事ですよね。 ということで著名なブログなどをいくつか見て回りました。 以下のブログのデザインが個人的には結構好きな感じでした。 和洋風KAI 株式会社LI…

WordPressのテーマをStingerに変更

WordPressのテーマを変更してみました。 以前は「Squared」というテーマでこれはこれでよかったのですが、 今回の「Stinger」というテーマを知ってどうしても変えたくなりました。 「Stinger」はこちらのサイトからダウンロード可能です。 ほとんどプラグイ…