こんにちは!寿天(すあま)です!
いきなりですが、今回は
WordPress初心者・寿天と茶生(ちゃお)のサイト改造!
いきなりですが、今回は
WordPress初心者・寿天と茶生(ちゃお)のサイト改造!
WordPressでDIYシリーズ!!
そうッス!姐さん!
トップページのウェルカムメッセージエリアにちょいと気になるところがあるんスよ。
そうッス!姐さん!
トップページのウェルカムメッセージエリアにちょいと気になるところがあるんスよ。
お、さっそくですね。
なになに?
なになに?
トップページのウェルカムメッセージエリアにバナー画像を出したい!
最近、トップページのウェルカムメッセージエリアにおいらたちイマジファミリーのイラストや漫画のお知らせを載せたじゃねぇッスか?
あぁ、うん。
載せたね。
載せたね。
・・・ちぃとばかし、インパクトに欠けてねぇッスかねぇ?
どんな雰囲気のイラストを描いているのかが伝わりやすいように、
もうちっとどうにかできねぇッスかねぇ・・・?
どんな雰囲気のイラストを描いているのかが伝わりやすいように、
もうちっとどうにかできねぇッスかねぇ・・・?
あ~確かにそうだね。
少し地味だし、イラストのテイストとか分かりにくいかも。
このお知らせ自体はウィジェットでも載せていて、
そっちの方はバナー画像も一緒なので、いい感じなんですけどねぇ。
少し地味だし、イラストのテイストとか分かりにくいかも。
このお知らせ自体はウィジェットでも載せていて、
そっちの方はバナー画像も一緒なので、いい感じなんですけどねぇ。

ただ・・・このサイズの画像をウェルカムメッセージエリアに出しちゃうと、
エリアが大きくなり過ぎてしまうと思うんですよねぇ・・・。
エリアが大きくなり過ぎてしまうと思うんですよねぇ・・・。
あ・・・それもそうッスね・・・;
あのエリアはなるべくこれ以上広げたくねぇッスね。
しかし、あのイラストはけっこう良いと思うんスよねぇ。
イマジファミリーの良さが出てやすし。
あのエリアはなるべくこれ以上広げたくねぇッスね。
しかし、あのイラストはけっこう良いと思うんスよねぇ。
イマジファミリーの良さが出てやすし。
そうだねぇ・・・。
せっかくブログのトップページに出してるお知らせなんだし、
このイラストはできれば出したいけど・・・
あ、そうだ!
この画像、ちょうど3人それぞれのイラストが帯みたいに連なってるじゃない?
だったら・・・
イマジファミリー3人それぞれのバナー画像を作って、ランダム表示させちゃえばいいんじゃない?
せっかくブログのトップページに出してるお知らせなんだし、
このイラストはできれば出したいけど・・・
あ、そうだ!
この画像、ちょうど3人それぞれのイラストが帯みたいに連なってるじゃない?
だったら・・・
イマジファミリー3人それぞれのバナー画像を作って、ランダム表示させちゃえばいいんじゃない?
おお!!
そいつぁ名案ッス!!
横長のバナー画像なら、エリアもそこまで広がらねぇッスよね!
そいつぁ名案ッス!!
横長のバナー画像なら、エリアもそこまで広がらねぇッスよね!
よしっ!さっそくやってみましょう!
サイトのトップページでバナー画像をランダム表示してみた!
それでは、さっそく実装してみましょう!
【手順1】バナー画像を作る
まずはバナー画像を用意しましょう!
今回は元のバナー画像を3つに切り分けるだけなんで簡単ッスね!
・・・あ、タイトルも入れときやすか!
・・・あ、タイトルも入れときやすか!
そうだね。そうしよう。
よしっ!できたッスよ!
ふむ、これもけっこういい感じじゃねぇッスか!
ふむ、これもけっこういい感じじゃねぇッスか!
おお~!いいねいいね!
表示させるのが楽しみになってきた♪
あと、ファイル名についてですが、
<任意の文字列>+番号で付けるようにしましょう。
例えば、「test1.png」、「test2.png」といった具合ですね。
番号は連番で付けます。
作った画像は使用しているテーマディレクトリの下にimagesフォルダを作って格納します。
表示させるのが楽しみになってきた♪
あと、ファイル名についてですが、
<任意の文字列>+番号で付けるようにしましょう。
例えば、「test1.png」、「test2.png」といった具合ですね。
番号は連番で付けます。
作った画像は使用しているテーマディレクトリの下にimagesフォルダを作って格納します。
【手順2】バナー画像をランダム表示する
それでは、作ったバナー画像をトップページのウェルカムメッセージエリア上でランダム表示させてみましょう。
該当箇所のphpファイルに以下のソースコードを追加します。
該当箇所のphpファイルに以下のソースコードを追加します。
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
なるほど。
phpでファイル名を組み立てて、画像を呼び出すんスね。
そして、mt_rand()ってぇのがランダムで番号を出す関数ってぇわけッスか。
今回の場合は、mt_rand(1,3)とすることで、
1~3のいずれかの番号をランダムで決めてもらうんスね。
phpでファイル名を組み立てて、画像を呼び出すんスね。
そして、mt_rand()ってぇのがランダムで番号を出す関数ってぇわけッスか。
今回の場合は、mt_rand(1,3)とすることで、
1~3のいずれかの番号をランダムで決めてもらうんスね。
うん、その通りです。
あと、テキストリンクも追加してみましょう。
画像だけだと、それがリンクかどうか分かりにくいので、
テキストリンクも一緒に載せておくといいと思います。
では、スタイルも少し整えて表示させてみましょう!
どうだ!ドン!
あと、テキストリンクも追加してみましょう。
画像だけだと、それがリンクかどうか分かりにくいので、
テキストリンクも一緒に載せておくといいと思います。
では、スタイルも少し整えて表示させてみましょう!
どうだ!ドン!
やったッス!!
おいらのバナーが表示されたッスよ!!
おいらのバナーが表示されたッスよ!!
うんうん。いい感じですね♪
では、再読み込みさせてみるとどうなるでしょうか?
それ!F5ドン!
では、再読み込みさせてみるとどうなるでしょうか?
それ!F5ドン!
出たぁーーーー!!
今度はすあま姐さんの画像が出たッス!
これけっこう面白いッスね!
これけっこう面白いッスね!
そうだね!
おみくじみたいで楽しいね!
画像のランダム表示って、サイトに訪れる楽しみを作るのにいいかもしれないですね!
他のところでも使ってみたいなぁ☆
おみくじみたいで楽しいね!
画像のランダム表示って、サイトに訪れる楽しみを作るのにいいかもしれないですね!
他のところでも使ってみたいなぁ☆

ロゴ・イラスト・アイコン作成が苦手な方もココナラいいのが見つかるかも!

似顔絵・ロゴ・イラスト・アイコン作成、サイト制作、占い、ライティング、心・恋愛・就活・子育て・教育の相談まで、ありとあらゆる分野の得意を持つ人が集まる場所、それがココナラ!
文章を描くのは好きだけど、イラストを描くのはどうにも苦手!
でも、絵が全然ないとサイトが殺風景だなぁ・・・。
イラストを貼りつければ、もっと素敵なサイトになるんじゃないかなぁ・・・。
とお悩みの方はいらっしゃいませんか?
そんな時はココナラで代わりにイラストを作成してくださる方を探してみましょう!
ココナラにはイラスト作成はもちろん、キャラクターデザインも引き受けてくれる方がたくさんいらっしゃいますよ!
価格は一つの依頼につき500円から!
イラスト作成やキャラクターデザインの相場は1000~5000円がほとんどと意外にリーズナブル。
オリジナルのイラストをゲットして、素敵なサイトにしてみてはいかがでしょうか♪
最後に
はい!
今回は「WordPressで画像リンクをランダム表示して目玉コンテンツを目立たせよう!」ということでお送りしました。
これけっこういいですね!
サイトが一気に楽しいものになりますね。
今回は「WordPressで画像リンクをランダム表示して目玉コンテンツを目立たせよう!」ということでお送りしました。
これけっこういいですね!
サイトが一気に楽しいものになりますね。
そうッスね!
想像していた以上に良いもんができたッスね!
想像していた以上に良いもんができたッスね!
今日は何だか楽しそうなことしてるわね☆
あ、福夜(ふくよ)姐さん!
ちょうど良いところに!
せっかくッスから、福夜姐さんにも見ていただきやしょう!
ちょうど良いところに!
せっかくッスから、福夜姐さんにも見ていただきやしょう!
そうだね!
トップページのウェルカムメッセージエリアに、イマジファミリーそれぞれのバナー画像がランダム表示されるようになったよ♪
トップページのウェルカムメッセージエリアに、イマジファミリーそれぞれのバナー画像がランダム表示されるようになったよ♪
んまぁ!!
私の画像だわ!!
なるほど、どの画像が表示されるかは毎回のお楽しみってことね。
ステキ!
ますます楽しいサイトになってきたわね☆
私の画像だわ!!
なるほど、どの画像が表示されるかは毎回のお楽しみってことね。
ステキ!
ますます楽しいサイトになってきたわね☆
他のところもこれ使って何かできないかな~。
ちょっと考えてみますか。
ちょっと考えてみますか。
【 Imagination Lifeのイラスト・漫画作品をnote・メディバンにて公開中 】

Imagination Lifeのキャラクター・寿天(すあま)、福夜(ふくよ)、茶生(ちゃお)、真緒(まお)、八充(はちみつ)が共に暮らす模様を描いたイラスト・漫画をnote・メディバンにて公開しています。
ほのぼののんびりした世界をどうぞお楽しみください♪
・Imagination Life note支店
・Imagination Life メディバン支店
運営方法につきましては、支店により若干異なります。
詳しくはこちらをご覧ください。