モカ☆マターリコム - モカ☆マターリコム https://mocha-matari.comhttps://mocha-matari.com/index.php Fri, 29 Mar 2024 19:20:15 +0900 Joomla! - Open Source Content Management ja-jp hr(水平線)を2トーンカラーに https://mocha-matari.com/hr-2/24.html https://mocha-matari.com/hr-2/24.html

HTML



CSS

.line {
    padding-top: .75em;
    background-image: linear-gradient(
	67.5deg,
	#1b6aa9 25%,
	#c5d6ea 25%, #c5d6ea 50%,
	#c5d6ea 50%, #c5d6ea 75%,
	#c5d6ea 75%, #c5d6ea
    );
    border: 0;
}
.line2 {
    padding-top: .75em;
    background-image: linear-gradient(
	67.5deg,
	#c5d6ea 25%,
	#c5d6ea 25%, #c5d6ea 50%,
	#c5d6ea 50%, #c5d6ea 75%,
	#1b6aa9 75%, #1b6aa9
    );
    border: 0;
}
.line3 {
	padding-top: .75em;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f19ec2+0,f9d3e3+100 */
	background: #f19ec2; /* Old browsers */
	background: -moz-linear-gradient(left,  #f19ec2 0%, #f9d3e3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #f19ec2 0%,#f9d3e3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #f19ec2 0%,#f9d3e3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f19ec2', endColorstr='#f9d3e3',GradientType=1 ); /* IE6-9 */
	border: 0;
}

画像で作った線とは違い、パーセント指定なのでスマホサイズになった場合でも色の割合、太さが変わらないのが利点。
Ultimate CSS Gradient Generator』等で設定したカラーを『background-image: linear-gradient』の部分に張り付ければ好みのグラデーションにもできます。


]]>
Sat, 02 Dec 2017 12:00:35 +0900
Android からネットラジオが聴ける 『 Free Radio Tuner 』 https://mocha-matari.com/android-free-radio-tuner/23.html https://mocha-matari.com/android-free-radio-tuner/23.html
  • Android からネットラジオが聴ける 『 Free Radio Tuner 』をご紹介します。まず左上からメニューを開き、『 Add Own Station 』を選択。

  • ここでネットラジオ局の設定をしてください。

  • 左上からメニュー『 Favorites 』を開くと、リストに追加されています。

  • 再生している放送を赤丸ボタンで録音できます。

  • ]]>
    Sun, 22 May 2016 02:25:43 +0900
    iPhone からネットラジオが聴ける 『 FStream 』 https://mocha-matari.com/iphone-fstream/22.html https://mocha-matari.com/iphone-fstream/22.html
  • iPhone からネットラジオが聴ける 『 FStream 』をご紹介します。

  • よく使う項目にリストを追加するには『プリセット』⇒『サイマルラジオ』⇒『地域選択』⇒『+』で追加。クリックすると編集画面に…

  • ここで別のネットラジオ局を設定することもできます。エンコードを『 UTF8 』に設定することで…

  • 再生している曲名等を日本語で表示できます。

  • 私が気に入っているのは、この録音機能です。各放送局の録音ができます。

  • ]]>
    Sun, 22 May 2016 00:59:14 +0900
    なん…だと…OneDriveがストレージ容量に関する重要な変更 https://mocha-matari.com/onedrive/20.html https://mocha-matari.com/onedrive/20.html ]]> Sat, 07 May 2016 11:53:13 +0900 Joomla! エクステンション紹介 https://mocha-matari.com/joomla/19.html https://mocha-matari.com/joomla/19.html .extension {line-height:1.5;} .extension p {margin-bottom:3em;}

    私が今まで探し回って使用頻度の高いものをご紹介します。

    【スライダー】

    Code7 Responsive Slider
    画像は9枚まで設定でき、それぞれリンクとキャプションを入れることができます。

    Vinaora Nivo Slider
    こちらは画像のディレクトリを指定するタイプのスライダーです。
    様々な表示方法が設定できます。個々の画像にリンクは貼れません。

    【ギャラリー】

    Unite Horizontal Carousel
    サムネイル画像をメリーゴーランド(Carousel)のようにスクロールします。

    【ブログ】

    TZ Portfolio
    記事を煉瓦状(masonry)に整列させます。
    コメント機能、Googleマップ、画像スライダー等の機能が使えます。

    News Calendar
    ブログ、記事へのリンクに対応したカレンダー。

    Latest News +
    記事やブログの更新を表示します。
    サムネイル画像を表示するには『K2』コンポーネントが必要です。

    Mini K2
    記事やブログの更新を表示します。
    サムネイル画像を表示するには『K2』コンポーネントが必要です。

    【スケジュール】

    JEvents
    イベント、スケジュール、休業日などに使えます。

    【セキュリティ】

    ExtraWatch
    アクセス元(Google、Yahoo!、リンク)などの情報が見れます。
    スパム(spam)に利用されるであろうキーワードでIPをブロックします。

    R-Antispam
    スパム(spam)、不正アクセスしてきたIPをブロックします。

    【ソーシャル】

    My Responsive Facebook LikeBox
    Facebookの○○人がいいね!しています。の部分を表示します。

    Nice Social Bookmark
    ソーシャルブックマークを表示します。
    開いてるページをシェアします。タイトルとリンクが共有されます。

    JoomShareBar
    最近のまとめサイトなどでよく見かけるシェアバーです。

    JJ Social Images
    ソーシャルブックマークを表示します。
    破けた背景画像から覗くアイコンで各ソーシャルサイトへリンクします。

    Brilliant Instajoom
    Instagramのフォトストリームを表示します。

    Flickrberry
    Flickrのフォトストリームを表示します。

    【エディター】

    CKEditor
    ブログ作成で一般的に使われているツールです。絵文字なども使えます。

    JCK Editor
    CKEditorとほぼ同じですが、JCK Managerの各種設定で細かく設定できます。

    【バックアップ】

    Akeeba Backup
    サイトをデータベースも含めて丸ごとバックアップします。

    ]]>
    Mon, 20 Jul 2015 08:52:22 +0900
    pdfを『 Lightbox 』っぽく表示する https://mocha-matari.com/2014-12-22-15-34-57/18.html https://mocha-matari.com/2014-12-22-15-34-57/18.html 『LightWindow』でいろいろ試して、pdfの表示に成功しました。

    【LightWindow v2.0】

    HTML

    <script type="text/javascript" src="javascript/prototype.js"></script>
    <script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="javascript/lightwindow.js"></script>
    <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
    
    <div><a href="images/(表示したいswf).swf" class="lightwindow page-options" params="lightwindow_width=1280,lightwindow_height=960" title="(タイトル)"><img src="images/(サムネイル画像).png"></a></div>

    swfはiPhoneで開けないのでfancyboxをいじってみる。

    【fancybox】

    HTML

    <!-- Add jQuery library -->
    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>
    
    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="js/jquery.fancybox.css?v=2.1.5" media="screen" />
    
    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="js/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="js/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    
    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="js/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="js/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    
    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="js/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
    
    <script type="text/javascript" src="js/run.js"></script>
    <script type="text/javascript">
      $(document).ready(function($){
        $('a[href$=".jpg"] , a[href$=".gif"] , a[href$=".png"], .fancybox').fancybox();
        $('a[href$=".pdf"]').fancybox({
          autoSize: true,
          type:'iframe',
          iframe: {
            preload: false
          }
        });
      });
    </script>
    
    <div><a href="images/(表示したいpdf).pdf" class="open_pdf"><img src="images/(サムネイル画像).png" alt="(タイトル)"></a></div>

    pdfはうまく開けましたがJoomlaと干渉してダメでした。

    ]]>
    Mon, 22 Dec 2014 15:34:57 +0900
    段落の2段インデント https://mocha-matari.com/2014-12-19-15-12-41/17.html https://mocha-matari.com/2014-12-19-15-12-41/17.html HTML

    <p>本文から1段字下げ、更に※印から始まる注意書き等も1段下げたい場合には『段落の2段インデント』が便利だと思います。<br>
    <span class="kome">※本文から1段字下げ、更に※印から始まる注意書き等も1段下げたい場合には『段落の2段インデント』が便利だと思います。本文から1段字下げ、更に※印から始まる注意書き等も1段下げたい場合には『段落の2段インデント』が便利だと思います。</span></p>

    CSS

    .kome {
    	position: relative;
    	left: 2em;
    	color: crimson;
    	margin-left: -2em;
    	padding-left: 1em;
    	padding-right: 2em;
    }
    

    本文から1段字下げ、更に※印から始まる注意書き等も1段下げたい場合には『段落の2段インデント』が便利だと思います。
    ※本文から1段字下げ、更に※印から始まる注意書き等も1段下げたい場合には『段落の2段インデント』が便利だと思います。本文から1段字下げ、更に※印から始まる注意書き等も1段下げたい場合には『段落の2段インデント』が便利だと思います。

    ]]>
    Fri, 19 Dec 2014 15:12:41 +0900