電光掲示板（お知らせ）のプラグイン取扱に関して記載します。
プラグインに関してはワードプレス5.2以降を推奨としテーマファイル（外観）のheader.phpのbody直下に下記の記述が存在しない場合は追加記述を
お願いいたします。
<?php wp_body_open();?>尚、プラグインのソースコードはご自由に変更頂き二次配布も構いませんが
ひとつ注意事項があります。参照した記事にリンクを貼ってください、
なお、事前の連絡等入りません。
電光掲示板（お知らせ）のソースコードは下記になります。
現在、テキストはHTMLタグを許していますので、いろいろと自由に
変更することが可能かと思います。
ちなみにこういった電光掲示板みたいな流れる仕様のコードは
インターネットの初期のころは多く見られましたが
このごろは全然、見なくなりましたね。。。
CSSの記述に関してはとくめいさんの記述を使用させて頂きました。
https://creatorclip.info/2014/06/css3-electric-bulletin-board/
とくめいさんも同じようなことを記事に記載しておりますが
自分もそのように感じました。
とくめいさんへ断りもなく使用してすみません、
Twitterで連絡しようかなと思ったのですが、それもなんだかと思い
勝手ながらこのような手段を取りました。
お知らせ（電光掲示板）のダウンロードは下記になります。
下記のファイルを解凍しワードプレスのプラグイン領域にフォルダごと
アップロードしプラグインを有効にするとご使用頂けます。
https://zip358.com/plugin/Z-Electric-bulletin-board.zip
<?php
/*
Plugin Name: Z-Electric-bulletin-board
Plugin URI: https://zip358.com/plugin/Z-Electric-bulletin-board.zip
Description: お知らせ
Author: taoka toshiaki
Version: 1.0
Author URI: https://zip358.com/
*/
add_action( 'wp_head', function() {
$color = get_option('ZEBB_color')?get_option('ZEBB_color'):"ffffff";
$cssdata ="
<style>
/* =====================
電光掲示板
======================= */
.ledText {
overflow: hidden;
position: relative;
padding:5px 0;
color: #$color;
font-size: 60px;
font-weight: bold;
background: #333333;
}
/* CSS3グラデーションでドット感を出す */
.ledText:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
background-size: 2px 2px;
z-index: 10;
}
/* CSS3アニメーションでスクロール */
.ledText span {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
-webkit-animation-name: marquee;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 15s;
-moz-animation-name: marquee;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 15s;
animation-name: marquee;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 15s;
}
@-webkit-keyframes marquee {
from { -webkit-transform: translate(0%);}
99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
from { -moz-transform: translate(0%);}
99%,to { -moz-transform: translate(-100%);}
}
@keyframes marquee {
from { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}
</style>
";
print $cssdata;
});
add_action("wp_body_open",function(){
$text = get_option('ZEBB_text')?get_option('ZEBB_text'):"";
if($text)print '<p class="ledText"><span>'.$text.'</span></p>';
});
add_action('admin_menu','Z_Electric_bulletin_board_set');
function Z_Electric_bulletin_board_set(){
add_options_page(
'zip358.com：プラグイン',
'電光掲示板設定',
'administrator',
'Z_Electric_bulletin_board',
function(){
if(isset($_POST["ZEBB_color"]) or isset($_POST["ZEBB_text"])){
$color = preg_match("/[a-zA-Z0-9]*/",$_POST["ZEBB_color"])?$_POST["ZEBB_color"]:"ffffff";
update_option('ZEBB_color', wp_unslash($color));
$text = $_POST["ZEBB_text"];
update_option('ZEBB_text', wp_unslash($text));
}
?>
<form method="post" action="">
<h2>電光掲示板設定</h2>
color code #<input type="text" style="width:350px" name="ZEBB_color" value="<?=get_option('ZEBB_color')?get_option('ZEBB_color'):""?>" placeholder="f7f7f7"><br>
text <input type="text" style="width:350px" name="ZEBB_text" value="<?=get_option('ZEBB_text')?get_option('ZEBB_text'):""?>" placeholder="文字を記入してください"><br>
テキスト文字を未入力にすると電光掲示板が表示されません
<?php submit_button(); ?>
</form>
<?php
}
);
}
