岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

悲しい色やね グーグルが歌ったなら

www.youtube.com


悲しい色やね

にじむ街の地図 つなげ 夢みた

警察に停められた 車を 笑われ

泣いたらあかん 泣いたら ひたすら撮るだけ
f:id:yamato-hisanobu:20170418225650j:plain


Search NOW グー Gray Kasu

「いま平成何年?」 あんた聞くけど

Search NOW そんなことさえ わからんようになったんか?

グーグルの海は 悲しい色やね

世界中の誰もが 気にもとめてないから…


f:id:yamato-hisanobu:20170418230203j:plain


こんばんは。
ディレクターの久延です。

本日は大阪でWeb関連のセミナーに出席しました。
そこで、接点のなさそうなものを掛け合わせて、面白いコンテンツ作ろうって話があったんで、
即実践でブログに書いてみました。


んー中々難しいですね。そして中々楽しいですね。



グーグルのAIが、いつか、


『悲しい色やね、替え歌で歌って!』


なんて無茶ぶりに、瞬時に応えてくれたりするんでしょうね!


なんて想像しながらも、夜も更けてきたんで、今日はこの辺で。

それでは!
    

Wordpressのプラグイン:Elementor

こんにちは!!

今日はElementor Pluginを紹介したいと思います。

Elementorは最新のWordPressプラグインです。 それを使用すると、ドラッグアンドドロップだけでWordPressのウェブサイトを作ることができます。 非常に使いやすい。 ほとんどすべてのhtmlプロパティが利用可能です

プラグインをインストールすると、固定ページ/投稿にこのようなボタンが表示されます。

f:id:yamato-alam:20170417202752p:plain

ボタンをクリックすると、次のウィンドウが表示されます

f:id:yamato-alam:20170417202906p:plain

f:id:yamato-alam:20170417204208p:plain

固定ページにさまざまなタイプのデザインのセクションを追加することができます。
f:id:yamato-alam:20170417203609p:plain


elementorで作成したカスタムテンプレートを追加して変更することもできます。

f:id:yamato-alam:20170417203704p:plain

f:id:yamato-alam:20170417203741p:plain

f:id:yamato-alam:20170417203746p:plain

すべてのタイプのカスタマイズが利用可能です。

f:id:yamato-alam:20170417203857p:plain

それは自動的に応答します。

公式サイトでもっと読んでください。

elementor.com

table-cell内の子要素の高さを100%にする

f:id:yamato-ugaki:20170414195116j:plain

こんにちは。
Webコーダーの宇垣です。

左右の要素の高さを揃えたり、左右均等に割ったり、カラム落ちをなくすにはかなり便利なtable-cellです。
しかしtable-cellは、セル自体の高さは揃えられてもその中に入っている子要素の高さは揃えられていません。

f:id:yamato-ugaki:20170414195730j:plain



一見簡単そうに見えるこのデザインも実は少し手間がかかります。

f:id:yamato-ugaki:20170414195543j:plain

コアラの見出し部分が、コンテンツの高さがない分の高さも維持しないといけないようです。


f:id:yamato-ugaki:20170414195754j:plain
実は中のdivとコンテンツもテーブルなんです。高さを維持したくて。

コアラ
写真
パンダ

写真写真


<div class="out_table">
	<div class="out_cell">
		<dl>
			<dt>パンダ</dt>
			<dd>
				<span class="box">写真</span>
			</dd>
		</dl>
	</div>

	<div class="out_cell">
		<dl>
			<dt>パンダ</dt>
			<dd>
				<span class="box">写真</span>
				<span class="box">写真</span>
			</dd>
		</dl>
	</div>
</div>
.out_table {
	display:table;
	width:100%;
	height: 100%;
}
.out_cell {
	display:table-cell;
	padding:30px;
	background-color:#eee;
	border:1px solid #ccc;
	width:50%;
	vertical-align:top;
}
.out_table .box {
	text-align:center;
	padding:10px;
	margin-bottom:10px;
	background-color:#fff;
	display:inline-block;
	width:100%;

}
.out_table .box:last-child {margin-bottom:0px;}
.out_table dl {
	display:table;
	width:100%;
	margin-bottom:0px;
    height: 100%;
}
.out_table dt {
	display:table-cell;
	background-color:#D58083;
	text-align:center;
	vertical-align:middle;
	height: 100%;
}
.out_table dd{
	display:table-cell;
}
.out_table p {margin-bottom:0px!important;}

明らかに10pxとか20pxとか高さがずれているな、という場合は何かにマージンが付いている可能性があります。
リセットCSS・box-sizingを導入してある状態での使用をオススメします。

ページトップ